画像

背景

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

  1. 名古屋のホームページ制作会社 花のや
  2. 花のやブログ
  3. WordPressサイトをPageSpeed Insightsで高得点をとる方法
2018/11/02オープンソースWordPress

WordPressサイトをPageSpeed Insightsで高得点をとる方法

こんにちは花岡です、冬が始まります。
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についてはプラグインに頼って設定をすると、予期せぬ不具合に遭遇する可能性があるので自分で圧縮するのがおすすめです。

画像を最適化する

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

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

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

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

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

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

まとめ

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

この記事を書いた人:hanaoka

村生まれ村育ちWebディレクターです。 2014年に株式会社花のやを設立。以後ディレクションと営業を兼務しています。 学歴コンプレックスをバネに日夜戦っています。

人気記事ランキング

株式会社 花のや
〒460-0008
愛知県名古屋市中区栄5-16-14 新東陽ビル4F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