PageSpeed Insightsとはウェブページのコンテンツを解析し、ページの読み込み時間を分析してくれるGoogle Developersのツールです。僕のブログも分析してみて散々な結果になりました。改善したことを記録とともに訪問者さんへシェアしていきます。
photo credit: Shandi-lee via photopin cc
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"
ブラウザキャッシュを設定してみた結果・・・
おお〜モバイルは下がったたいして変わらないけど、パソコンは31点まで上がりました!よしよし!次は画像の圧縮を有効にしてみることに。
圧縮を有効にする
これはプラグインの「EWWW Image Optimizer」を使って画像を圧縮してみました!まだ導入していない方はぜひ活用してほしいプラグインです。設定とかに関しては別の記事に起こしますね!お待ちを。
やってみてもあまり変わらない・・・どうしよう・・・ここまでか?なんて思っていたら、どうやらデザインによってもテスト結果が違うらしいです。
Simplicityのレイアウトを変更
▼最近設定したレイアウト「タイル2列 画像縦横比保存」から
▼デフォルトの「サムネイルカード」へ。
再度、PageSpeed Insightsで分析テストにかけてみると・・・
パソコンのテスト結果「82点」
モバイルのテスト結果「60点」
おおおおお〜!かなり点数が上がりましたね!まだまだ改善の余地だらけですが、今のところはこれくらいにしておきますw また気が向いた改善していきたいと思います!
さいごに
今回、このツールで分析していなかったらと思うとゾッとします。Webページの表示速度ってかなり大事だと思います!まだ分析したことがないという人は一度、試してみてはどうでしょうか?
コメント
[…] Insights [b]PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた! | […]
[…] PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた! […]
[…] のぶさんのブログ記事「PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた!」 by designlikes11 […]