[自作テーマ]PageSpeed Insightsの活用[2023]
※このページにはプロモーションが含まれています。
自作テーマを作る過程でページの読み込み速度や、できるだけ読みやすいサイトを作るために、PageSpeed Insigtsを活用すると、各種の指摘・提案・お叱りなどのお陰でGoogle社の指針に則ったサイトの構築に役立ちます。
中には調べても難しすぎてどうすれば良いものかわからない事項も含まれますが、ほとんどが理解しやすい物なので、解説されているサイトを探し、自分のテーマを手直しすることになります。
今回の投稿では、当サイトがどのような指摘を受け、修正をしたかを述べようと思います。
Largest Contentful Paint (LCP)
ビューポート内に表示される最大の画像、もしくはテキストブロックのレンダリング時間。
多くの場合が画像・JavaScriptによるレンダリングブロックになりますが、当ブログではフォントファイルが指摘を受けました。
どうしてもWebフォントを使いたかったので、漢字を常用漢字だけにしたフォントファイルを作ったのですが容量は400kBを超えており、それ以上の軽量化は無理でした。
調べるとGoogle Fontsでは特定のフォントをいくつかに分割して、ブラウザに合わせて配信する仕組みがあることを知り、真似ることにしました。
400kBのファイルを10分割して40kBのファイルを読み込ませるとLCPの指摘は消えました。そこで、漢字の数を増やし900kBのフォントファイルを20分割させてみると、同じくLCPの指摘は出なかったので、現在もそのままにしています。
Google AnalyticsはCloudflareのZarazという機能を使い、AdSenseはスクロールを感知してから読み込ませることで、ページのレンダリングに影響が出ないようにしています。
画像はWebPをTinyPNGを使って軽量化したものと同じまで圧縮しています、具体的にはGIMPでWebPに変換するときに品質を60%にしています。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りFirst Contentful Paint (FCP)
ページの読み込みが開始されてから、ページ内のいずれかのコンテンツが初めて描画されるまでの時間。
ファーストビューのCSSをインラインで読み込ませています。また、投稿ページのCSSの容量をできるだけ小さくするために、singleページ専用のCSSファイルを作り、それ以外と分けています。
First Input Delay (FID)
ユーザーが最初に行ったアクションの応答性を測る指標。
新しく加わった指標でデータがありません。
Interaction to Next Paint (INP)
ページの読み込みを開始してからユーザーがページを離れるまでの間に発生する、ユーザー入力への応答性。
新しく加わった指標でデータがありません。
Cumulative Layout Shift (CLS)
ページコンテンツの視覚的な安定性。
当サイトでは関連投稿の描写が、CSSの記述が不適切だったために、指摘を受けました。
実際にページをリロードすると画像が拡大しながら表示されていたので、全て書き直しで対応。
なぜそうなったかわからないのですが、ページ下部の描写は通常は見ることがないので、指摘を受けて初めて気が付きました。
Time to First Byte (TTFB)
最初の1バイトを受信するまでの時間。
CloudflareとWordPressのプラグインのSuper Page Cache for Cloudflareの併用でHTTP/3での高速配信が可能になっています。HTTP/3を使うと帯域が十分あればすべてのファイルを同時にダウンロード可能なので、ページの読み込み時間が1秒掛からないことも実現できます。
しかしPageSpeed Insightsの携帯電話での測定は、3G回線をエミュレートしているので、かなり低速になるようです。
以前はweb.devにあった項目が新たに追加
前にはweb.devにあったMeasure（測定）項目がPageSpeed Insightsに移動しました。
パフォーマンス以外にユーザー補助・おすすめの方法・SEOのの項目があります。
配色の問題やリンクとリンクの距離が近すぎる問題、リンクに読み上げの為の名前がついていないなど多岐にわたってのポイントを指摘してくれます。
自作テーマの点検を終えて
WordPressのテーマによって多くの機能が備わっていたりデザインのカスタマイズが簡単にできたりと、特に有料のテーマはプロが作っているだけにとても良くできていると思います。
テーマを作っていて困ったのはPHPのバージョンを8に上げた時に、7までは注意だったものが警告になったことです。注意までならサーバーの設定でサイトに非表示にできるのですが、警告は消すことができません。調べて変数の未定義エラーは出なくなるように修正はできましたが、有料テーマではそのような心配は無いでしょう。
ただ、テーマやプラグインが原因で読み込みが遅くなった場合は、対応の方法がありません。別のテーマやプラグインに変更するしかありません。
私が最も気にかけているのは、テーマやプラグインの更新が止まった場合にどうするのかという点です。特に描写に関わる部分はプラグインは使わないでいます。
テーマを自作するメリットは、全部を自分の好きなようにできる点です。HTMLとCSSと少しのPHPの知識があればWordPressのテーマは作れると思います。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。