[b]PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた！

PageSpeed Insightsとはウェブページのコンテンツを解析し、ページの読み込み時間を分析してくれるGoogle Developersのツールです。僕のブログも分析してみて散々な結果になりました。改善したことを記録とともに訪問者さんへシェアしていきます。
photo credit: Shandi-lee via photopin cc

PageSpeed Insights

PageSpeed Insights

さっそくブログの表示速度を採点してもらおう

「ウェブページのURLを入力」欄にアドレスを入力して「分析」をクリック。
まぁ、60点くらいはあるでしょ（低く見積もって）と余裕で「さぁ、採点してくれたまえよ」とふんぞり返っていたら・・・

ん？6点？

んんん？33点、だと？いったいなんだこの数字は？これは夢か？ああ、そうか！数字が低い方がいいのか！・・・現実逃避してもダメだ。壊滅的すぎる遅さだ！ドラゴンボールの悟飯のセリフがおもわず脳裏をよぎる。

これはヤバイ、ヤバすぎる！すぐさま「修正が必要」をクリックし内容を確認して改善を試みる。CSSはまだしもJavaScriptを触るのはちょっと。そこで「圧縮を有効にする」と「ブラウザのキャッシュを活用する」をしてみることに。

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

参考サイトによると「.htaccess」を設定するのが一般的だそうです。だけどこの.htaccessファイルの取り扱いには十分な注意が必要。下記のテキストを.htaccessに追加するだけなので設定自体は簡単そう。

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

参考：ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法

ブラウザキャッシュを設定してみた結果・・・

おお〜モバイルは下がったたいして変わらないけど、パソコンは31点まで上がりました！よしよし！次は画像の圧縮を有効にしてみることに。

圧縮を有効にする

これはプラグインの「EWWW Image Optimizer」を使って画像を圧縮してみました！まだ導入していない方はぜひ活用してほしいプラグインです。設定とかに関しては別の記事に起こしますね！お待ちを。

やってみてもあまり変わらない・・・どうしよう・・・ここまでか？なんて思っていたら、どうやらデザインによってもテスト結果が違うらしいです。

Simplicityのレイアウトを変更

▼最近設定したレイアウト「タイル2列 画像縦横比保存」から

▼デフォルトの「サムネイルカード」へ。

再度、PageSpeed Insightsで分析テストにかけてみると・・・

パソコンのテスト結果「82点」

モバイルのテスト結果「60点」

おおおおお〜！かなり点数が上がりましたね！まだまだ改善の余地だらけですが、今のところはこれくらいにしておきますw また気が向いた改善していきたいと思います！

さいごに

今回、このツールで分析していなかったらと思うとゾッとします。Webページの表示速度ってかなり大事だと思います！まだ分析したことがないという人は一度、試してみてはどうでしょうか？