PageSpeedInsightsがリニューアルしたのでそれの対策を目指す

山林生活
ウェブ関連
PageSpeedInsightsがリニューアルしたのでそれの対策を目指す

PageSpeedInsightsがリニューアルしたのでそれの対策を目指す

［更新日］2023/03/15

先日サイトリニューアルをしました。

とはいっても大きく変更したわけではなく背景色を変えただけ。
そのためとくに何か変わったわけでもありません。ただ以前からサイトの読み込みが遅いと思っています。一番の原因はサーバーの問題。これに関してはサーバー変更するしか方法がありません。色々調べたところやはりエックスサーバーがワードプレスに適している感じです。機会があればサーバー移管をしたいと思います。

でも、それ以外にもサイトの読み込みを遅くしている原因が多数あるようです。

昨年の11月頃にGoogleのPageSpeedInsightsがリニューアルされました。これまで以上に細かく情報を教えてくれるようなので調べてみました。

パソコンで見る分には問題ないようですが、スマホだとかなり遅い部類に分類されてしまいます。

35点という非常に悪い点をたたき出しております。
サイトスピードが落ちれば離脱者も増えてしまいます。とくに近年はスマホで見る人が多いです。また格安SIMの利用者も増えており、回線速度が遅いなんて人が多いです。その人向けにサイト構築をしていかなければなりません。

一つずつ項目を見ていきましょう。

改善できるポイントは以下のものとなります。

1.サーバーの応答時間の短縮
2.次世代フォーマットでの画像の配信
3.オフスクリーン画像の遅延読み込み
4.レンダリングを妨げるリソースの除外
5.使用していないCSSの遅延読み込み

以前までは「サーバーの応答時間の短縮」と「レンダリングを妨げるリソースの除外」「使用していないCSSの遅延読み込み」というのが存在していました。画像の改善ポイントも前からありましたが、今回はさらに細かく指定されています。

次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebPなどの画像フォーマットはPNGやJPEGより圧縮性能が高いとのこと。つまりGoogle先生は今のJPEG画像を別の形式に変えろって言っているわけです。変えるべき画像の大半はGoogleアドセンスが配信しているものですが...。でもこれを何とかしなければなりません。

JPEG 2000という言葉を久しぶりに聞いた気がします。そういえば昔そんなのがあったような。JPEGに代わって新たなフォーマットが完成したという形でJPEG 2000が登場したのですが、周りが追従せずにそのまま忘れ去られた遺産となってしまっていました。形式が変わるとそれに合わせてハードもソフトも変えなければなりません。互換性が無いと浸透しないわけです。

今回、もし画像を別形式に変えるのであればWebPなのでしょう。
こちらはGoogle先生が開発した画像フォーマットのようです。恐らく今後もGoogle主体でネットは続くわけですのでそれに合わせていくしかありません。しかしこのWebPは現在見れるブラウザが限られているようです。一応Microsoftのedgeでも次のバージョンで見れるようになるそうですが、基本はchromeになります。流行らせようとするもなかなか定着は難しそうです。一昔前のSONYを見ているような感じです。
ただ形式を変えることで画像の容量は半減するそうです。これはやらない手はない。

手法としてはWebPで表示させ、ブラウザが未対応であれば代替のJPEGを表示させるという形であればよいんじゃないでしょうか。androidのスマホであれば見れるわけです。見れなかったとしてもJPEGを表示させてくれるのでこれであればサイト速度も上がるのではないでしょうか。

「サーバーでWebPが使えない」

はい。なんとなくそんなことになるんだと思いました。
WebPを使うためにはサーバー側の設定が必要。しかし現在のサーバーでは利用できないみたいです。ちなみにエックスサーバーであれば問題なく利用できるみたいです。こりゃ早々にサーバー移管が必要ってことですね。ここの関してはサーバーを変えなければならないので後回しです。

オフスクリーン画像の遅延読み込み

オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにしてください。

つまり画像を遅延させて読み込ませなければなりませんよってことです。
これまでプラグインを入れては画像を遅延させて読み込ませようと努力をしてきました。しかし、大体のプラグインが不具合となります。しっかりと機能するときもあるのですが、機能しないと画像は全く表示されないまま。恐らくスクリプトの読み込みに失敗し、それ以降が実行されないんだと思います。その結果画像も表示されないということになります。新しいプラグインを入れても同じような状態に。これでは遅延どころか画像がないことになります。

当サイトはそこまで画像は多くないのですが、その少ない画像でもあるのと無いのとでは大きく違います。とくに画像について説明しているところで画像が表示されないのであれば何が書いてあるか意味も分かりません。

画像の遅延を使っているサイトをいくつか見かけますが、やはり読み込まなかったりすることもあるので、プラグインでどうにかするのは望ましくないようですね。プラグインを使わずに読み込み遅延が出来るかどうかを現在模索中です。

レンダリングを妨げるリソースの除外と使用していないCSSの遅延読み込みに関してはいつも通りの警告です。CSSの遅延読み込みは個人的に好きではないので行いません。

カスタム速度の記録と計測

User Timing API を使用してアプリをインストルメント化し、主要なユーザーエクスペリエンスでのアプリの実際のパフォーマンスを測定できるようにしてください。

日本語でどうぞ。

どうやら調べたところ、これは速度が速くなるとか関係なく「パフォーマンスが測定できるようにしておけ」ってやつのようです。

Javascriptファイルに以下を記載。

window.performance.mark('mark_fully_loaded');

これを各JSファイルに突っ込んでおけばそれで大丈夫みたいです。

ウェブフォント読み込み中のテキスト表示

これ、誰？たぶんGoogleフォントかなにかなんだと思いますが、どこで使っているのでしょう？もしかしてアドセンスなんじゃないでしょうか？どこで使っているかわからないですが、以下をCSSにいれれば対処可能のようです。

CSSファイルに以下を記載。

@font-face { font-display:swap;}

とりあえずシステムフォントを読み込ませ、あとでフォントを切り替えるってことです。フォントの読み込みを後にすることで表示も遅くできますってわけですね。

メインスレッド処理の最小化

恐らく無駄を省いて読み込みを早くしろってやつですかね？世の中無駄なものはないと思いますが。いらないものを削るしかないでsね。

静的なアセットと効率的なキャッシュポリシーの配信

要は読み込み早くするためキャッシュは残しておけってことです。当サイトはキャッシュを30日間残すようにしてありましたが、Google先生はそれでも生ぬるいとのこと。そのためキャッシュは一年間保存することにしました。しかしキャッシュを残していないのはGoogle先生、あなたですよね？修正箇所はほとんどGoogle配信のものです。文句言うならまず己の改善が必要なのじゃないでしょうか？

Javascriptの実行にかかる時間の低減

こちらに関してもほとんどがGoogle先生のものですね。

過大なDOMサイズの回避

DOMサイズというのがいまいち理解していませんが、内容からするとタグの量ってことなのでしょう。細かくタグに囲まれているとその分読み込む速度が遅くなる。だからタグの量を減らしましょうというのがここの修正ポイントです。確かに無駄にタグで囲っているところがあるのはわかります。スタイルで対処すればよい部分を無理くりタグで囲み、なんとなくそれっぽい形にしています。ここはすぐに修正できそうな場所ですね。一番最初にできそうなのはサイト内リンクに関してです。

タイトルと画像、そして概要が書かれている部分は多くのタグを使っています。それを最小化することでページ全体の量を減らせるのではないでしょうか。

非常にめんどくさい。

でもここを何とかしていかなければなりません。

クリティカルなリクエストの深さの最小化