スピードインデックス：それは何ですか＆それのためにあなたのウェブサイトを最適化する方法

公開: 2021-08-24

速度指数（SI）は、ページ速度を検討する際の興味深い指標です。これは絶対にページのパフォーマンスを示すものですが、First ContentfulPaintやLargestContentfulPaintなどの他のユーザー中心の指標とは完全に異なります。 SIは、サイトがスクロールしなければ見えない位置にどれだけ速く読み込まれるかを示します。言い換えると、ユーザーのビューポート内のすべてのコンテンツが完全に表示されている場合です。ページの読み込み時間を見ると、スピードインデックスに対してペナルティや報酬が与えられることはほとんどありません。それはそれを無視する理由ではありません。単一の指標として、他の複数の指標を網羅し、サイトの全体的な速度、効率、パフォーマンスをしっかりと把握できる数少ない指標の1つです。

私たちのYoutubeチャンネルを購読する

スピードインデックスとは何ですか？

PageSpeed InsightsのGoogleのバックボーンであるLighthouseは、サイトを評価するために複数のパフォーマンス指標を調べます。速度指数（SI）はその1つであり、レポートには、他のいくつかのメトリックのようにミリ秒ではなく秒単位で時間が表示されます。 Googleは、SIを「ページのコンテンツが目に見える形で入力される速さ」と定義しています。

かなり簡単ですよね？

Speed Indexは、バックエンドスクリプトやその他のペイントされていないロードを考慮していません。しかし、それらはそれに影響を及ぼします。 SIは、ユーザーがコンテンツを完全に表示するのにかかる時間の尺度にすぎません。それがキッカーです。 完全に。 LCPなどの他のメトリックは、コンテンツの大部分が表示されるときに測定されますが、Speed Indexは、実際に表示される必要のあるすべてのコンテンツを考慮します。

これは、全体的なページ速度の尺度ではありません。これは、ブラウザがすべての要素をレンダリングするときに考慮されます。パフォーマンスに影響を与える非表示のスクリプトと要素を含みます。ただし、ユーザーがページが完全に読み込まれたことをいつ認識できるかを正確に把握する必要がある場合は、SIが注目すべき指標です。 SIはユーザー中心であるため、サイト全体の状態を示す良い指標であると同時に、サイトのユーザーエクスペリエンス（UX）のベースラインでもあります。

スピードインデックスの測定方法

ほとんどのサイトパフォーマンスメトリックと同様に、使用するトップツールの1つは、Google独自のPageSpeedInsightsです。このツールは、それが返す結果の中でも最も特別なものの1つです。最もよくまとめられたサイトでさえ、比較的重要です。 PageSpeed Insightsは、ほとんどの場合、過去28日間の収集の集計に基づいて、サイトのラボデータを提供します。ただし、Chromeを介してGoogleに情報を中継する訪問者が十分にいる場合は、レポートから実際のフィールドデータを取得することもできます。ただし、すべてのサイトがこれを取得できるわけではありません。

速度インデックスページ速度の洞察

ご覧のとおり、これらの指標の多くの速度は緑色で表示されています。これは、それらが「良好」であることを示しています。これは明らかにあなたがあなたのサイトを望む場所です。ただし、スピードインデックスは4.0秒でオレンジ色です。それは、ユーザーが折り目の上のすべてを見るのを待つのに長い時間です。

グッドスピードインデックススコアとは何ですか？

PageSpeed Insightsは、次のスコアを使用して、サイトの速度インデックスをランク付けし、それに応じて色分けします。

緑（良好）– 0〜3.4秒
オレンジ（中程度）– 3.4〜5.8秒
赤（遅い）–5.8秒以上

前に述べたように、PageSpeedInsightsはその測定において非常に重要です。オレンジまたは赤の場合は、GTmetrixやPingdomのSpeed Testなどのツールを使用して、リアルタイムデータが何を示しているかを確認することをお勧めします。全体的なパフォーマンスの全体像を把握するには、さまざまなタイミングで複数のツールを使用してサイトをテストするのが最善だと考えています。

スピードインデックススコアを最適化する方法

スピードインデックススコアを最適化するために、いくつかの手順を実行できます。あらゆる種類のページ速度の増加（または技術的には減少）のためにサイトを最適化しようとした場合は、何らかの形でSIスコアにも影響を与えている可能性があります。訪問者に可能な限り最高のエクスペリエンスを提供するために、ページができるだけ早く読み込まれるように、SI時間を具体的にターゲットにするいくつかの方法を紹介します。

レンダリングブロッキングリソースを削減する

具体的には、JavaScriptの実行時間を短縮することは、SpeedIndexスコアを上げるための最も重要な方法の1つです。レンダリングブロックリソースは、優先することでWebサイトの他の部分が読み込まれないようにするスクリプトとコードです。サイトが異なる要素を同時にロードする代わりに、一部の要素は、完了するまで他のすべての要素を一時停止します。

