WordPressの運用

PageSpeedInsightのスコア改善のためにWPに行なったチューニング

2017.09.21

Macでコーディング

Googleの提供しているツールにPageSpeedInsightなるものがあります。PageSpeedInsightはWebサイトの速度に関するパフォーマンスを測定するツールで、PageSpeedInsightでいいスコアを叩き出すことは、ある程度、Webサイトを表示する速さの目安になります。

改善はWebサイトのみならずサーバーの設定にも及ぶ

PageSpeedInsightの改善案は、Webサイトの作りのみならず、サーバーの設定にも及びます。むしろサーバーの設定のほうが多かったかも?!です。

PageSpeedInsightで提案される内容は大まかに

  • 画像を最適化する
  • レンダリングをブロックしている要素を排除する
  • 圧縮を利用する
  • キャッシュを利用する

です。

もう少し細かく、提案されますが、制作者としては、この点を踏まえておけば、いいスコアを叩き出すことが可能です。以下実施してみた結果です。

スマホの結果

PCの結果

画像を最適化する

画像を最適化すると聞いてパッと思い浮かぶのは圧縮だと思います。圧縮は行うべき施策で、効果も高いので必ずやっちゃいましょう。

しかし、

画像を圧縮し、再アップロードしてもスコアが改善されない!
そんな時は、適切なサイズの画像が設定されているか確認してみてください。

適切なサイズの画像設定って?

例えば、この記事をPC見た時、ファーストビューに大きな画像が配置され、サイドバーには小さなサイズの画像が配置されていると思います。

端的に言えばこの二つを同じ画像にするなよってことです。ビジュアルじゃないですよ!サイズですよ!

WordPressは画像アップロード時に複数サイズの画像が登録されます。それを適材適所に設定しましょう!ってことです。

詳しくは「Webサイト高速化のためにアイキャッチのサイズを最適化する」で紹介していますので参考にしてみてください。

運用の中の画像最適化

運用中の投稿画像も当然、圧縮する必要があります。書き出しで圧縮を行い、さらにKUSANAGIの設定や、KUSANAGIでない場合はプラグインEWWW Image Optimizerで生成される画像の圧縮を行います。

レンダリングをブロックしている要素を排除する

これはどういう事かというと、headで読み込んでいる、cssやjsファイルをフッター近辺で読み込みなさいって事です。

jsはいいけどCSSが・・・・・

コピペでちゃちゃっとできるので、ちゃちゃっとやっちゃってもいいのですが、CSSはまずいです。CSSをフッター近辺で読み込むと、しばらくレイアウトがカオスでみっともないです。

それを回避するにはファーストビューに使用するスタイルをインラインで記述し、残りをフッター近辺で読み込むという非常に手間のかかる作業が必要です。

パフォーマンスに目を取られて更新が滞ると意味がない

パフォーマンスも大事なのですが、Webサイトで一番大切なのはコンテンツであり、情報を更新する事です。CSSを対策すると、工数がかさみ更新が滞る可能性を秘めていますので、私は敢えて、そのままにしております。

jsはそれ前提にしておけば問題ないので、フッター近辺に移しちゃっています。

圧縮を利用する

これはサーバー側の設定です。アパッチでmod_deflateが使えるのなら.htaccessを編集して設定する事ができます。

.htaccessの圧縮設定

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

nignxの場合

nignxの場合はnignx.confで設定します。もしかしたら「KUSANAGIのNginxでSVGの圧縮を有効にする」が参考になるかもしれません。

nignxの場合はKUSANAGIとセットでしか扱ったことがありませんので、また調べないと〜って感じです。

ちなみにKUSANAGIなら初期で設定されています。

キャッシュを利用する

こちらも圧縮と同じくサーバー側の設定で、圧縮と同様に.htaccessを編集して設定する事ができます。

.htaccessのキャッシュ設定

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/svg+xml "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
</ifModule>

nignxの場合

KUSANAGIでは初期で設定されていたので・・・また調べないと・・・・スミマセン。

キャッシュは結構スコアに影響を与えますが、頻繁に更新するファイルはキャッシュしておきたくありません。そんな場合はパラメータを持たせるとOKです。

<link rel="stylesheet" href="<?php echo home_url(); ?>/css/styles.css?5648631">
<script src="<?php echo home_url(); ?>/js/common.js?ver=5698746215"></script>

手段が目的に変わらないように!

この手のスコアを出す作業は楽しいです!
やりだすと躍起になって止まりません!

しかし、Webサイトの真の目的は速さではありません。目的を達成するための手段の一つです。先ほどのCSSのくだりで、更新の妨げに的な事を申し上げましたが、本当にそれで、こういった取り組みは、常に天秤のはかりにかけながら行うべしなのです。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する