Google Developers の PageSpeed Insights で計測したら瞬間的にモバイル・PC共に99点になったので記念にキャプチャしておきました【追記あり】

ひさしぶりにプラグインや画像処理、jQueryなどの修正をしてみたら、瞬間的にPageSpeed Insightsで99点になりました。わたしはあまりこの数値にこだわりすぎないようにしているのですが、これだけの高得点はなかなか無いと思うので、とりあえず、記念にキャプチャしておきました。

とはいえ、これはたまたまうまくいった瞬間らしく、1時間後に測ってみたらまた数値が下がっていたのですが・・・。

PageSpeed Insightsの結果

【モバイル】
PageSpeed Insights(mobile)-74%

【PC】
PageSpeed Insights(PC)640-76%

やったこと

たいしたことはやっていませんが、いちおう以下に変更点を列記しておきます。

  1. 不要なjQueryファイルを削除
  2. プラグインの追加・削除
  3. 画像の圧縮

スマホ表示でjQueryのスライド式ボタンを採用していましたが、どうやら使う人がほとんどいないようなのでやめにしました。これがサイト表示を遅らせる原因のひとつにもなっているので。自己満足で残すなら別ですが、誰も使わないならいらないですね。

このおかげで、ずっと使えなかったJavaScriptを遅延させるプラグインを導入、有効化しています。ちなみにLazy load系のプラグインも試してみたのですがこれは不具合が発生して利用不可でした。

その代わりにJetpackに入っている「Photon」で、CDNから画像を読み込ませ、これを高速化の一助としています。これは無料で使えて、とくに難しい設定をする必要もないので簡単です。有料のもありますが、まずはこちらを試してみることをおすすめします。とくにWordPress.comが提供しているのが信頼できる要件のひとつです。

再検証後

はじめに書きましたように、1時間後にはこの高得点は下がっています。指摘されている改善点を上げれば、

  • サイトの応答時間が遅い
  • 画像ファイルのサイズが大きすぎる
  • 広告の画像ファイルのサイズやJavaScriptファイルが原因

などでした。

サイトの読み込み速度については、やや難しい話題になるので割愛。サーバーの設定など、これからいろいろ変更して試していくつもりです。また何かうまくいけば記事で書くことにします。

画像ファイルについては、「Photon」が原因です。たいていは問題ないのですが、たまに「CDNから読み込まれる画像の大きさが適切でないよー」と来るときがあります。まあ、また時間のあるときに調べてみます。

さいご。広告についてはGoogle AdSenseですが、これはしばらくこのままにしておきます。キャッシュの問題のようです。残念ながら、表示される広告について、どこまでできるのかよくわかっていません。何かわかったら調整してみます。

ちなみにGTmetrixの結果はこの程度でした。

GTmetrix(2014-10-15)

まあ、こんなもんですね。

【追記】

10月20日(月)に、もう一度計測してみたら、PCのほうが100点になってました。

PageSpeed Insightsの計測結果PC100点

ヽ(=´▽`=)ノ

このように日時によって結果は変わってきます。今回は上記で指摘されていた「ブラウザのキャッシュを活用する」の問題に対処した結果が反映されたようです。

ふだんよく指摘されるのは、たまに「Photon」による画像の読み込みがうまく機能していないことと、「サーバーの応答時間を短縮する」ですが、このタイミングではすべてがうまく行っていました。

関連記事

Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方 HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。 興味を持ったサイトのデザイン…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…