WordPress,css外部ファイル化方法Stinger

昨今…。
といっても、
ここ数年ページ表示速度もSEO対策のひとつにもなります。

また、
検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、
サイトにすら訪れてくれない場合があり得ます。

そんな中で、

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を追加してカスタマイズしていく上ではちょっとめんどい面もあります。

なので、
外部ファイル化はカスタマイズがほぼ終わってしばらくはカスタマイズしないなぁ。
という時にした方がいいと思われます。