読者PageSpeed Insightsで高得点を取るために対応したことは、最初にどこを理解するとよいですか？
木村目的、作業手順、確認方法の三つに分けて読むと、仕組みと実装のつながりを理解しやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
PageSpeed Insights
PageSpeed Insightsでは、PageSpeed Insightsで高得点を取るために対応したことを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
公式サイトはこちらです。 URLを入力すると、分析が開始されます。100点満点で計測され、モバイルおよびPCが対象となります。PageSpeed Insightsで押さえたいポイント
PageSpeed Insightsは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
PageSpeed Insightsの確認方法
変更前後を比較し、想定した結果だけでなく、別の画面幅や未入力などの例外条件でも問題がないか確認します。
高得点を計測するには
高得点を計測するにはでは、PageSpeed Insightsで高得点を取るために対応したことを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
画像の軽量化
※重要度5 個人的にはもっとも分析に影響のある内容と考えます。以下の3点が重要です。 -画像を適切なサイズにリサイズ -画像の形式をWebp化 -画像を圧縮 デメリットとして、画像が荒くなることです。見た目を重視するサイトには、このような対応は適していないかもしれません。クライアントが何を求めているのかが重要になります。 検証ツールで確認し、適切なサイズにリサイズすることが大切です。組み込みサイズが、レンダリングサイズを下回らないように注意してください。
画像のWebp化はターミナルを使用して実装しました。詳細はこちらを参照ください。
当方の体感値ですが、こちらを対応した結果、おそらく0〜30ポイント向上したというのが主観的な評価です。フォント読込みを見直す
※重要度5 こちらも分析に大きな影響を与えています。GoogleフォントやAdobeフォントの読み込みを停止した状態で計測すると、得点が明らかに変化し向上します。よって読込み方法や不要なfont-weightを読み込んでいないか十分に注意し、サーバーを介するセルフホスティングや非同期での読み込みなどを検討する必要があります。参考にさせていただいたサイトはこちらです。 体感値0〜2０ポイントその他
その他では、PageSpeed Insightsで高得点を取るために対応したことを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
体感値トータル0〜50ポイント 以下は、Web制作においてクライアントチェック前にも対応しておきたい内容になります。コードを圧縮
こちらのサイトでCSS・Javascriptのコードが圧縮できます。重たいファイルにハッシュ値を設定
Webpackなどのモジュールバンドラーを使用します。GsapやjQueryなどの外部CDNからの読み込みは避けてください。コードに互換性及び、サイトのチェック
CSSはベンダープレフィックスを追加し、JavaScriptはBabelなどを使用して、新しいコードを古いコードに変換してください。 また、しっかりとHTMLのルールにしたがって記述しているかこちらのツールなどを使用しチェックして見てください。実装前に確認しておきたいこと
ここでは、PageSpeed Insightsで高得点を取るために対応したことを実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。
作業の目的と変更範囲を決める
目的、作業手順、確認方法の三つに分けて読むと、仕組みと実装のつながりを理解しやすくなります。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。
元の状態へ戻せるようにする
テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。
よくあるつまずきと確認方法
PageSpeed Insightsで高得点を取るために対応したことが期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。
変更が反映されない場合
保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。
公開前の最終確認
変更前後を比較し、想定した結果だけでなく、別の画面幅や未入力などの例外条件でも問題がないか確認します。
実務で使うための進め方
PageSpeed Insightsで高得点を取るために対応したことを実務で使うときは、完成形を一度に作ろうとせず、最小のサンプルで動作を確かめてから既存ページへ組み込みます。確認できた処理を少しずつ広げると、記事の例と自分の環境に差があっても調整しやすくなります。
小さなサンプルから試す
新しいコードや設定は、関係する要素だけを置いた小さなページで試します。期待する結果、実際の結果、変更した箇所を短く記録すると、途中で別の方法を試した場合にも比較できます。動作を確認できた後で、既存の命名規則やファイル構成へ合わせて移してください。
既存の実装と重複していないか確認する
同じ目的のCSS、JavaScript、プラグイン設定がすでに存在すると、指定の上書きや処理の二重実行が起きることがあります。検索機能や開発者ツールを使い、同じクラス名、関数名、フック、設定項目がないかを先に確認しましょう。
保守しやすい状態を保つ
実装時に動くだけでなく、数か月後に見直せる状態にしておくことも大切です。採用した理由と確認方法を短く残しておけば、仕様変更や担当者の交代があっても安全に更新できます。
変更理由を短く記録する
コメントや作業メモには、コードの内容をそのまま説明するのではなく、なぜその処理が必要なのかを書きます。参照した公式情報や動作確認日も残すと、仕様が変わったときに見直す判断材料になります。秘密情報や個人の環境だけで使えるパスは記録へ含めません。
定期的に動作を見直す
変更前後を比較し、想定した結果だけでなく、別の画面幅や未入力などの例外条件でも問題がないか確認します。 ブラウザー、WordPress、プラグイン、外部サービスを更新した後にも同じ項目を確認すると、変更による影響を早めに見つけられます。
まとめ
- 高得点を計測すればSEOの向上が見込める
- 画像の解像度や動画を活用しているサイトには向いていない
- 画像の適切な処理とフォントの読み込み方が重視される
点数だけを見るのではなく、実際の表示体験も確認するという点に納得しました。画像をWebPへ変換しただけでも改善したので、次は遅延読み込みを見直します。
改善を確認できてよかったです。遅延読み込みを見直す際は、画面上部のメイン画像まで遅延させると表示が遅くなることがあります。最初に見える重要な画像は通常読み込み、それより下の画像へ適用するのがおすすめです。