そしてそれはあなたのサイトのスピードインデックスを下げます。これを回避するために、表示される要素がDOMにペイントされるまで、ロードされるスクリプトとコードのビットをいくつでも延期することができます。 Chrome Dev Toolsを使用してサイトの読み込み時にサイトを確認でき、ツールが要素のレンダリングを停止している原因を示すため、原因の特定は実際には比較的簡単です。

さらに、WordPressユーザーは、W3 TotalCacheやWPRocketなどのキャッシュプラグイン（またはサイト最適化プラグイン）を使用してこれを処理できます。多くの場合、これらのプラグインには、レンダリングブロックリソースを延期するための簡単な切り替えがあります。

スピードインデックスの延期

テーマオプションを使用すると、レンダリングブロックのCSS延期と、jQueryスクリプトを切り替えることができるため、Diviユーザーもこのようなリソースをブロックするという大きな利点があります。さらに、テーマの重要なCSS機能は、サイトのコンテンツを遅らせ、他の方法よりもはるかに高速にロードする可能性のあるコードの大きなチャンクを分割します。これらのいくつかはトグルですが、Diviは自動的に他を有効にします。ほとんどの場合、Diviをインストールすると、SIスコアがすぐに向上します。

サイトのメインスレッドの作業を減らす

レンダリングブロックリソースと同様に、サーバーから多くの処理能力を消費するさまざまな要素をロードすることで、サイトのパフォーマンスをボトルネックにする可能性があります。それらを減らすと、サイトをより迅速にブラウザにプッシュするのに役立ちます。

これに対する最も簡単な解決策は、 JavaScriptの使用をやめることです。 GTmetrixはそれを最もよくします：

一般に、ページのJavaScriptが多いほど、解析/コンパイルプロセスが長くなります。その結果、ユーザーがコンテンツを表示してページを操作するまでの待ち時間が長くなります。

これは簡単ではないかもしれません。特定の方法で機能するようにサイトを設計しました。ただし、削除できる未使用のコードが存在する可能性があり、サイトにロードしているサードパーティのJavaScriptを最適化できる可能性があります。また、JavaScriptを縮小します。

JS監査に加えて、CSSとHTMLを縮小するようにしてください。これにより、メインスレッドの負担がさらに軽減されます。キャッシングおよび最適化プラグインにも、多くの場合、これらのオプションがあります。

テーマがCSSとJavaScriptを自動的に最小化して一口サイズのチャンクに分割し、スループットを向上させ、メインスレッドから大量のフォーカスを必要としないため、Diviユーザーもここに足を踏み入れました。

スピードインデックスよくある質問

スピードインデックスは、複雑な影響を与える単純な概念です。私たちはあなたができる限りあなたのウェブサイトを最適化するのを助けるためにSIについてのいくつかのよくある質問に答えたいと思います。

スピードインデックスは私のウェブサイトの全体的なパフォーマンスにどのように適合しますか？

単一の指標としての速度指数は、さまざまな分野でのWebサイトのパフォーマンスを非常によく示しています。完全に表示され、折りたたまれていないコンテンツが考慮されるため、ユーザーが知覚する負荷だけでなく、さまざまな領域でサイトが行っていることの大まかな見積もりのゲージとして使用できます。

それは実際にあなたのウェブサイトが何をしているかに関してあなたにそれ自身で多くの情報を与えません。 GTmetrixが「ウェブサイト全体のパフォーマンスを評価するための有用な全体的なベンチマーク」と述べているように、これは包括的な指標と見なすことができます。

特にスピードインデックススコアに焦点を当てるべきですか？

おそらくそうではありません。

サイトのベンチマークは非常に便利ですが、First Contentful Paint（FCP）、Largest Contentful Paint（LCP）、Time to First Byte（TTFB）、First Input Delay（FID）など、他のより詳細な問題に焦点を当てることは非常に便利です。より重要。あなたはそれらを個別に改善するためにいくつものステップを踏むことができ、それはあなたのスピードインデックスを改善するでしょう。また、全体的なベンチマークとして使用すると、SIを通じて最適化がどの程度うまく機能しているかを確認できます。

結論

ページ速度の最適化は、ウェブサイトの所有者が戦う終わりのない戦いです。使いやすさ、経験、パフォーマンスのバランスをとる必要があり、そのバランスを見つけるのは難しい場合があります。テストが非常に多くの異なる要素で非常に多くの異なるスコアを返す場合、エネルギーとリソースをどこに置くかを知るのは難しい場合があります。 Speed Indexは、サイトのパフォーマンスの他のより具体的な部分を調整するときに、サイトのパフォーマンスを示す単一のメトリックとして、これに役立ちます。

あなたは何年にもわたってあなたのウェブサイトのスピードインデックスを最適化するために何をしましたか？

HappyDrawing /shutterstock.comによる記事特集画像