• 投稿者サムネイル画像 zoe
    • #ホームページ全般

こんにちはー、カワゾエ(@zoe)です。

Googleが提供するDevelopersのツールに「PageSpeed Insights」というWebサイト(ホームページ)の診断ツールがあります。このツールは指定したページの”表示スピード”の状態を診断し、改善点を提示してくれます。
今回はこのツールを使って、自分のブログの表示スピードを改善してみようと思います。

PageSpeed Insightsを使ってみる

PageSpeed Insightsキャプチャ

PageSpeed Insightsのページにアクセスして「ウェブページのURLを入力」とある欄に、調べたいサイトやブログのURLを入力し、すぐ横の「分析」ボタンをクリックします。

ホームページを分析!

PageSpeed Insightsキャプチャ

僕のブログの診断結果はこのようになりました。PCサイトの他にスマホやタブレット向けのサイトがあれば、それらも測定可能です。今回はPCサイトを見ていきます。

75/100とあるところが評価点。微妙な点数ですね。
改善の提案で重要なものは赤い「!」マークで「修正が必要」と出ます。その他、修正を考慮すべき点も挙げられるので適宜修正を行いましょう。

修正すべき点を修正しよう

ブログ診断結果

「修正方法を表示」をクリックすると、具体的な修正方法・箇所が表示されます。「画像やjs等のキャッシュ設定を正しく行いましょう」という修正指示がありますね。

[plain]
<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/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"
</ifModule>
[/plain]

.htaccessに上記のようにファイルタイプごとの有効期限をアクセス後の秒数で指定します。これによりキャッシュが有効になり、ブラウザ側のキャッシュが削除されるか、強制的にリロードしない限りキャッシュデータを利用してサイトの表示が行われます。

サイトを最適化した結果

ブログ改善後の診断

修正後再びPageSpeed Insightsで分析を行うと、評価が75点から85点へアップしました!今回の修正では劇的に早くなったということはありませんでしたが、分析結果に挙げられる他の修正も行えば少しずつ改善されるでしょう。

この記事を描いたスタッフ

投稿者サムネイル画像 zoe

FVデザイン部部長。通称ゾエ。Web・DTP各種デザインを担当。O型だけど変なところで几帳面。スッキリ・カッチリなデザインが得意。趣味のアクアリウムを毎日満喫中です。<a href="http://www.grass-design.info/">水草・ネイチャーアクアリウムブログGRASS DESIGN</a> <a href="https://www.fvs-net.co.jp/staff/kawazoe-hirofumi/"></a>