GoogleのPageSpeedInsights評価の実施
公開: 2022-07-22あなたがビジネスオーナーであるならば、あなたはあなたのウェブサイトのためにより良い検索ランキングを得ることに興味があります。 あなたが開発者であるならば、あなたはクライアントのニーズに応えて、そしてよくランク付けすることができるサイトを作成する必要があるでしょう。 Googleは、検索エンジンランキングページ（SERP）でウェブサイトの順序を決定する際に、何百もの特性を考慮します。
ページ速度は、2018年半ばに重要なランキング属性として公式に引用されました。 この記事では、ビジネスオーナーが注意を払う必要のあるパフォーマンススコアについて説明します：PageSpeedInsights。 単一ページアプリケーションに関連するような複雑なケースでソフトウェア開発者が改善を行うのに役立ついくつかの技術的な詳細について詳しく説明します。
GoogleのPageSpeedInsightsテストの重要性を評価する理由
Googleが2010年にPageSpeedToolsを導入したとき、ほとんどのWebサイト所有者はそれに精通していました。 まだ開いていない人は、PageSpeedInsightsを開いてサイトを確認する必要があります。
このサービスは、デスクトップブラウザとモバイルブラウザの両方でWebサイトがどのように機能するかについての詳細を提供します。 分析の上部にある[モバイル]タブと[デスクトップ]タブを使用してそれらを切り替えることができるという事実を見逃しがちです。
モバイルデバイスはコンパクトでバッテリー寿命を維持することを目的としているため、それらのWebブラウザーは、デスクトップオペレーティングシステムを実行しているデバイスよりもパフォーマンスが低い傾向があります。したがって、デスクトップスコアは高くなると予想されます。
大手ハイテク企業はどの分野でも赤字になることはありませんが、より厳しい予算で運営されている小規模なサイトはそうなる可能性があります。 ビジネスオーナーは、競合他社のサイトでPageSpeed Insightsを実行し、その結果を自分のサイトと比較して、パフォーマンスの向上に投資する必要があるかどうかを確認することもできます。
PageSpeed評価に合格するにはどのスコアで十分ですか？
PageSpeedは、Core Web Vitalsのメトリックを使用して、合格/不合格の評価を提供します。
このツールには3つのスコアがあります。
PageSpeedは、[パフォーマンスの問題の診断]セクションの色付きの円でパフォーマンススコアを目立つように表示します。 これは、平均的なモバイルデバイスまたはデスクトップデバイスと一致する特性を持つPageSpeedの組み込み仮想マシンを使用して計算されます。 この値はページの読み込みとPageSpeedの仮想マシン用であり、Google検索エンジンでは考慮されないことに注意してください。
この図は、開発者がWebサイトに変更を実装するときに役立ちます。これにより、開発者は変更がパフォーマンスに与える影響を確認できます。 ただし、Googleの検索エンジンは詳細なスコアのみを考慮します。
特定のページ（およびPageSpeedが分析されたページと同様であると見なすページ）の詳細なスコアは、Chromeブラウザーが実際のコンピューターで収集してGoogleに送信する統計から計算されます。 これは、Firefox、Safari、およびその他のChromium以外のブラウザでのパフォーマンスが考慮されていないことを意味します。
Webサイトのすべてのページの要約は、単一ページのスコアと同じ方法で取得されます。 アクセスするには、[このURL]タブではなく[発信元]タブを選択します。 Originはサイトのメインページを表示するため、タブバーの下に表示されるURLは異なります（ドメインのみ）。
Googleは、PageSpeedによって考慮される指標のリストを絶えず更新しているため、重要な情報の最良のソースは、Google検索コンソールの[エクスペリエンス/コアWebバイタル]セクションです。
Core Web Vitals Assessmentに合格するには、すべてのスコアが緑色である必要があります。
値を緑色にするには、テストでページのスコアが75％以上である必要があり、多くのユーザーが同等以上の値を体験する必要があります。 しきい値はスコアごとに異なり、FIDの場合は大幅に高くなります。
値をよりよく理解するには、スコアのタイトルをクリックします。
これは、特定のカテゴリのしきい値をより詳細に説明するブログ投稿にリンクしています。
データは28日間蓄積され、実際のユーザーが経験している可能性のあるものとは他に2つの大きな違いがあります。
- 実際のデバイスのパフォーマンスとインターネット速度はさまざまであるため、このテストでは、PageSpeedの仮想マシンの結果とは異なる結果が生成されます。
- 詳細な評価は、ページが開いている5秒間隔ごとに最悪の値を使用して、ページの存続期間全体にわたって計算されます。
サイトのユーザーの多くがインターネットアクセスの遅い地域に住んでいて、古いデバイスやパフォーマンスの低いデバイスを使用している場合、その違いは驚くべきものになる可能性があります。 これは、PageSpeedInsightsの改善に関する推奨事項の1つではありません。 一見、この問題に対処する方法は明らかではありませんが、後で説明しようとします。
PageSpeedInsightsの推奨事項を使用したスコアの改善
評価の主要部分は、ほとんどのユーザーがページを開く方法に基づいています。 すべてのユーザーが長期間Webサイトにアクセスするわけではなく、ほとんどのユーザーが時々Webサイトにアクセスするという事実にもかかわらず、すべてのユーザーが評価で考慮されるため、すべてのユーザーに影響を与えるページの読み込み速度を改善することから始めるのがよいでしょう。
推奨事項は、評価結果の下の「機会」セクションにあります。
各項目を拡張して、改善のための詳細な推奨事項を取得できます。 たくさんの情報がありますが、ここに最も基本的で重要なヒントがあります：
- サーバーの応答速度を向上させます。 たとえば、共有ホスティングを使用している場合は、プランをアップグレードするか、仮想プライベートサーバー（VPS）または専用サーバーに移行します。 また、すべてのホストが等しいわけではありません。 優れたハードウェアと稼働時間の保証を備えた信頼性の高いホスティングを選択してみてください。
- サイトを開くために必要なトラフィックの量を減らします。 これを実現するには、画像を最適化された画像に置き換えることができます。フォーマットの変更、解像度と圧縮の調整、必要に応じてアニメーション画像の静的画像への置き換えなどです。一般的なコンテンツ管理システムには、このプロセスを簡単にするプラグインがあります。
- より多くのデータをキャッシュします。 これを行う最も簡単な方法は、静的コンテンツ（画像、スタイル、スクリプト、変更されないページ）にCloudflareのようなコンテンツ配信ネットワーク（CDN）を使用することです。 キャッシュルールを構成して、パフォーマンスを最適化できます。
それでは、経験豊富なプログラマーが支援できる、より複雑な要素を見てみましょう。
ページの存続期間中にスコアをデバッグする方法
前述のように、Google Search Consoleは、過去28日間にChromiumベースのブラウザから取得した平均スコアを考慮し、ページの存続期間全体の値も含みます。
ページの存続期間中に何が起こるかを確認できないことが問題です。 PageSpeedの仮想マシンは、ページが読み込まれ、ユーザーがページを操作した後のページのパフォーマンスを考慮できません。つまり、サイト開発者は改善のための推奨事項にアクセスできません。
解決策は、サイトプロジェクトの開発者バージョンにGoogle Chrome Web Vitalsライブラリを含めて、ユーザーがページを操作しているときに何が起こっているかを確認することです。
このライブラリを含める方法に関するさまざまなオプションは、GitHubのREADME.mdファイルにあります。 最も簡単な方法は、次のスクリプトを追加することです。 メインテンプレートの<head>にページの有効期間にわたって値を表示するように調整されています：
<script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>累積レイアウトシフト（CLS）と最大コンテンツフルペイント（LCP）の計算は、Chrome、Opera、Brave（Brave Shieldsを無効にしてライブラリを機能させる）などのChromiumベースのブラウザ、およびFirefoxを除く他のほとんどの最新ブラウザでのみ使用できます。 、Mozillaエンジン、およびAppleのSafariブラウザに基づいています。
スクリプトを追加してページをリロードした後、ブラウザの開発ツールを開き、[コンソール]タブに切り替えます。
これらの値がモバイルバージョンでどのように計算されるかを確認するには、[デバイス]ツールバーを使用してモバイルデバイスに切り替えます。 アクセスするには、ブラウザの開発ツールの[デバイスツールバーの切り替え]ボタンをクリックします。
これは、問題を特定するのに役立ちます。 コンソールの行を展開すると、スコアの変更をトリガーしたものの詳細が表示されます。
ほとんどの場合、他のスコアの自動アドバイスは、それらを改善する方法についてのアイデアを得るのに十分です。 ただし、CLSは、ページにユーザーインタラクションが読み込まれた後に変更されるため、特に単一ページアプリケーションの場合、推奨事項がない場合があります。 ページが検索エンジンによって考慮された要因の評価に合格しなかった場合でも、[パフォーマンスの問題の診断]セクションに完全な100スコアが表示される場合があります。
CLSに苦労している私たちにとって、これは役に立ちます。 ログレコードを展開し、次にエントリ、特定のエントリ、ソース、特定のソースを展開し、 currentRectをpreviousRectと比較します。
何が変更されたかを確認できたので、それを修正するいくつかの方法を特定できます。
累積レイアウトシフトの削減
すべてのスコアの中で、CLSは把握するのが最も難しいですが、ユーザーエクスペリエンスにとって非常に重要です。 レイアウトシフトは、要素がドキュメントオブジェクトモデル（DOM）に追加されたとき、または既存の要素のサイズや位置が変更されたときに発生します。 その要素の下にある要素がシフトし、ユーザーは何が起こっているのかを制御できないように感じ、Webサイトを離れます。
単純なHTMLページでこれを処理するのは比較的簡単です。 画像の幅と高さの属性を設定して、画像の読み込み中に画像の下のテキストが移動しないようにします。 これで問題が解決する可能性があります。
ページが動的であり、ユーザーがアプリケーションのようにページを操作する場合は、CLSの問題に対処するために次の手順を検討してください。
- ユーザーがボタンまたはリンクをクリックしてから500ミリ秒後に、CLSをトリガーせずにコンテンツを表示するように、ページを設定します。
- 他のDOM要素をシフトさせないパラメーター（背景、色など）を変更します。
- 要素のサイズや位置を変更するときに、他の要素が移動しないことを確認してください。
より詳細な推奨事項は、Google DevelopersOptimizeCLSページで入手できます。
500ミリ秒でCLSを削減する方法
500ミリ秒のしきい値の使用方法を説明するために、画像のアップロードを含む例を使用します。
通常、ユーザーがファイルをアップロードすると、スクリプトはDOMに<img>要素を追加し、クライアントブラウザがサーバーから画像をダウンロードします。 サーバーから画像を取得するには500ミリ秒以上かかる場合があり、レイアウトがずれる可能性があります。
ただし、すでにクライアントコンピュータにあるため、画像をより高速に取得する方法があります。したがって、500ミリ秒の期限が切れる前に<img>要素を作成します。
これは、ほとんどの最新のブラウザーで機能するライブラリーのない純粋なECMAScriptの普遍的な例です。
<!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>前に見たように、これらの種類の問題を修正するには、精神的な敏捷性が必要になる場合があります。 モバイルデバイス、特に安価なデバイス、および低速のモバイルインターネットでは、90年代のパフォーマンス最適化の技術が役立ち、昔ながらのWebプログラミングアプローチが私たちの技術を刺激する可能性があります。 最新のブラウザデバッグツールがそれを助けます。
Google検索コンソールを更新します
問題を見つけて排除した後、Googleの検索エンジンが変更を登録するのに時間がかかる場合があります。 結果をもう少し速く更新するには、問題が修正されたことをGoogle検索コンソールに通知します。
左上隅の[検索]プロパティボックスを使用して、作業中のページを選択します。 次に、左側のハンバーガーメニューでCoreWebVitalsに移動します。
モバイルまたはデスクトップレポートの右上にある[レポートを開く]ボタンをクリックします。 （両方で問題が発生した場合は、後で2番目のレポートに対して同じアクションを繰り返すことを忘れないでください。）
次に、グラフの下の[詳細]セクションに移動し、検証に失敗したという警告のある行をクリックします。
次に、この問題の[詳細を表示]ボタンをクリックします。
最後に、[新しい検証の開始]をクリックします。
すぐに結果が出るとは思わないでください。 検証には最大28日かかる場合があります。
最適化は継続的な闘争です
SEO最適化は継続的なプロセスであり、パフォーマンスの最適化についても同じことが言えます。 オーディエンスが増えると、サーバーはより多くの要求を受け取り、応答が遅くなります。 需要の増加は通常、サイトに新しい機能が追加されることを意味し、パフォーマンスに影響を与える可能性があります。
パフォーマンス最適化のコスト/メリットの側面に関しては、適切なバランスを取る必要があります。 開発者は、常にすべてのサイトで最高の価値を達成する必要はありません。 最も重大なパフォーマンスの問題の原因に集中します。 より速く、より少ない労力で結果を得ることができます。 大企業は多くのリソースを投資し、すべてのスコアを達成する余裕がありますが、これは中小企業には当てはまりません。 実際には、中小企業は、Amazonのような業界の大物ではなく、競合他社のパフォーマンスに匹敵するか、それを超える必要がある可能性が最も高いです。
ビジネスオーナーは、サイトの最適化が重要である理由、作業のどの側面が最も重要であるか、そしてそれを行うために雇う人々にどのスキルを探すべきかを理解する必要があります。 開発者は、常にパフォーマンスを念頭に置いて、クライアントがエンドユーザーにとって速いと感じるだけでなく、PageSpeedInsightsでも高いスコアを獲得できるサイトを作成できるようにする必要があります。