WordPressでPageSpeed Insightsにて高得点を稼ぐ方法 - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

こんにちは花岡です、冬が始まります。
PageSpeed Insights使ってますか？
高得点が取れると嬉しいですし、改善点の指摘もありがたい。
でも初見だと指摘内容の文章がわからないし、WordPressで構築すると得点が低くくなりがちです。

今回はこれまでで実践して、対策方法をまとめました。

ブラウザのキャッシュを活用する

画像データやファイルデータのブラウザキャッシュ設定します。
これは.htaccessに下記の内容を書き加えます。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 weeks"
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/js "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
</ifModule>

圧縮を有効にする

こちらも.htaccessに下記の内容を書き加えます。
Apacheのモジュールであるmod_deflateを使う書式です。

<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 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
</IfModule>

HTML を縮小する、CSS を縮小する、JavaScript を縮小する

Autoptimizeというプラグインで改善が見込めます。
https://ja.wordpress.org/plugins/autoptimize/
※JavaScriptについてはプラグインに頼って設定をすると、予期せぬ不具合に遭遇する可能性があるので自分で圧縮するのがおすすめです。

設定参照記事：ぱそらっく 様
https://pasolack.com/wordpress/autoptimize/

画像を最適化する

主に画像のファイルサイズが大きい時にでるメッセージです。
EWWW Image Optimizerというプラグインで改善が見込めます。
https://ja.wordpress.org/plugins/ewww-image-optimizer/

あとは投稿系のサムネイル画像のサイズも見直すとよりよいと思います！

設定参照記事：いたるブログ 様
https://mixart.jp/blog/wordpress/ewww-image-optimizer-setting/

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

何を言っているのかさっぱりわからない指摘ですが、多分HTMLのレンダリングを邪魔しているファイルのことを指すのだと思います。
なのでそういったファイルは「読み込みをずらす」もしくは「インラインで読み込み」させることで解決します。

JavaScript
ソースの後半に持っていく、もしくはインライン化です。
JavaScriptに関しては</body>付近にもっていけるものは移動させます。
ただし構築済のサイトだとトラブルが起きる可能性があるので要注意作業です。

CSS
Autoptimizeの設定でインライン化することで解決します。

まとめ

大雑把に簡単にやれるのは大体こんなところだと思います。
表示速度はSEO以外でもユーザビリティとして重要なので、これからも高得点目指してがんばります。