PageSpeed Insightsの結果を修正し表示速度を改善した5つの方法

Google「PageSpeed Insights」の結果を修正し、WordPressで作成したWEBサイトの表示速度を改善した5つの方法について紹介

「PageSpeed Insights」の結果

まず何の対処もしない状態では、PageSpeed Insightsの結果は悪く「提案の概要」として以下のような修正が必要であることがわかりました。

• ブラウザのキャッシュを活用する
• 圧縮を有効にする
• スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
• 画像を最適化する
• サーバーの応答時間を短縮する

スコアの方も60～70点ぐらいでした。
WEBサイトの表示速度はSEOにも関連する重要なところなので一つずつチェックしながら、かつ時間をかけず出来るだけ簡単に改善する方法で対応しました。
下記、5つの方法で90点ぐらいにスコアアップ出来ました。

「ブラウザのキャッシュを活用する」の対応方法

「.htaccess」ファイルに以下を追記することで改善します。

ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

「圧縮を有効にする」の対応方法

「.htaccess」ファイルに以下を追記することで改善します。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

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

プラグイン「Autoptimize」（最新：ver1.9.4）を導入し、設定することで改善します。

「advanced settings」で「JavaScript Options」を全てチェックしておきます。
私の場合、デザイン（見た目）の関係でCSSオプションはチェックしていません。

「画像を最適化する」の対応方法

プラグイン「EWWW Image Optimizer」（最新：ver2.5.1）を導入し、設定することで改善します。

「Start optimizing」と「Scan and optimize」の2つを押下して最適化します。

「サーバーの応答時間を短縮する」の対応方法

「.htaccess」ファイルに以下を追記することで改善します。

ModPagespeed On

※WEBサーバが対応していること。
エックスサーバーならサーバーパネルにログインし、ホームページカテゴリ内の「mod_pagespeed設定」をONにすることで実現出来ます。

こちらの応答時間については、物理的なサーバのスペックによるところも関係してきます。実際、ヘテムルサーバーよりエックスサーバーの方が表示速度は早かったです。
※ヘテムルの方はGUI的にはわかりやすく、使いやすい印象です。

参考価格

No.	品名	数量	単価	ネット注文価格
1	ドメイン設定費	1	5,000	5,000円
2	レンタルサーバ設定費	1	5,000	5,000円
3	WordPressインストール費	1	20,000	20,000円
4	WP表示速度改善設定費	1	10,000	10,000円
			小計	40,000円