優れたソフトウェアと実用的なチュートリアル
WP Meteorは、LCPを最適化するための確実なプラグインであり、LCPを最適化する方法を詳細に説明しています。
LCPの最適化 これにより、ウェブサイトが検索エンジンでより目立つようになり、より多くのトラフィックを獲得できるようになります。LCP最適化 最も簡単な方法はインストールすることです WPメテオ 、これプラグインLCPの速度をワンクリックで最適化したり、JSファイルの読み込みを遅らせたりすることができます。WP Meteorには複雑な設定はなく、シンプルなボタンのみで操作できるため、すぐに使い始めることができ、初心者にも最適です。以下では、LCPを最適化するいくつかの方法について詳しく説明します。
使用WPプラグインLCP最適化後のLCPインデックスが2.5未満の場合は、プラグイン内でWP Meteorを検索してインストールしてください。WP Meteorは、ページ速度を最適化する全く新しい方法です。以下の既存の最適化に加えて実行することも可能です。
- 自動最適化
- WPロケット
- WPトータルキャッシュ
- WPスーパーキャッシュ
- ライトスピードキャッシュ
LCP最適化のためのいくつかの方法
- Largest Contentful Paint (LCP) は、ページ上でスクロールせずに見える最大の要素が読み込まれるまでにかかる時間を測定します。
- サイトの LCP を削減すると、ユーザーはサイト上の重要なコンテンツをより早く表示できるようになります。
- PageSpeed Insights の診断セクションには、LCP メトリックをトリガーしている要素が表示されます。
DevTools のパフォーマンス パネルでも同じことが行われます。
ページのLCP時間を改善するには、この要素の読み込み時間を最適化する必要があります。ここでは、LCPインデックスを改善するための5つの効果的な方法をご紹介します。もちろん、FCP、CLS、TTIスコアの改善にも役立ちます。
LCP最適化、LCP時間を改善する方法
1. 画像の最適化
画像最適化は、あらゆる読み込みメトリックを改善し、レイアウトシフト（CLS）を削減する一連の技術です。画像圧縮は、その中でもさらに重要な部分です。圧縮とは、様々なアルゴリズムを適用して画像の一部を削除またはグループ化し、同時にサイズを小さくすることを意味します。圧縮には、非可逆圧縮と可逆圧縮の2種類があります。
- 非可逆圧縮ファイルから一部のデータが削除され、画質が低下して画像が薄くなります。JPEG や GIF は、非可逆圧縮画像の例です。
- ロスレス圧縮画質はほぼ維持されます。つまり、データは削除されません。容量は大きいですが、高画質な画像を生成します。RAWとPNGはロスレス画像です。
これを実現するための素晴らしいツールはたくさんあります。例えばイメージミンまたはオプティミジラ。
また、ウェブサイトが成長するにつれて、画像もどんどん追加されるようになるでしょう。そのため、画像を必要なレベルに自動的に最適化できるツールが必要になります。
適切なフォーマットを選択する
画像フォーマットを選ぶ際に難しいのは、品質と速度のバランスを見つけることです。高画質の画像は重いですが、見栄えは良いです。低解像度の画像は見栄えは悪いですが、読み込みは速いです。
写真サイトやファッションサイトなど、競合他社との差別化を図るために高画素数の画像が必要となる場合もあります。ニュースサイトや個人ブログなどでは、低画素数の画像でも全く問題ありません。以下に、参考になる簡単なルールをご紹介します。
- ロゴなどの単純な幾何学的形状で構成された画像には SVG を使用します。
- 品質を維持しながら速度を犠牲にする場合は PNG を使用します。
- 品質とUXのバランスを最適に取るには、WebPを使用しながら、フォールバックとして元の形式を維持してください。WebPは100%をブラウザでサポートしていないためです。
画像の種類を選択した後は、必ず写真を圧縮してみてください。
srcset属性の使用
画像を扱う際によくある間違いは、あらゆるサイズのデバイスに同じ大きな画像を表示してしまうことです。大きな画像は小型デバイスでは見栄えは良いものの、閲覧速度が非常に遅くなります。
より良いアプローチは、ブラウザが画像サイズを変更できるように、異なる画像サイズを提供することです。装備に応じてどちらを使用するかを決定します。そのためには、srcset属性を使用して、配信する画像の幅を指定します。例を以下に示します。
ご覧の通り、srcsetではpxではなくwを使用しています。幅600pxの画像が必要な場合は、600wと記述する必要があります。繰り返しますが、この方法では画像サイズの選択はブラウザに委ねられており、ユーザーはオプションを指定するだけで済みます。
Airbnbのウェブサイトではこのアプローチが採用されています。
適切な画像サイズを決める際には、Google アナリティクスを使って、デスクトップまたはモバイルからサイトにアクセスするユーザーの割合を計算しましょう。デバイスレポートには、訪問者が使用しているデバイスに関する詳細な情報も含まれています。
また、DevTools を使用して、さまざまなビューポートで画像がどのように表示されるかを確認する必要があります。
画像のサイズを変更する必要がある場合は、スマートリサイズ一括サイズ変更。
WordPress ユーザーへの注意:バージョン4.4以降、WordPressは画像の異なるバージョンを自動的に作成します。また、srcset属性も追加されました。WordPressユーザーであれば、 正しい画像サイズを指定する。
ヒーロー画像をプリロードする
最後のヒントは、ブラウザでのヒーローの発見を最適化することです 画像の速度。 多くの場合、画像はスクロールせずに見える範囲で最も意味を成すため、画像をより速く読み込むことはユーザー エクスペリエンスにとって重要です。
Forbes はホームページに最大の折りたたみ可能な画像をプリロードします。
この手法は、ブラウザにページのレンダリング時に特定の画像を優先するように指示します。プリロードは、特に以下のようなヒーロー画像を読み込むページでLCPを大幅に向上させます。
- JavaScript;
- CSS の background-image プロパティ。
2. CSSとJavaScriptの最適化
ブラウザがページをレンダリングする前に、HTMLの解析中に見つかったすべてのCSSファイルとJavaScriptファイルを読み込み、解析し、実行する必要があります。そのため、CSSとJavaScriptはどちらもデフォルトでレンダリングをブロックするようになっています。最適化されていない場合、ページの読み込み速度が低下し、LCPに悪影響を与える可能性があります。最適化する方法は次のとおりです。
- ズームアウト圧縮されたコードファイル
縮小は、コメント、スペース、改行などのコードファイルから不要な部分を削除します。これにより、小規模から中規模のファイルサイズを縮小できます。一方、圧縮は、異なるアルゴリズムを適用することでファイル内のデータ量を削減します。通常、ファイルサイズは大幅に縮小されます。
パフォーマンスの観点からは、両方の技術が必要です。ホスティング会社そしてCDNプロバイダーこれらのテクニックはデフォルトで適用されます。ご自身のウェブサイトに実装されているか確認してみる価値はあります。
DevTools の [ネットワーク] タブを使用して、ファイルの応答ヘッダーを分析し、これが当てはまるかどうかを確認できます。
ほとんどの縮小ファイルの名前には「.min」が含まれています . 圧縮ファイルにはContent-Encodingレスポンスヘッダーがあります通常は gzip または br の値を持ちます。
サイトのファイルが縮小または圧縮されていない場合は、今すぐ始めることをお勧めします。ホスティング会社やCDNプロバイダーに、縮小または圧縮できるかどうか問い合わせてください。対応できない場合は、縮小・圧縮ツールが数多くあります。
クリティカルCSSの実装
クリティカル CSS の実装は、次の 3 つのステップから成るプロセスです。
- さまざまなビューポート上の折り返し部分のコンテンツのスタイルの CSS を見つけます。
- CSS をページの head タグに直接配置 (インライン) します。
- 残りの CSS を延期します。
まず、DevTools のカバレッジ パネルを使用して、ページ上の各 CSS ファイルの使用状況をカウントします。
アセットをタイプ別に整理し、各 CSS および JS ファイルを参照できます。
当然のことながら、ページ上の未使用のCSSは重要ではありません。この時点で、レンダリング速度を低下させる未使用のCSSを削除または削減してみる価値はあります。
次に、重要なCSSを抽出するには、手動でコードを検査するか、ツールを使用する必要があります。この作業に適した2つの方法は次のとおりです。クリティカルCSSそして致命的。
抽出されると、重要な CSS はページの head タグにインライン化されます。
最後に、残りの CSS を非同期的に読み込みます。Googleが提案link rel="preload" 、 as="style" 、空の onload ハンドラーを使用し、スタイルシートへのリンクを noscript 要素にネストします。
また、ビューポートの違いも考慮することを忘れないでください。デスクトップユーザーとモバイルユーザーでは、スクロールせずに見えるコンテンツは同じではありません。このテクニックを最大限に活用するには、デバイスの種類に応じて異なる重要なCSSを使用する必要があります。
より小さなJavaScriptペイロードを提供する
JavaScriptは、ウェブ全体の読み込み速度が遅くなる主な原因の一つです。画像と同様に、優れたパフォーマンスを実現したい場合は、サイトのJavaScriptを最適化する必要があります。
LCPの場合、JavaScriptバンドルの分割スコアを向上させる優れた方法です。最初のルートに必要なコードのみを送信するという考え方です。最初のバンドルに含まれていないものは後で提供する必要があります。これにより、一度に解析およびコンパイルする必要があるJavaScriptの数が減ります。このための一般的なツールとしては、WebPack、Rollup、Browserifyなどがあります。コード分割の詳細については、こちらをご覧ください。web.devからのこの記事。
3. サーバーの応答時間が短縮される
サーバー応答時間を短縮することは、PageSpeed Insights で最も一般的な推奨事項の 1 つです。
この問題を解決するには、次の手順に従ってください。
ホスティングプランをアップグレードする安価な共有ホスティングプランをご利用の場合は、アップグレードが必要です。ウェブサイトの速度が速くてもホストサーバーが遅いということはあり得ません。
サーバーを最適化する特にトラフィックが急増している時期には、多くの要因がサーバーのパフォーマンスに影響を与える可能性があります。Katie Hempenius によるこのチュートリアルサーバーを評価、安定化、改善、監視するため。
サードパーティのプラグイン、ツール、ライブラリへのサイトの依存を減らすサーバーまたはブラウザで実行する必要があるコードの量が増加します。これによりリソース消費量が増加し、Time to First Byte（最初のバイトまでの時間）、First Contentful Paint（最初のコンテンツペイント）、LCP（LCP）などの指標に悪影響を及ぼします。
キャッシュの使用を最大化します。キャッシュは優れたウェブパフォーマンスの基盤です。多くのアセット（ロゴ、ナビゲーションアイコン、メディアファイルなど）は、数か月、あるいは1年もキャッシュされることがあります。また、HTMLが静的な場合はキャッシュすることで、TTFBを大幅に短縮できます。
CDNを使用するCDNは、訪問者とアクセスしたいコンテンツとの距離を縮めます。作業をできるだけ簡単にするために、CDNを内蔵したキャッシュツールを使用してください。
サービスワーカーの使用サービスワーカーは、共通要素の重複を避けることでHTMLペイロードのサイズを縮小します。インストールされると、サービスワーカーはサーバーに最小限のデータを要求し、それを完全なHTMLドキュメントに変換します。詳細については、Philip Waltonによるこのチュートリアルをご覧ください。。
4. 制限され最適化されたクライアント側レンダリング
クライアントサイドレンダリング（CSR）とは、JavaScriptを用いてブラウザ内で直接ページをレンダリングすることを指します。このアプローチは、データの取得、ルーティングなどのタスクをサーバーからクライアントにオフロードします。CSRは当初は完璧なソリューションかもしれませんが、JavaScriptを追加するにつれて、メンテナンスがますます困難になります。
CSR を実装している場合は、JavaScript を最適化する際に特に注意する必要があります。コードの分割、圧縮、縮小は必須ですさらに、HTTP/2 サーバープッシュ そしてLink rel=preload を使用すると、重要なリソースをより速く配信できます。
最後に、CSRとプリレンダリングを組み合わせたり、サーバーサイドレンダリングを追加したりすることもできます。ここでのアプローチは、サイトのテクノロジースタックによって異なります。クライアント側でどれだけの作業が必要で、それがパフォーマンスにどのような影響を与えるかを理解することが重要です。
このトピックについてさらに詳しく知りたい場合は、Web でのレンダリングに関するこの包括的なガイドを読むことをお勧めします。
5. rel=preload、rel=preconnect、rel=dns-prefetchを使用する
これら 3 つの属性は、最初に処理する必要があるリソースと接続をブラウザに指示することで役立ちます。
まず、ブラウザが優先的に処理すべきリソースにrel=preload属性を使用します。一般的には、スクロールせずに見える範囲の画像、動画、重要なCSS、フォントなどがこれに該当します。headタグに以下の数行を追加するだけで簡単です。
フォントをプリロードする際には、as="font"、type="font/woff2"、crossorigin などのオプションを使用すると、ブラウザがレンダリング時にリソースを優先的に処理するのに役立ちます。さらに、フォントのプリロードは FCP への準拠にも役立ち、レイアウトのずれを軽減します。
Forbes.com では、フォントの読み込み時間を短縮するためにこの手法を使用しています。
次に、rel=preconnect はブラウザに、ドメインへの接続を即座に確立することを伝えます。これにより、重要なドメインへのラウンドトリップが削減されます。これも実装は非常に簡単です。
ただし、事前接続を行う際は十分に注意してください。ドメインに事前接続できるからといって、必ずしもそうすべきというわけではありません。接続する必要があるドメインにのみ事前接続してください。時間だ不要なホストにこれを使用すると、他のすべての DNS 要求がブロックされ、メリットよりもデメリットが生じます。
最後に、重要度の低い接続での DNS 検索時間を節約するには、rel=dns-prefetch を使用します。
プリフェッチは、事前接続のフォールバックとしても使用できます。
これらのテクニックはすべて、サイトのパフォーマンス指標を改善するのに非常に効果的です。まだ実装していない場合は、プリロードするリソースとプリ接続するホストの選択に注意してください。
WordPressサイトのLCPメトリックを削減する
上記のテクニックは、WordPress（WP）で構築されたサイトを含むすべてのサイトのLCP（コンテンツコスト）の改善に役立ちます。さらに、WPサイトでこの指標を最適化するのに役立つ2つのヒントがあります。
軽量テーマを選択します。あまりに複雑なテーマは読み込み時間を大幅に増加させ、LCPを含むCore Web Vitalsに悪影響を与える可能性があります。そのため、テーマは慎重に選ぶ必要があります。詳しくはこちらをご覧ください。キンスタによるこの研究;
プラグインを使いすぎないでください。プラグインは便利な機能を提供しますが、その多くはパフォーマンスを低下させる可能性があります。実行する必要があるコード量が増え、結果としてリソース消費量が増加します。各プラグインを注意深く検討し、追加後はサイトのパフォーマンスを監視してください。
これらのヒントはどちらも、WordPressサイトを運営する際には必須です。上記のテクニックと組み合わせることで、LCPが大幅に改善されるはずです。
コアウェブバイタルを監視するための追加ツールとベストプラクティス
LCP の最適化に問題がない場合でも、潜在的な問題を検出するためにフィールド データを定期的に確認することをお勧めします。
フィールドデータはChromeユーザーエクスペリエンスレポート（CrUX）によって収集されます。このデータには、実際のユーザーサイトのパフォーマンス。PageSpeed Insightsの総合スコアのすぐ下に、以下のフィールドデータが表示されます。
Google は過去 28 日間のページの Core Web Vitals を評価するため、重要なページは少なくとも月に 1 回はテストする必要があります。
データが不足しているために PageSpeed Insights にこのセクションが表示されない場合は、別のツールを使用して CrUX データセットにアクセスできます。
- LCP最適化 Chrome UX レポート API - JavaScript と JSON の経験が多少必要。
- LCP最適化 ビッグクエリ - Google Cloud プロジェクトと SQL スキルが必要です。
- LCP最適化 Google Search Console の Core Web Vitals レポート- 初心者に最適で、マーケティング担当者、SEO 担当者、ウェブマスターに役立ちます。
どのツールを選ぶかは好みによって異なります。サイトのLCPだけでなく、他のCore Web Vitalsの潜在的な問題にも注意を払うことが重要です。
同様に、Core Web Vitalsレポートも少なくとも月に一度は必ず確認してください。予期せぬ場所で問題が突然発生し、長期間気づかれないままになることもあります。
LCPを極限まで最適化すると、予想外の成果が得られるでしょう。検索エンジンでのランキングが向上していることに気づくでしょう。これがLCPの役割です。LCP指標を無視しないでください。LCPの最適化は非常に重要です！
