>

Page Speed Insightsで0点→96点に上げるために当店がやったこと

 
page speed insight 97点

GoogleのSearch Consoleがアップデートし、ページの読み込み速度が表示されるようになりました。

また、速度測定サイト「Page Speed Insight」もリニューアルしました。(けっこう前ですけど)

Google検索の順位を見ても、読み込み速度が重視されていることが分かります。

Googleがスピードアップデート(Speed Update)を導入、2018年7月からページ表示速度をランキング要因に | 海外SEOブログ

そんな中、当店トップページの読み込み速度を測定してみると、

なんと ゼロ点! (恐ろしくてスクリーンショットは残していません……)

そんな状況で上位に入っている当店サイトをちょっと誇りに思いながら、一週間ほど空き時間を使って改修しました。

現在の速度はこちら。(アイキャッチは別撮りしたら97になってました。)

Page Speed Insightで、curio-shiki.comは96点

0点→96~97点にいたる改修の内容を、ご紹介していきます。

PageSpeed Insightsの結果が悪い原因を分析する

「改善できる項目」は最初にやるべき作業ではない

Page Speed Insightで、驚愕の「0点」を食らってまず考えたことは、

「改善できる項目」を少しいじっても、ほとんど効果ないだろうな……
ということでした。実際に「パフォーマンススコアには直接影響しません」と書いてありますしね。

改善できる項目
これらの提案を実施すると、ページの読み込み時間を短縮できる可能性があります。なお、パフォーマンス スコアには直接影響しません。
改善できる項目
短縮できる時間(推定)
次世代フォーマットでの画像の配信
2.1 s
レンダリングを妨げるリソースの除外
1.54 s
使用していない CSS を削除してください
0.75 s
適切なサイズの画像
0.45 s
JavaScript の最小化
0.3 s
効率的な画像フォーマット
0.3 s

ここに書いてある項目は、「Page Speed Insightsが検出できた限りで、明らかな改善の提案」という程度に受け取るべきものです。

Google Chromeのツールで分析

そこでまず、Google Chromeの解析ツールを使って、遅い原因をつきとめます。

Chromeでページを開き、F12 (デベロッパーツール)
→「Performance」タブ
→ひとつ下のメニューバー左端の●をクリックして記録開始
→ページ再読み込み
としたところが、次の画像です。(得点が上がったあとの状態です)

Chromeデベロッパーツールの「Performance」

この解析結果を使って、何がそんなに遅い原因なのかをつきとめる必要があります。

PC上でのChromeによる分析より、PageSpeed Insightsは、モバイル版がかなり遅く出る

このようにして測定した結果、
PageSpeed Insightsは、パソコンのChromeで見ている速度よりも、かなり遅い速度が出ている
という印象を持ちました。

たしかな根拠はないのですが、数字の上ではとにかく相当遅く出ています。

PageSpeed Insightsは、おそらく、モバイルで回線速度が出ない状況をシミュレートしているのではないか、と思いました。

例えば、Javascriptの実行時間はPC/モバイルほぼ同等でも、大きなファイルのロード時間は大差がつく、という結果が考えられるのです。この点を補正しながら、分析結果を読む必要があります。

PageSpeed Insights 0点を96点にした改善策

改善策の要約

こうして分析した結果をもとに、改善を行っていくのですが、
どんな点に気を付けるべきか、要点を項目でまとめてみます。

  • Webフォントの影響は非常に大きい。’font-display:swap’が効かないWebフォントは全部やめるべき。
  • Google Fontsのロードに’earlyaccess’を使っている場合は、今すぐ最新版に変えるべき。遅延ロードにはwebfont.jsではなく’&display=swap’を使うべき。(webfont.js自体がスコアを下げてしまう)
  • Font Awesomeは便利で使っていたが、上記の理由で、死活的でなければ使用すべきでない
  • JQueryのロード位置に神経を使う。従来は最下部で読み込む手法も有効だったが、得点はあがらない。<head>内で読み込ませ、’defer’を使うべき。
  • cssが大きい場合は、それ自体の遅延読み込みも検討すべき。
  • 見えていない画像の遅延読み込みは重要。面倒がらずIntersection Observerを導入すべき。
  • Javascriptの数と量を減らすのは重要。開発過程で入れたjsが残ったり、本当はいらないjsがあったりしないか。

実際に行った改修

実際に、次のような改修を行いました。

Google Fonts関係

複数のcssで、それぞれGoogle Fontsを読み込むという愚かな状態であったため、先頭のcssで一回しか読み込まないよう修正。

読み込みのコードを次のように修正。

前→
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

改修後→
@import url(‘https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap’);

(Google Fonts公式からとったものです。「Select This Font」→下部「1 Font Selected」)

なお、display=swapオプションにより、個別cssの読み込みに「font-display=swap」がつく。これにより、「フォント読み込み前にテキストが標準フォントで描画され、完了後に、適用先のフォントが自動的に置き換わる」という動作になる。

このため、従来はGoogleのwebfont.jsも使用していたが、ここもバッサリ削除できた。

その他Web Font関係

ちょっと可愛い手書きフォント「Hui Font」を使っていましたが廃止。

