WebVitalsのCSS

WebVitalsを最適化するためのCSS関連の手法

Jun 2, 2021

Available in: English, Español, Português, Русский, 中文, and 한국어

Appears in: Core Web Vitals

Katie Hempenius

Twitter GitHub Glitch Homepage

Una Kravets

Twitter GitHub Homepage

スタイルの記述方法とレイアウトの作成方法は、Core Web Vitalsに大きな影響を与える可能性があります。これは、Cumulative Layout Shift (CLS)とLargest Contentful Paint (LCP)に特に当てはまります。

この記事では、Web Vitalsを最適化するためのCSS関連の手法について説明します。これらの最適化はページのさまざまな要素 (レイアウト、画像、フォント、アニメーション、読み込み) によって分類されます。その中で、サンプルページの改良について探ります。

レイアウト #

DOMへのコンテンツの挿入 #

周囲のコンテンツがすでに読み込まれた後にコンテンツをページに挿入すると、ページの他の要素がすべて下に配置されます。これにより、レイアウトシフトが発生します。

Cookieの通知、特にページの上部に配置される通知は、この問題の一般的な例です。読み込み時にこのようなレイアウトシフトを引き起こすことが多い他のページ要素としては、広告と埋め込みがあります。

特定 #

Lighthouseの「大きいレイアウトシフトの回避」監査は、シフトしたページ要素を特定します。このデモの結果は次のようになります。

Cookie通知自体は読み込み時にシフトしないため、Cookie通知はこれらの調査結果に記載されていません。通知の下にあるページの項目 (つまり、 div.heroとarticle) がシフトします。レイアウトシフトの特定と修正の詳細については、レイアウトシフトのデバッグを参照してください。

修正 #

絶対位置または固定位置を使用して、ページの下部にCookie通知を配置します。

変更前

.banner {
  position: sticky;
  top: 0;
}

変更後

.banner {
  position: fixed;
  bottom: 0;
}

このレイアウトシフトを修正する別の方法は、画面上部のCookie通知用にスペースを予約することです。このアプローチも同様に効果的です。詳細については、 Cookie通知のベストプラクティスを参照してください。

画像 #

画像とLargest Contentful Paint (LCP) #

通常、画像はページのLargest Contentful Paint (LCP) 要素です。LCP要素になりうる他のページ要素には、テキストブロックと動画ポスター画像が含まれます。 LCP要素が読み込まれる時間によってLCPが決まります。

ページのLCP要素は、ページが最初に表示されたときにユーザーに表示されるコンテンツに応じて、ページの読み込みごとに異なる可能性があることに注意してください。たとえば、このデモでは、Cookie通知の背景、ヒーロー画像、および記事のテキストが、潜在的なLCP要素の一部です。

サンプルサイトでは、Cookie通知の背景画像は実際には大きな画像です。 LCPを改善するには、画像を読み込んで効果を作成するのではなく、CSSでグラデーションをペイントすることができます。

修正 #

画像ではなくCSSグラデーションを使用するように.banner CSSを変更します。

前：

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

後：

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

画像とレイアウトシフト #

画像が読み込まれると、ブラウザーで画像のサイズを決定できます。ページがレンダリングされた後に画像の読み込みが発生し、画像のスペースが予約されていない場合は、画像が表示されたときにレイアウトシフトが発生します。このデモでは、ヒーロー画像が読み込まれたときにレイアウトシフトが発生しています。

特定 #

明示的なwidthとheightない画像を特定するために、Lighthouseの「画像要素に明示的な幅と高さがある」監査を使用します。

この例では、ヒーロー画像と記事画像のいずれにもwidthとheight属性がありません。

修正 #

レイアウトシフトを避けるために、これらの画像にwidthとheight属性を設定します。

変更前

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

変更後

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

これで、レイアウトシフトが発生せずに画像が読み込まれます。

フォント #

フォントはテキストのレンダリングを遅らせ、レイアウトシフトを引き起こす可能性があります。結果として、フォントを迅速に提供することが重要です。

遅延テキストレンダリング #

デフォルトでは、関連付けられたWebフォントがまだ読み込まれていない場合、ブラウザーではテキスト要素がすぐにレンダリングされません。これは、「スタイルなしテキストのフラッシュ」(FOUT) を防ぐために行われます。多くの場合、これによりFirst Contentful Paint (FCP) が遅延します。状況によっては、Largest Contentful Paint (LCP) も遅延します。

レイアウトシフト #

フォントスワップは、ユーザーにコンテンツをすばやく表示する点で優れていますが、レイアウトシフトが発生する可能性があります。これらのレイアウトシフトは、Webフォントとそのフォールバックフォントがページ上で異なる量のスペースを占める場合に発生します。類似した比率のフォントを使用すると、これらのレイアウトシフトのサイズを最小限に抑えることができます。

特定 #

特定のページに読み込まれているフォントを確認するには、DevToolsの [ネットワーク**] タブを開き、フォント**でフィルタリングします。フォントは大きなファイルになる可能性があるため、通常、使用するフォントの数を減らす方がパフォーマンスが向上します。

フォントが要求されるまでにかかる時間を確認するには、[タイミング] タブをクリックします。フォントが要求されるのが早いほど、早い段階でフォントを読み込んで使用できます。

フォントの要求チェーンを表示するには、[イニシエーター] タブをクリックします。一般的に、要求チェーンが短いほど、フォントを早く要求できます。

修正 #

このデモでは、Google Fonts APIを使用しています。oogle Fontsには、<link>タグまたは@importステートメントを使用してフォントを読み込むオプションがあります。<link>コードスニペットには、preconnectリソースヒントが含まれています。@importバージョンを使用するよりもスタイルシートの配信が速くなります。

概念としては、リソースヒントは、特定の接続を設定したり、特定のリソースをダウンロードしたりする必要があることをブラウザーに示す方法と考えることができます。その結果、ブラウザーはこれらのアクションを優先します。リソースヒントを使用するときには、特定のアクションに優先順位を付けると、他のアクションからブラウザーリソースが奪われることに注意してください。したがって、リソースのヒントは、すべてに設定するのではなく、慎重に使用する必要があります。詳細については、ネットワーク接続を早期に確立して、認知されるページ速度を向上させるを参照してください。

次の@importステートメントをスタイルシートから削除します。

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

<link>タグをドキュメントの<head>に追加します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

これらのlinkタグは、Google Fontsが使用するオリジンへの早期接続を確立し、MontserratとRobotoのフォント宣言を含むスタイルシートを読み込むようにブラウザーに指示します。これらの<link>タグは、できるだけ早く<head>に配置する必要があります。

アニメーション #

アニメーションがWeb Vitalsに影響する主な方法は、アニメーションがレイアウトシフトを引き起こす場合です。レイアウトをトリガーするアニメーションと、ページ要素を移動する「アニメーションのような」効果があるアニメーションの2種類のアニメーションは、使用することを避けるようお勧めします。通常、これらのアニメーションは、transform、opacity、filterなどのCSSプロパティを使用して、よりパフォーマンスの高い同等のアニメーションに置き換えることができます。詳細については、高パフォーマンスCSSアニメーションを作成する方法を参照してください。

特定 #

灯台の「合成されていないアニメーションを避ける」監査は、パフォーマンスの低いアニメーションを特定するのに役立つ場合があります。

修正 #

slideInアニメーションシーケンスを変更してmargin-leftプロパティを遷移させるのではなく、 transform: translateX()

変更前

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

変更後

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

重要なCSS #

スタイルシートはレンダリングをブロックしています。つまり、ブラウザーがスタイルシートを検出し、ブラウザーがスタイルシートをダウンロードして解析するまでは、ブラウザーで他のリソースのダウンロードが停止します。これにより、LCPが遅延する可能性があります。パフォーマンスを向上させるには、未使用のCSSを削除し、重要なCSSをインライン化{/a1し、重要で}ないCSSを延期することを検討してください。

まとめ #

さらなる改善の余地はまだありますが (たとえば、画像圧縮を使用して画像をより迅速に配信する)、これらの変更により、このサイトのWeb Vitalsが大幅に改善されました。これが実際のサイトである場合、次のステップは、実際のユーザーからパフォーマンスデータを収集して、ほとんどのユーザーのWeb Vitalsのしきい値を満たしているかどうかを評価することです。Web Vitalsの詳細については、Web Vitalsの詳細を参照してください。

最終更新

Jun 2, 2021 — 記事を改善する

Return to all articles

共有する

サブスクライブする