一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

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

設定参照記事:ぱそらっく 様
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以外でもユーザビリティとして重要なので、これからも高得点目指してがんばります。

この記事を書いた人:hanaoka

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

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

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

お問い合わせ