Font Awesomeは、V3にしたら速いかなと思ったら読み込みファイル数が激増し、しかも無料で使うにはPV数の制限まであるみたいなので、思いきって廃止。当分君と会うことはないでしょう。

JQueryほか、Javascriptの読み込みにasync/deferを使用

JQueryの読み込み位置を、footerで読ませていましたが、かえって全体の時間が伸びてスコアを落としているという結果。これやってるサイト多いと思いますが、新常識では×です。

そこで、head内に移し、deferを指定しました。

<script defer src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>

asyncとdeferの違いは次の通り。

  • asyncは、非同期に読み込まれ、読み込み完了したものから実行される。
  • deferは、非同期に読み込まれ、ページ描画終了後に順番に実行される。
    ※順番が保たれない例もあるようですが、当店で試した感じでは順番に実行されているようだった

これは、次のことを意味します。

  • JQueryをasyncにしてしまうと、JQuery依存の小さなスクリプトをasyncで読み込む際、JQueryより先に実行され、ほぼエラーになる。
  • JQueryをasyncにすると、ページ描画前に読み込みが完了すると実行されてしまい、その間ページ描画が止まる。結局スコアは上がらない。

なので、JQuery関係のベストプラクティスは、

  • JQuery本体が先、JQuery依存スクリプトはそのあとに記述。
  • すべてにもれなくdeferをつける

というのが当店の実験結果です。

Google関係のスクリプトはすべてasyncに

Google Analytics、Google Tag Managerなどのスクリプトは、すべてasyncでOKでした。

cssの遅延読み込みにひと工夫

cssの遅延読み込みというのは、「そんなことしたら書式が崩れる」という感じがしますが、実はできました。
当初、Google Speed Tools公式の方法で実装していましたが、めちゃくちゃ簡単な方法を紹介されている記事をみつけて、こちらを採用しています。

CSSを非同期ロードする最も簡単な方法 | Qiita

 

ちなみに以前やっていた、Google Speed Tools 公式の方法はこれ。

CSS の配信を最適化する | Google Speed Tools

見えていない画像を遅延読み込み(Intersection Observer)

画像の遅延読み込みも非常に影響が大きい項目でした。

遅延読み込みコンテンツを Google が認識できるようにする | Google Speed Tools

 

これをhead内に記述したうえで、個々の画像を次のコードにより記述します。

<img class="lazy" src="/images/share/dummy.png" data-src="(画像実体のurl" alt="代替テキスト">';

dummy.pngは、極小のダミー画像です。imgにクラスを付与したい場合は、class=”lazy title”などとすればOK。

実際にはPHPでfunctionを組み、これを使用して大量の置き換えをほぼ手作業で実施しました。まだ全ページ分終わってません。

css/jsの最小化(minify)

cssやjsに余計なコードがたくさん入っていると、読み込みに影響があります。今回の改修では、ともに非同期読み込みしていますが、それでも全体の終了時間に影響がありました。

「css minify」「javascript minify」などで検索するといっぱいツールが出ますので、それを使ってマメに最小化すると効果ありです。

Javascript用の最小化ツールでcssを最小化してしまうと、動きませんので注意して下さい。逆もそうです。

いらないJavascriptを徹底的に除去する

とにかくJavascriptの数が多いといいことありません。実行時間もかかるし、リクエスト数が多いとかも言われます。

cdn配信のjavascriptを、cdnだからいいかーと放置していると、その中で子js、孫jsをいっぱい読み込まれます。

webfont.js, bootstrap.js 全部はずしました。
今まで便利とか言っていたけど、速度に物凄く影響与えてまで残そうとは思いません。Googleが速度を重視するようになったので、今後改修されるかもしれませんね。

また、自前のちょっとしたカスタムjsも、cssに変える、動作を変更するなどして、極力はずしました。残すものはすべて deferにしました。

Adsenseは、しょうがない。速度と収益のバランスで。

教室HPにはアドセンス入れてませんので、以上の改修でほぼ満点とれましたが、ブログにはアドセンスを入れています。

このアドセンスがものすごく重いので、なんとかならないかと思うのですが、これは致し方ないというのが結論です。

遅延読み込みを頑張っている方の情報も見ましたが、いまひとつしっくりきません。スクロールしたとたんにワッと広告が出るのは、あまり気持ちのいいものではありません。

Adsenseのコードそのものに手を加える感じにもなってしまうので、動作がおかしくなると良くないです。これは今後の課題としました。

PageSpeed Insightsをあなどるなかれ。そして改修でここまでできる

以上、当店で実際におこなった改修をご紹介してみました。

まあまあ上位にいるからいいか、と思っていると、思いのほか遅くてびっくりすることもあると思います。

とにかく、0点だったサイトがほぼ満点までいきました。希望はあります。がんばってください。

キュリオステーション志木店

パソコン教室で、ホームページの作り方を習ってみませんか?

パソコン教室・キュリオステーション志木店では、「ホームページ作成コース」を開設しています。

「とにかく簡単に作りたい」という方から、じっくりこだわって作りたい、集客や販売をしたい方まで、3つのメニューをご用意しています。

受講料は入会時30,000円~、入会後はなんと「毎日かよっても、月々3,000円」の格安料金でご提供しています。

下のリンクから内容をぜひご確認ください!


ホームページ作成コースの内容を見る

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください