「魔法の杖をひと振りすれば、超高速のウェブサイトの出来上がり！」 誰もがそんな風に願うのではないでしょうか？
サイトの速度とユーザーエクスペリエンスを最適化するには、実に多くの作業が必要であり、技術的にも複雑です。ほとんどのサイト所有者や管理者は、開発者にいちいち相談して作業を進めなければなりません。新しいコアウェブバイタルの測定法は、何を修正すべきかについて、より多くの洞察と指針を与えてくれます。コアウェブバイタルのスコアを向上させるためにできる5つの方法を見ていきましょう。
はじめに、免責事項です
特定の問題を解決するために、ただ一つの方法が保証されているわけではありません。あなたのサイトを最適化するためには、より広い視野を持つ必要があります。たくさんの小さな修正が大きな結果を生むのです。ここでは、取り組むことができる5つの方法を紹介しますが、これは決定打ではありません。グーグルでさえ、多くの要素が連携してスコアを生み出すと言っています。正確に特定するのは難しいですが、それでもスコアは上がります。
Googleは、何が遅くなっているのか、何がユーザーエクスペリエンスを妨げているのか、その原因に関する洞察を提供します。また、多くのツールで修正方法についてのアドバイスも提供しています。たとえば、web.dev/measureでは詳細な結果は得られませんが、特定の修正による影響を知ることはできます。
Google の Web.dev/measure ツールを使用すると、修正がもたらす影響を知ることができます。
Googleの今後のページエクスペリエンスの更新
Googleが発表した、2021年のページエクスペリエンスのアップデートについては、次のようなより詳しい記事が公開されています。
・ページエクスペリエンス： Googleの新しいランキング要因
・コアウェブバイタルについて学ぶ：FID、CLS、LCP
・Search Console で コアウェブバイタルの詳細を知る
・Google Lighthouseでサイトを分析する方法
あなたや開発者ができる5つの方法
サイトのスピードとユーザーエクスペリエンスの重要性については、長い間常に話題になってきました。しかし、サイトを最適化する方法についての資料はたくさんあっても、その知識を実践するのは難しいものです。ここ数ヶ月、Google は来年に予定されているページエクスペリエンスのアップデートで、再びスピードを前面に押し出しています。その準備をするために、見識と多くのドキュメントを提供するツールを開発しました。
ほとんどの問題について、アドバイスはそれほど変わっていません。結局のところ、できるだけ早くユーザーにメインコンテンツを提供する、ということなのです。テストを実行して、あなたのサイトのパフォーマンスを確認し、修正に優先順位を付けて、始めていきましょう！ 以下に記載する、コアウェブバイタル改善のためにサイトを強化する新旧の方法の組み合わせをご覧ください。
1.画像を最適化する
ここでは、まず画像の最適化について説明します。あなたのサイトにとって最も重要なことの一つは、画像を適切に最適化することです。幾度となく言われてきたことですが、あらためて申し上げます。ホームページやランディングページに最適化されていない大きな画像があると、あなたのサイトに悪影響を及ぼす可能性があります。大きな画像は、多くの場合、任意のサイト上の「最大の内容量を持つ描画」（LCP）です。読み込みを速くして、訪問者に歓迎されるようにしなければなりません。
画像を速く読み込ませるためにできることを説明した画像SEOの人気記事はあります。しかし、簡単に言うなら、必要最低限のサイズで提供し、圧縮することです。そのためのツールはたくさんあります。個人的には、squoosh.appで得られる結果がとても気に入っています。画面上で画像をシャープに見せるためには解像度が大きくなければならない、という思い込みはやめましょう。
また、WebPのような最新のフォーマットを採用してみてください。これらの画像フォーマットは、より小さいサイズで高品質の画像を提供することができます。WebPは十分にサポートされており、Appleでさえも採用しています。間もなくリリースされるSafari 14は、iOSだけでなくMacOSでもWebPをサポートします。Chromiumを搭載した新しいMicrosoft EdgeブラウザもWebPをサポートしています。
お使いのCMSも画像の読み込みを改善してくれるツールです。8月にリリース予定のWordPress 5.5では、画像の読み込み遅延がサポートされるようになります。これは、画面に表示された画像のみを読み込み、残りの画像はユーザーがその画面と対話したときに読み込まれるようにすることを意味します。これにより、ブラウザは必要なときだけ大きな画像を読み込むようになります。
常に新鮮なサイトの速度のアドバイスとしてもう一つ、CDNの使用がありますが、画像のために特別にCDNを使用することができる、ということをご存知でしょうか？ 画像CDNを使用すると、どのようにサービスを提供したいか、どのように表示させたいか、より多くのコントロールが可能になります。画像CDNによってプッシュされた画像は、画像の動作をブラウザに伝えるURL内にプロパティの文字列を取得します。
2.画像等の余白を指定して読み込みを安定化させる
新しい測定法の一つに、累積レイアウト変更（CLS）があります。この例としては、モバイル用と思われるページで、ボタンを押そうとした瞬間にコンテンツが移動し、読み込みの遅い広告がその場所に表示されてしまう、ということが挙げられます。これは頻繁に発生し、ユーザーのフラストレーションの主な原因の一つとなっています。CLSを最適化したからといって、必ずしもページが速くなるわけではありませんが、速く感じることにはなります。
CLSは、CSSに寸法のない画像が原因で発生します。また、寸法のない広告や埋め込み、動的に注入されたコンテンツによっても発生します。適切に寸法が与えられていない場合、これらの要素は読み込み中に少しだけジャンプする傾向があり、ギクシャクして不安定に見えます。また、既存のコンテンツの上に新しいコンテンツが挿入されていることも原因かもしれません。ユーザーによる明示的なインタラクションがあった場合を除いては、このようなことはやめましょう。
コアウェブバイタルを改善して CLS を防ぐ方法の 1 つは、CSS に画像の幅と高さを追加することです。こうすることで、ブラウザはテキストよりも後に表示される画像のためのスペースを確保することができます。これで、ブラウザはそのうちに何かが追加されることを感知するので、ジャラジャラした感じはなくなります。もし、すぐに表示させたい場合は、低解像度のプレースホルダーを追加することを考えてみてはいかがでしょうか。
そのため、画像に適切な幅と高さの属性が設定されていることを確認してください。もちろん、通常のレスポンシブ画像でも可能です。ただ、すべてのサイズで同じ縦横比を使用していることを確認してください。
<img src=”mountain.jpg” width=”640″ height=”360″ alt=”Mountain underneath a cloudy sky”>
ジャンプ広告や突っ込みコンテンツに対応するために、そのスペースも確保しておきましょう。最終的にはCLSが少し下がるだけかもしれません。
3.サーバーを高速化して読み込み時間を短縮する
まず、あなたのホスティングプランをアップグレードします。ホスティングに手を抜いてはいけません。公正な価格で良いパフォーマンスを提供しているものを選びましょう。また、サーバーをどのように設定したのか、どのようなハードウェアを選んだのかという問題もあります。PHPの最新バージョンを使用してください! 足りないことを見つけた場合は、ハードウェアをアップグレードする必要があるかもしれません。また、データベースがどのように動作するかを調査し、改善できるかどうかを確認する必要があります。Query Monitor WordPress プラグインのようなツールを使って、あなたのサイトのクエリを分析し続けましょう。
また、サーバーがどのようにファイルをクライアントにプッシュするかを調べることもできます。例えば、link rel=preloadやHTTP/2サーバープッシュなどで、このプロセスを強化する方法がいくつかあります。これらはより高度なソリューションで、サーバーがリクエストにどのように応答するかを微調整することができます。ここでも、CDNはあなたのコアウェブバイタルを改善するために驚異的な役割を担います。
4.スクロールせずに見える範囲のコンテンツをすばやく読み込むために重要なCSSを調べる
ブラウザがページをロードするとき、HTMLを取得し、レンダリングし、CSSを取得し、レンダリングし、JavaScriptを取得し、レンダリングするなどの様々な作業をしなければなりません。サイトを読み込むために必要なファイルの数は多く、これらのファイルが大きければ大きいほど、サイトの読み込みが遅くなります。多くの場合、ブラウザが何かの作業で忙しい間は、バックグラウンドで物事をロードすることはできません。特定の要素がこの処理をブロックします。いわゆるレンダーブロッキングと呼ばれるJavaScriptやCSSは、すべてに影響を与えます。
CSS の読み込みが遅いために、画面に表示されるまでに時間がかかることがよくあります。デザインの重要な部分（スクロールせずに見える部分）をメインのCSSファイルから取り出してコードにインライン化することで、画面上に表示されるものをより速く表示することができます。この修正で、サイトが速くなるわけではありませんが、表示はより速くなります。すべては素晴らしいユーザーエクスペリエンスのためです。
肝心のCSSのセットを取得するには、数あるツールの中から選択するか、手作業で行うことができます。また、WP RocketのようなWordPressのキャッシングプラグインを利用することもできます。WP RocketにはOptimize CSS deliveryというシンプルなボタンがあります。これを有効にすることで、レンダリングブロッキングされたCSSを排除し、サイトの読み込みを強化することができます。もちろん、WP Rocketは他にもCSSやJavaScriptをミニマイズしたり、JavaScriptの読み込みを先延ばしにしたりといった素晴らしいこともしてくれます。
5.サードパーティのスクリプトの読み込みを改善する
多くのサイトでは、遅さの原因は外部からもきています。例えば、あなたのサイトが広告スクリプトに依存している場合、基本的には広告提供者の手に委ねられています。彼らが広告を高性能にすることを期待するしかありません。広告の読み込みが本当に遅い場合は、別のプロバイダへの乗り換え時でしょう。
サードパーティのスクリプトがあなたのサイトを遅くすることがわかった場合は、これを調べなければなりません。考えてみてください。本当にその特定の広告を必要としていますか？ これらのスクリプトの価値は何ですか？ もう少し最適化されていて、サーバーへのストレスが少ない別のオプションがあるかもしれません。試してみてはいかがでしょうか？
せめて、スクリプトのロードを非同期にするか、最後の瞬間まで延期するようにしてください。こうすることで、ブラウザは外部スクリプトを取得して実行する前に、最初にページを構築することができます。アナリティクススクリプトのように、読み込み中のスクリプトが重要な場合は非同期を使用してください。重要度の低いリソースには遅延を使うことができます。サードパーティのスクリプトの最適化については、参考資料がたくさんあります。
コアウェブバイタルの改善：重要なのはすべての小さな改善
今後のページエクスペリエンスのアップデートに関して、Googleはサイトのスピードとユーザーエクスペリエンスを再び前面に押し出しました。私たちは常にSEOを総合的に見てきました。そこには多くの可動部分があり、最高のサイトを構築するためにはそれらのすべてに取り組むべきです。上記のヒントはコアウェブバイタルのスコアを向上させるのに役立ちます。訪問者により良いエクスペリエンスを提供するためには、本当にこれを行うべきです。
おすすめ新着記事
おすすめタグ