昨今…。
といっても、
ここ数年ページ表示速度もSEO対策のひとつにもなります。
また、
検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、
サイトにすら訪れてくれない場合があり得ます。
そんな中で、
プロモーションを含みます
WordPress,css外部ファイル化方法Stinger
KABU&カード紹介キャンペーンやってるよ！紹介コードを利用して、新規入会すると、株引換券1,000枚プレゼント！👇 紹介コードはこちらEHJ4XU8DP4A6
｢カブアンドの株は利用額に応じてもらえるので､私も使っています！｣｢前澤さんが始めたカブアンドの仕組みがとても斬新だと思いました。株がもらえるって斬新な仕組み。｣｢私はメインカードをKABU&カードに切り替えました。株がもらえるので。｣
2025年9月30日 (火曜日)本日の人気記事トップ１０
-
メルカリ招待コード：
This session is using IPv4 is established in
今日は2025年9月30日です。
この記事は2015年12月30日のものです。現在は状況が異なる可能性がありますのでご注意ください。
-
2025年9月30日 (火曜日)↓における週間月間人気記事トップ３は？↓
-
- 本日
- 週間
- 月間
計測データがありません。
-
エクストレイルT32エアコンダクト前期型から後期型化へ 2PV
エクストレイルT32の前期型と後期型ではパーキングブレーキが電子制御になったことなどやプロパイロット2.0などが導入されたこと以外、そんなに変わっていません。あとは、外装（外観）で言えば、フロントグリ…
-
エクストレイルT32前期型インストルメントルパッドから後期型インストルメントパッドに交換（換装） 2PV
エクストレイルT32前期型と後期型はプロパイロットやパーキングブレーキの電子化などその他些細なデザイン変更や4WDの電子制御化（完全な？）など以外前期型とほとんど変わらないかと思われます。（フロントグ…
-
Windows10でエラーコード0x800705b4の対処方法 2PV
Windows10で前回の記事でも紹介したWindows Updateができないくて、その対処方法を記載しました。 そしたら、 一応、sfc /scannowの実行でいくつかのWindo…
-
日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン 2PV
ある程度、年式がたった車においてはディーラーオプションナビ（DOP）やメーカーオプションナビ（MOP）の地図データが古くなったり、ナビのモニタインチ数が大きくなったりします。地図データが古くなるのはも…
cssファイルの外部化やJavaScriptの外部化は知られていると思います。
今回はWordPressを始めてまだ大した記事数もないので、
アクセスなどはほぼない状況ですが備忘録とともに今後の為に…。
と思います。
（参考サイト）
Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | ～備忘録～
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法 | 海外SEO情報ブログ
テーマによってheader内のcssやJavaScriptの数などは違いがあると思います。
また、製作者様がfooter部分に初めから記載されていたりasync、非同期化されていたりするものもあります。
そういうテーマは非常にありがたいですね！！
Stinger6もいくつか既に非同期化されているJavaScriptがありました。
まだWordPressはじめて間もないのでphp言語？とにらめっこしながらcssファイルを外部化してみました。
具体的方法
まずは、
自分のブログ・サイトが表示されてソースの表示をしてみます。
するとheader内にいくつか
<link rel="stylesheet" href=という部分があります。
こんな感じのところです。
この部分をまとまられるものは1つにまとめて外部ファイルに1つのcssファイルを作ります。
無料サービスでいうと、
- GoogleDrive
- Googleサイト
- Github
などがあると思います。
上記中でも速度が早いのはGithubかと思われます。
今回は親テーマのstyle.css内すべてと小テーマの自分でカスタマイズに使ったcss内容を一括して外部ファイル化します。
また、
ただ外部ファイル化するだけではファイル容量に違いがないのでcssファイルを圧縮します。
以下のようなwebツールがあります。
Refresh-SF - Online JavaScript and CSS Compressor
こちらに、
親テーマのcss内すべてと小テーマの自分でカスタマイズに使用したcssの順でコピペして圧縮してもらいます。
すると不要な部分（コメントアウトなど）が削除されて結構な削減率になります。
その圧縮された内容のcssをコピーして外部ファイル化したいサーバー内に任意の.cssファイルを作ります。
とりあえず、
これで下準備は完成です。
あとは、
テーマのどの部分がスタイルシート（.css）を読み込ませにいっているかを確認します。
（概ねheader.php内に記述されていると思います。）
その部分に、
外部ファイル化したURLを記載します。
あとは、
表示の確認をしてみて今まで通り表示されていれば完成です。
それと、
Googleのデベロッパーサービスですが、
pagespeed/insights
で、
レンダリングブロックされているものの数が減っているかどうかを確認してみてください。
今回の方法で複数のcssファイルを１つにしたのであれば、
例えば3つのcssファイルがあったものを外部ファイルに1つにしたとしたらレンダリングブロックされている数は２つ減っているはずです。
あとは、
javascriptも複数ある場合は1つにまとめて外部ファイル化した方がレンダリングブロックする数は減らせます。
さらに、
javascriptの場合は非同期にすればその外部ファイルに1つにしたものはレンダリングブロックされることはなくなります。
次回は、
javascriptの外部ファイル化+非同期にできるものがあればその方法も記載したいと思っています。
ただ、
いつになることやら…。（汗）
最後に注意として、
テーマの更新などがあった際や今後cssを追加してカスタマイズしていく上ではちょっとめんどい面もあります。
なので、
外部ファイル化はカスタマイズがほぼ終わってしばらくはカスタマイズしないなぁ。
という時にした方がいいと思われます。
¥7,800 （2025/09/13 14:27時点 | Amazon調べ）
ポチップ あなたにおすすめ
入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ１０
- 車のキーナンバー確認方法。キーレス紛失や壊れた時
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
- カーメイトのエンジンスターターでエラー15表示と対処方法
- エクストレイルT32エアコンダクト前期型から後期型化へ
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）
- エクストレイルT32マイナーチェンジ後ステアリング外し方
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR2032
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ
- プッシュスイッチでブレーキを踏まずにエンジンをかける方法
- アイドリングストップシステム異常警告灯表示対処方法
おすすめの記事一部広告
- ECUをリセットする方法。アイドリング不安定だったのでしょうがなく98
- 車のキーナンバー確認方法。キーレス紛失や壊れた時87
- TOYOTAキーレスリモコンの設定方法とキーナンバー（キー番号）76
- カーメイトのエンジンスターターでエラー15表示と対処方法75
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法64
- アイドリングストップシステム異常警告灯表示対処方法61
- 日産ディーラーオプションナビMM316D-WからMM518D-L交換（換装）NISSAN純正ナビリモコン59
- エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ57
- エクストレイルT32マイナーチェンジ後ステアリング外し方49
- キーIDが正しくありません。エクストレイルT32インテリジェントキー電池交換CR203244
Total832
よろしかったらシェアよろしくお願いします。
コメントを表示（0）
新着コメント