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

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

スポンサーリンク

PageSpeed Insights

PageSpeed Insights00

PageSpeed Insights

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

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

PageSpeed Insights01

ん?6点

PageSpeed Insights02

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

gohan_usunoro

これはヤバイ、ヤバすぎる!すぐさま「修正が必要」をクリックし内容を確認して改善を試みる。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ブログの表示スピードを上げる方法

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

PageSpeed Insights03

PageSpeed Insights04

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

圧縮を有効にする

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

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

Simplicityのレイアウトを変更

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

twotile

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

thumcard

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

PageSpeed Insights05

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

PageSpeed Insights06

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

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

さいごに

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

スポンサーリンク
[b]PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた!
この記事をお届けした
のぶログらいくすの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

フォローはこちらから↓

コメント

  1. Google、Webページの性能分析ツール「PageSpeed Insights」 | My Tips and Quotes より:

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

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

  3. […] のぶさんのブログ記事「PageSpeed Insightsでサイトスピードを計測したらヤバイことになってた!」 by designlikes11 […]