Google PageSpeed Insights:定義、ページ速度を改善するための開発者インサイトとより良い結果を得るためのテストサイトの読み込み時間

公開: 2021-06-25

あなたのビジネスのために成功するウェブサイトを作成することは、デザインに対する鋭い目以上のものを必要とします。 ページに必要な視覚的要素や機能の作成に数え切れないほどの時間を費やしても、それがうまく機能するとは限りません。 少なくとも技術的な観点からではありません。 したがって、外観だけに焦点を合わせるのではなく、サイトが十分に高速であることを確認する必要もあります。 そして、これを行うための最良の方法の1つは、Google PageSpeedInsightsを介してサイトを実行することです。 幸い、Fannitの私たちのチームはこのツールの豊富な経験を持っているので、あなたが知る必要のあるすべてを学ぶのを手伝うことができます。

すべての業界とオーディエンスが異なるという事実にもかかわらず、高速なWebサイトを持つことは、ビジネスの成功にとって非常に重要です。 サイトの速度が十分でない場合、ユーザーはページが読み込まれるのを待つのではなく、単に[戻る]ボタンを押して次のオプションに移動します。 とはいえ、比較的単純なサイトであっても、サイトがすばやく読み込まれるようにするのは簡単な作業ではありません。

大規模なコングロマリットから地元企業まで、企業のWebサイトを遅くしている原因を正確に診断することは通常困難です。 大きすぎる画像、乱雑なコード、またはページの残りの部分の速度を低下させるページ要素である可能性があります。 したがって、Googleや他の検索エンジンがウェブページの速度が遅すぎることに気付く前に、これらの問題を迅速に診断して改善する必要があります。

良いニュースは、PageSpeed Insightsがサイトをテストし、潜在的な顧客の速度要求を満たしていることを確認するのに役立つことです。 このツールはGoogleによって開発され、ウェブサイトの速度を示す100点満点のスコアを提供します。

また、一般的な経験則として、サイトが高速であるほど、ページのバウンス率は低くなります。

  • さらに役立つ読み物: https //www.fannit.com/blog/bounce-rate/

ただし、Googleがこの優れたツールを無料で提供している場合でも、読み込み速度を向上させたい場合、特にページの技術的な部分を理解していない場合、PageSpeedInsightsを理解するのは難しい場合があります。 この記事では、すばやく読み込まれるWebページを用意することの重要性について説明し、Google PageSpeed Insightsを使用する利点について説明し、ページ速度を向上させるためのヒントを提供します。

ページの内容

グーグルページスピードの洞察 より良い結果を得るためにサイトの読み込み時間に焦点を当てる

ページの読み込み速度を気にする必要があるのはなぜですか? 真実はあなたのウェブページの読み込み速度がグーグルのパフォーマンスの観点から最も重要な要素の一つであるということです。

消費者はあなたのウェブサイトが5秒以内に読み込まれることを期待しており、それより長くかかると大多数の人があなたのサイトを離れます。

簡単に言えば、遅いWebページは、潜在的な顧客を撃退する悪いユーザーエクスペリエンスを提供します。

Googleに美しく機能的なウェブページを用意することは不可欠ですが、ページへのトラフィックを増やす必要もあります。

あなたの潜在的な顧客がそれを見たことがなければ、あなたのコンテンツがどれほど優れているかは問題ではありません。

したがって、数秒で読み込まれ、マーケティングメッセージを配信するのに十分な時間ユーザーのエンゲージメントを維持するWebサイトが必要です。

とは言うものの、Webサイトの高速化は必ずしも簡単な作業ではありません。特に、Webページに適切な構造がすでに整っている場合はなおさらです。

完璧ではありませんが、Googleページの速度スコアを使用すると、ページの速度を確認できます。 さまざまな角度からサイトの速度を測定します。

したがって、何をすべきかについて正確な指示が得られなくても、データを分析して、改善の可能性のある領域を見つけることができます。

Google PageSpeed Insightsとは何ですか?

Google PageSpeed Insightsは、ウェブサイトの速度テストを実行し、読み込み時間の観点からサイトのパフォーマンスを確認できるツールです。

Google Developers PageSpeedInsightsツールと呼ばれることもあります。 この無料のGoogleツールは、ページの読み込みにかかる秒数やその他の生データなどの情報を提供します。

さらに、このツールは、ページの速度に基づいた評点も提供し、100スコアが最高のマークになります。

また、最初の入力遅延や累積レイアウトシフトなど、ページ速度に影響を与える小さな技術要素の評価を確認することもできます。

2018年以来、Google PageSpeed Insightsは、検索大手が所有するLighthouseを利用しています。

Lighthouseは、ウェブマスターやビジネスオーナーが、アクセシビリティ、パフォーマンス、革新的な機能など、あらゆる面でウェブサイトを改善できるように設計されたツールです。

Google Lighthouseでウェブサイト全体の評価を確認すると、アクセシビリティとSEOスコアも確認できます。

また、ビジネスページのパフォーマンスを向上させる一連のベストプラクティスにもアクセスできます。

Google PageSpeed Insightsが重要なのはなぜですか?

サイトの読み込み時間がユーザーエクスペリエンスに影響し、したがってSEOに影響することはわかっています。

これは、トップの座に着く可能性を高めたい場合は、Webサイトでページ速度分析を実行する必要があることを意味します。

ただし、Googleの検索結果のトップ10にある他のすべてのサイトよりも速くはないにしても、少なくとも同じくらい速いことを確認する必要があります。

大多数のユーザーは、Google検索結果の最初のページを見渡すことはありません。

あなたのサイトが最速のページに含まれていない場合、検索エンジンからのトラフィックをあまり促進しない可能性が高いです。 したがって、多くの潜在的な顧客を引き付け、連絡先データを残すように説得するサイトが必要な場合は、ページが非常に迅速に読み込まれるようにする必要があります。

Googleの調査によると、サイトがコンテンツを読み込むのに時間がかかるほど、バウンス率が低くなる可能性が高くなります。

簡単に言うと、バウンス率は、コンテンツを操作せずにサイトを離れるユーザーの割合を表します。 バウンス率が高いサイトは、Googleから見た場合、品質の評判が低くなる傾向があり、その結果、SEOランクが低くなります。

この数はオーディエンスセグメントごとにわずかに異なる場合がありますが、目標はページの読み込み時間を3秒以下にすることです。

サイトが3秒以内に読み込まれない場合、生成するトラフィックのほとんどを失うリスクが高まります。

Google PageSpeed Insightsは、読み込み時間が3秒未満であることを確認し、サイトが遅すぎる場合に何を改善するかについてのアイデアを提供するのに役立ちます。

  • さらに役立つ読み物: https //www.fannit.com/blog/web-crawling/

モバイルWebサイトとデスクトップWebサイトの診断

そのため、Googleのサイトが遅いと、バウンス率が高くなり、生成されるコンバージョン数が大幅に減少します。

ただし、最初のステップは、サイトのコード、画像、その他の要素によって実際に読み込み時間が長くなる可能性があることを理解することです。

ページ速度が最適でない理由を推測する代わりに、すべての潜在的な変数をテストし、可能な限り改善する必要があります。

レスポンシブテーマを使用している場合でも、モバイルサイトとデスクトップサイトの速度を低下させる要素は異なる可能性があるため、これらの両方を個別に分析する必要があります。

Google PageSpeed Insightsは、モバイルとデスクトップのWebサイトを診断できるため、両方のデバイスのユーザーエクスペリエンスに影響を与える速度インデックスやその他の多くの指標を評価できます。

モバイルサイトを診断するには、Google PageSpeed Insightsのホームページにアクセスし、URLを入力して、[分析]をクリックするだけです。

Googleはサイトをすばやくテストし、サイトのパフォーマンスに基づいてさまざまな統計情報を提供します。

緑でリストされている変数は適切に最適化されており、オレンジはそれらを改善できることを意味し、赤は問題をすぐに処理する必要があることを示します。

一般的な経験則として、赤で表示される変数を改善すると、サイトのパフォーマンスにより大きな影響があります。

モバイルサイトに関しては、Googleが開発した追加のツールがいくつかあり、診断の実行にも使用できます。たとえば、マイサイトのテストなどです。

ただし、PageSpeed Insightsは、他の選択肢と比較して依然として豊富な量のデータを提供し、デスクトップと同時にモバイル分析を実行するため、それを利用すべきでない理由はありません。

PageSpeedスコアを改善するためのヒント

このセクションでは、ページ速度を向上させるためのヒントについて説明します。 ただし、これらの手順を実行する前に、Google PageSpeedInsightsでサイト速度テストを実行して得られるスコアを理解することが重要です。

Google PageSpeed Insightsで100スコアを取得すると、サイトが可能な限り高速になりますが、ページの下部にある推奨事項により、何をする必要があるかをしっかりと把握できます。

多くの事業主は、100点を獲得することにリソースを集中していますが、実際には、必ずしも完全な点数を達成しなくても、会社の目標を達成することができます。

これが、経験豊富なマーケターのチームが、スコア自体ではなく、Google PageSpeedInsightsに表示される提案に細心の注意を払う理由の1つです。

ページ速度を上げることが最終的な目標であり、スコア自体の下に表示されるヒントに対処することは、このメトリックに直接影響します。

たとえば、ページが90年代の高いGoogle PageSpeed Insightsスコアを取得し、下部に緊急の提案がリストされておらず、すでに理想的なページの読み込み時間が設定されている場合は、マーケティングの他の領域にリソースを投資することをお勧めします。完璧なスコアを追いかけようとする代わりに。

上記のすべてを念頭に置いて、Google PageSpeedInsightsのスコアと全体的な読み込み時間を改善するのに役立ついくつかのヒントをまとめました。

画像圧縮

私たちのチームは、Google PageSpeedInsightsを使用して無数のテストを実施しました。

そして、私たちが気づいたことの1つは、大きな画像が読み込み時間が遅い最も一般的な理由の1つであるということです。

画像サイズを小さくすると、ページ速度と全体的なページ読み込み時間が指数関数的に増加することに実際に気づきました。

グラフィックの品質を損なうことなく画像サイズを最小化するために使用される最も一般的な方法の1つは、圧縮と呼ばれます。

一部の圧縮ツールでは画像サイズを最大50%縮小できるため、Googleでさまざまなオプションを調べて、高度な圧縮を提供するオプションを見つけてください。

WordPressベースのサイトを使用している企業の場合、手動圧縮の必要性を排除するために利用できる多くのプラグインがあります。

圧縮プラットフォームと同様に、さまざまな選択肢があるため、必要な機能を提供する代替手段を見つけてください。

たとえば、サイトギャラリーに大量の画像をアップロードする場合は、一括圧縮を可能にするプラグインを見つける必要があります。

ブラウザのキャッシュ

あなたはブラウザのキャッシュに精通しているかもしれません。 ただし、そうでない場合、この用語は、以前にロードされたオブジェクトに関する情報を「記憶」するプログラムの機能を表します。これにより、これらのオブジェクトに再度アクセスするたびに同じデータセットをリロードする必要がなくなります。

キャッシュは、Webページに適用される場合、ブラウザがロゴ、背景、フッターなどのサイトに関する情報を保存できるようにするプロセスです。

したがって、すべてのユーザーが1つの内部ページから次のページに移動するたびにこのデータを収集する代わりに、ブラウザーはサイトの要素を保存し、ページの読み込みにかかる時間を短縮します。

つまり、ユーザーは、同じサイトの新しいページが開かれるたびに、デバイスがすべてのWebサイト要素をロードするのを待つ必要はありません。

PageSpeedInsightsを使用してGoogleウェブサイトの速度テストを実施するたびに、ツールはサイトのさまざまなページにアクセスして、全体的な読み込み速度を決定します。

ブラウザのキャッシュを活用する方法を学ぶことで、スコアをできるだけ高くし、アクセスしてから3秒以内にページを読み込むことができます。

この機能はすべてのWebサイトに標準装備されているわけではないため、プラグインを見つけるか、ブラウザのキャッシュを活用するためにdeb開発スペシャリストと協力する必要があります。

HTML、CSS、およびJavaScriptの縮小

アクティブなWebサイトの大多数は、HTMLなどのさまざまなタイプのコードを採用しています。 ただし、このコードはさまざまな方法で記述できます。

一部のコードは、多くのスペースを占めるように記述されているため、Webサイトの速度が低下する可能性があります。 このような場合、読み込み時間を短縮するために、コードが占めるスペースの量を最小限に抑える方法を見つける必要があります。

HTMLの縮小化は、コードが占めるスペースの量を単純化および削減できるようにするプロセスです。

これは、ブラウザでのサイトのパフォーマンスを損なうことなく、不要なコードを削除し、問題を修正することで機能します。 たとえば、このプロセスには、フォーマットの変更、未使用のコードの削除、可能な場合は行の短縮、重複の排除などのアクションが含まれます。

ご想像のとおり、JavaScriptまたはHTMLを手動で縮小するのに時間がかかると、膨大な時間がかかる可能性がありますが、必ずしも費用対効果が高いとは限りません。

いつものように、プラグインを利用してコードを識別し、自動的に調整して、ブラウザーがアクセスしやすくすることができます。

縮小の概念は、HTMLだけに適用できるわけではありません。 実際のところ、JavaScript、CSS、およびサイトで使用するその他のタイプのコードにも使用できます。

機能の問題は読み込み時間に影響を与える可能性があるため、新しいGoogleサイトの速度を実行する前に、ページで必要なすべてのチェックを実行することを忘れないでください。

AMPの実装に取り​​組む

Accelerated Mobile Pages(AMP)は、Googleが開発したプロジェクトであり、ウェブマスターやビジネスオーナーがより高速なモバイルサイトを作成できるように設計されています。

米国ではデスクトップが依然として主要なトラフィックタイプですが、モバイルユーザーは現在、世界規模ですべてのインターネット訪問者の半分以上を占めています。

米国でも、消費者の大部分がデバイスを使用して製品やサービスを検索しています。

そのため、サイトをテストして、スマートフォンや同様のガジェットにもすばやく読み込まれることを確認する必要があります。

簡単に言うと、AMPテクノロジーはサイトから不要なコードを取り除き、読み込みが高速な簡素化されたオープンソースのモバイルバージョンを作成します。

これだけでなく、ページの重みが減ったことで、Webサイトのユーザーのエクスペリエンスがより合理化されます。

AMPを適切に実装し、通常のサイトを改善した後、Googleページの速度テストでデスクトップとモバイルの両方でより良い結果が得られるはずです。

このテクノロジーの実装はGoogleからの主なモバイル推奨事項の1つですが、AMPはページのパフォーマンスが向上することを保証するものではないことに注意してください。

調整を行って最高のものを期待する代わりに、ページの太さだけでなく、読み込み時間に影響を与える他のすべての要素を制御する必要があります。

  • さらに役立つ読み物: https //www.fannit.com/blog/google-index/

レンダリングブロックツールを排除する

Googleページの読み込み速度の洞察の結果を改善すると、読み込み時間が短縮され、ウェブサイトのユーザーエクスペリエンスが向上する可能性があります。

しかし、多くのビジネスページの所有者は、ページ上のリソースの一部が実際に読み込み時間を妨げる可能性があることに気づいていません。

たとえば、パフォーマンスを向上させたり、追加の分析機能を許可したりすることになっているプラ​​グインはたくさんありますが、実際には、重要な要素がすぐに読み込まれないようにブロックしてしまいます。

多くのレンダリングブロックリソースは、この機能を実行するように設計されていないことに注意してください。 代わりに、これらのスクリプトとプログラムはさまざまなタスクを完了する責任があります。

問題は、ブラウザがWebサイトの最初のペイントにアクセスする前に、これらのスクリプトをロードする必要がある場合があることです。

スクリプトがサイトの最初のペイントを時間内に送信するのに十分な速度でロードされない場合、スクリプトはレンダリングブロックツールのカテゴリに分類されます。

Google PageSpeed Insightsは、レンダリングブロックツールを使用するとWebサイトの速度が低下することを通知します。

これらの大部分はCSSまたはJavaScriptスクリプトであるため、サイトの潜在的なレンダリングブロックツールを削除する場合は、いくつかの選択肢があることを忘れないでください。

たとえば、CSSやJavaScriptが大量にない場合は、これらをHTMLファイルに組み込むことができます。 これは手動で行うことも、次のようなプラグインを使用して行うこともできます。ただし、この戦略は比較的小さなWebサイトでのみ機能することに注意してください。

このオプションを大規模なサイトに適用すると、実際にはWebパフォーマンスが低下し、ユーザーエクスペリエンスが低下し、ページの読み込み時間が長くなる可能性があります。

潜在的な問題を回避するために、JavaScriptを延期することをお勧めします。

この設定により、HTMLの分析中にWebサイトがJavaScriptをロードできるようになりますが、スクリプトは解析が完了した後にのみ実行されます。

または、Google PageSpeed Insightsを理解し、それがユーザーエクスペリエンスにどのように影響するかを理解し、JavaScriptとCSSを操作する機能を備えたマーケティング代理店と連携することもできます。

グーグルページスピードの洞察 サイトの重要なリクエストのチェーンを解除する

重要なリクエストを連鎖させることは、Web開発者の間で一般的な方法であり、基本的にサイトを表示できるようにする重要なレンダリングパスの一部です。

重要なレンダリングパスの構造により、JavaScriptやCSSスクリプトなどの要素は、Webサイトのコンテンツが実際に表示される前に完全にロードする必要があります。

PageSpeed Insightsでのパフォーマンスを向上させるために、Googleは、ウェブマスターがウェブサイトの重要なリクエストのチェーンを解除することをお勧めします。

PageSpeedスコアに加えて、Google PageSpeed Insightsには、分析しているページの重要なリクエストも表示されることに注意してください。

ここで、Googleのページ速度測定ツールは、各リクエストのサイズ/読み込み時間を提供し、パフォーマンスの低いユーザーを排除するのに役立ちます。

ページの所有者は、必須ではない重要なリクエストを削除する必要がありますが、削除するスクリプトがページのパフォーマンスに影響を与えないようにする必要があります。

前述したように、CSSとJavaScriptを縮小したり、スクリプトの読み込み順序を変更して読み込み時間を改善したりすることもできます。

転送サイズとリクエスト数の削減

ウェブサイト全体を1つにまとめるのは理想的ではありませんが、ブラウザがページを読み込むために必要なリクエストが多いほど、時間がかかることを理解することが重要です。

したがって、ロードする必要のあるファイルをできるだけ小さくしながら、Webサイトのロードに必要なリクエストの数を減らす必要があります。

リクエスト数が多い場合やファイルサイズが大きい場合でも、Google PageSpeedInsightsでの通知が失敗することはありません。

代わりに、PageSpeed Insightsは、行われたリクエストの詳細なリストとファイルの大きさを表示するため、特定のサイトのこれらのメトリックの改善に取り組むことができます。

すべてのウェブサイトが異なるため、理想的なInsights GooglePageSpeedリクエスト数または転送サイズの目標はありません。

他の場所を探すのではなく、Webサイトのパフォーマンスを注意深く監視し、作業の目標を設定し、これらの目標を達成するのに役立つ調整を行う必要があります。

未使用のCSSを排除する

あなたの潜在的な顧客はあなたのウェブサイトを貴重な情報の源であり、購入を完了する方法やあなたのビジネスとの他の相互作用として見ています。

このため、オンラインストアフロントのようにWebサイトを確認する必要があります。

実店舗の場所と同様に、潜在的な顧客は、デジタル資産の品質を、サービスと全体としての成功を反映していると見なします。

ほとんどの場合、ビジネスオーナーは、未使用の商品を保管したり、店舗から削除したりすることを好みます。 同様に、サイトを確認して、未使用のCSSスクリプトを削除する必要があります。

CSSは、主にWebサイトに表示される要素を実装するために使用される言語ですが、このタイプのコードでページをオーバーロードすると、パフォーマンスに悪影響を与える可能性があります。

他の改善領域と同様に、手動検索を実行し、未使用のCSSを追跡し、これらのコードを削除して、Google PageSpeedInsightsのパフォーマンスとスコア100を向上させることができます。

または、プロセスを自動化するChromeDevToolsやその他のプラットフォームを活用することもできます。

  • さらに役立つ読み物: https //www.fannit.com/blog/rank-higher-on-google/

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

ウェブサイトは、さまざまな複雑な要素で構成されています。

これらの要素の1つはメインスレッドとして知られています。これは、サイト上のコードを、顧客が操作できる視覚的なページに文字通り変換する重要なプロセスです。

簡単に言うと、この要素は、HTML、CSS、JavaScriptを含むすべての重要なスクリプトと、これらの言語内で発生するすべての対話を実行します。

ただし、メインスレッドがコードを処理している場合、ユーザーリクエストを処理することはできません。

これが、ユーザーがWebサイトの特定の要素をロードする前に操作を開始できない理由の1つです。

ただし、メインスレッドのプロセスに時間がかかりすぎると、ユーザーは[戻る]ボタンをクリックして検索を続行することになります。

幸いなことに、Google PageSpeed Insightsは、メインスレッドの作業を完了するのに4秒以上かかるページを検出して強調表示します。

スクリプトの縮小、未使用のコード(CSSだけでなく)の削除、キャッシュの実装など、メインスレッドの作業を改善するための主な方法の多くについては、ページの読み込み時間を短縮し、ユーザーからのフィードバックを改善する方法についてすでに説明しました。

JavaScriptのパフォーマンスを加速する

JavaScriptは、開発者がWebサイトに表示されるコンテンツとその表示方法を実質的に完全に制御できるため、最も人気のあるWebコーディング言語の1つです。

JavaScriptがメインスレッドプロセスの大部分を占めるのは当然のことです。 ただし、ページに多数のJavaScript要素があると、読み込み時間が短縮され、PageSpeedスコアが低下する可能性があります。

幸い、Google PageSpeed Insightsは、JavaScriptが原因で遅延が発生するたびに通知を表示し、これらの問題を修正する方法に関する推奨事項も提供します。

たとえば、JavaScriptの解析、コンパイル、実行にかかる時間を短縮したり、より小さなペイロードを配信してWebサイトを高速化したりできます。

PageSpeed InsightsアカウントのJavaScript警告は、Webサイトのページ速度を上げるだけで削除できることに注意してください。

つまり、Webサイトの速度を低下させているがビジネスにとっても重要なJavaScript要素がある場合は、JavaScriptを縮小したり、CSSを最適化したり、通知を削除するための代替手順を実行したりできます。

サーバーの応答時間の短縮

公式の指標ではありませんが、Webサイトのサーバー応答時間により、Webブラウザーから要求を受信して​​からサーバーが最初のバイトを送信するのにかかる時間を確認できます。 このメトリックは、サーバーの応答時間として表示されるのではなく、Google PageSpeed Insightsインターフェイスの最初のバイトまでの時間(TTFB)として表示されることに注意してください。

サーバーの応答時間は、サイトの合計読み込み時間と同じではないことを理解することが重要です。

ただし、最初のバイトまでの時間が速いWebサイトは、TTFBが不良なページよりも読み込み時間が速い傾向があるため、2つの間に直接的な相関関係があります。

Googleによると、サーバーの応答時間を短縮することは、ページ速度の指標を改善するための優れた方法です。

とはいえ、サイトに不要なサードパーティのスクリプトがあると、CSSやWebサイトの他の要素の速度が低下する可能性があることに注意してください。

サーバーの応答時間を改善するために実行できるその他のアクションには、速度/品質に重点を置いたWebホスティングの選択、重いテーマやプラグインの回避、可能な場合はサイトのコードの削減、コンテンツ配信ネットワークの活用などがあります。

さらに、DNSに対して別途料金を支払い、このプロバイダーが優れた結果の提供に集中していることを確認する必要があります。

画像のサイズを適切に設定する

デスクトップおよびモバイルWebサイトのすべての要素が、実装する画像を含め、ページ速度に影響を与えると考えて間違いありません。

折り畳みコンテンツの上または下にあるかどうかにかかわらず、画像がWebサイトに作成する抗力を減らすために、画像のサイズが適切であることを確認する必要があります。

画像のサイズが適切でない場合、WebサイトのCSSコードが開始され、適切に収まるようにコンテンツのサイズが調整されます。

ただし、この追加の手順により、メインスレッドプロセスが拡張される可能性があります。つまり、コンテンツの読み込みにさらに数秒かかる場合があります。 また、1つの追加プロセスで知覚されるパフォーマンスが変わらないように見えても、この同じプロセスがサイトのすべてのページで複数回実行されることを想像してみてください。

いつものように、画像の確認と監視のプロセス全体を手動で処理することを選択できますが、これには時間がかかる場合があります。

WordPressサイトをお持ちの場合は、プロセスの大部分を自動化するプラグインまたは同様のツールをいつでも利用できます。 サードパーティのソリューションを使用する場合は、信頼できるプロバイダーからのものであることを確認してください。

「怠惰な」画像の読み込み

「レイジー」画像の読み込みは、オフスクリーン画像の延期とも呼ばれ、パフォーマンスを高速化するために、視覚的な折り畳み下のコンテンツを読み込むプロセスです。 前に述べたように、サイトのコンテンツを表示する前に完了する必要のある重要なプロセスがたくさんあります。

また、これらのプロセスが早く終了するほど、コンテンツの表示も速くなります。

画像は通常、ウェブサイトが読み込まなければならない最も重い要素の1つであり、特にこれらが適切なサイズでない場合はそうです。 WordPressまたは同様のタイプのサイトをお持ちの場合は、レイジー画像の読み込み機能を利用して、読み込み時間を可能な限り短縮する必要があります。 カスタムサイトがある場合は、開発チームと協力する必要があるかもしれませんが、WordPressサイトを持っている企業では、この機能がいくつかの機能に組み込まれています。

サイトのページレベルで実装する必要がある場合に備えて、サードパーティのスクリプトまたは同様のツールを使用して、遅延画像の読み込みの機会を特定できることを忘れないでください。

遅延画像の読み込みやその他の調整の実装について質問がある場合は、デジタルマーケティングのチームとGoogleアナリティクスの専門家にご連絡ください。喜んでお手伝いいたします。

画像を効率的にエンコードする

Googleによると、画像を最適化して読み込みを高速化すると、読み込み時間が短縮される可能性があります。

これが、画像を圧縮する方法が最近非常に人気がある理由です。 簡単に言うと、画像圧縮を使用すると、ビジュアルの品質を損なうことなく、グラフィックファイルが占めるスペースの量を減らすことができます。

上記を念頭に置いて、最良の結果が必要な場合は、ファイルを適切に圧縮およびエンコードする必要があることに注意してください。

すべての圧縮ソフトウェアが同じであるとは限りません。信頼性の低いプロバイダーが提供するプラットフォームでは、理想的なパフォーマンスを実現できない場合があります。

したがって、画像をできるだけ小さくする必要があります。

画像を効率的にエンコードするには、正確なサイズの画像をアップロードし、ウェブサイト全体に遅延画像の読み込みを実装することから始める必要があります。

さらに、サイト上のすべての画像ファイルをWebPや同様のオプションなどの新しい形式に変更することを検討する必要があります。

さらに、アニメーションコンテンツにGIF形式を選択するなど、ファイルの種類ごとに正しい形式を使用する必要もあります。

次世代の画像フォーマットを採用する

前のポイントでこれについて簡単に触れましたが、サイトに次世代の画像形式を設定することの重要性を理解することが重要です。

ファイル形式は、画像の品質からその重み、したがって読み込み速度まで、ビジュアルファイルに関するすべてに影響します。

ほとんどの人はPNGのような従来の形式に精通していますが、より優れたパフォーマンスを提供する新しいファイルタイプがあります。

次世代の画像形式は、品質を損なうことなく優れた圧縮を提供すると同時に、読み込みを高速化するグラフィックファイルです。

これらの形式は、サイズが小さいため画像ファイルのモバイルデータの消費量が少ないため、モバイルユーザーにも大きなメリットをもたらします。

また、画像を手動で監視する必要はありません。 代わりに、ウェブサイトにある従来の画像ファイルの数を知りたい場合は、Google PageSpeedInsightsを利用できます。

執筆時点では、次世代の画像形式の3つの主要なタイプは、JPEG XR、JPEG 2000、およびWebPです。

JPEG XRは、HDRで撮影された写真のゴールデンスタンダードです。このフォーマットは、革新的なタイプの圧縮を使用しているためです。

JPEG 2000に関しては、これは元の画像形式の新しいバージョンであり、可視品質にほとんど影響を与えないロスレス圧縮をサポートしています。

最後に、WebPは可逆圧縮と非可逆圧縮の両方をサポートしており、この形式の画像は、対応するJPEGよりも最大30%小さくすることができます。

ビデオフォーマットを介してアニメーションコンテンツを実装する

モバイルデバイスの人気が高まり始めて以来、アニメーションコンテンツの開発と配布は、多くのビジネスオーナーにとって優先事項となっています。

今日、視聴者の関心を維持したいのであれば、サイトに動画や同様のコンテンツを掲載することはほぼ必須です。

ただし、GIFや同様のコンテンツ形式を使用すると簡単に配布できますが、これらの形式は通常、パフォーマンスの面で負担がかかります。

Google PageSpeed Insightsは、大きなGIFがサイトのパフォーマンスに影響を与えている場合はいつでも指摘します。

これだけでなく、プラットフォームでは、Webサイトのパフォーマンスを向上させるために、すべてのアニメーションコンテンツをMP4またはWebMファイル形式に変換することも提案されています。

この概念は、次世代の画像を使用することに似ており、同様の利点をもたらします。

Webサイトの所有者は、アニメーションコンテンツの形式を変更する前に、1つの主要な質問に答える必要があります。どのビデオタイプに切り替えるのでしょうか。 主な代替手段はMPEG4(MP4)とWebMです。

前者の方がブラウザの互換性は優れていますが、ファイルが少し大きくなります。後者の場合、最適な圧縮が提供されますが、ブラウザの互換性は制限されます。

最良の結果を得るための正確な公式はありませんので、あなたはあなたの独特の状況に基づいて選択をする必要があります。

読み込み中にテキストを表示できるようにする

多くのビジネスオーナーは、パフォーマンスに影響を与える可能性があることを知っているため、サイトでクリエイティブフォントを使用することを避けています。

つまり、サイトにクリエイティブなフォントや独自のフォントを配置すると、実際にはページの速度が低下し、使いやすさに悪影響を与える可能性があります。 ただし、読み込み中にテキストを表示できるようにすることで、WordPressのページ速度を向上させることができます。

ロード中の可視性を可能にするためにサードパーティのプラグインに依存する必要はありません。

代わりに、ほとんどのWordPressサイトで利用可能なフォント表示CSS機能を利用して、残りのコンテンツがまだ読み込まれている間にユーザーがテキストを表示できるようにすることができます。

読み込み中にテキストが表示されない場合は、ページの読み込みにさらに時間がかかり、知覚されるパフォーマンスと全体的なユーザーエクスペリエンスに影響を与える可能性があります。

テキスト圧縮

すべてのビジネスオーナーが、画像と同様に、ページに書き込まれた要素も圧縮できることを認識しているわけではありません。

テキスト圧縮は、ページが消費するデータの量を最小限に抑えるのに役立ちます。これは、GooglePageSpeedスコアの向上につながります。

実際のところ、一部のサーバーではテキスト圧縮がデフォルトで既にアクティブになっていますが、このオプションを確認して、サイトでもアクティブになっていることを確認する必要があります。

サーバーにテキスト圧縮が自動的に適用されていない場合は、WordPressプラグインまたは同様のソリューションを選択して、GooglePageSpeedの評価を向上させる必要があります。

WP Rocketは間違いなくトップオプションの1つですが、有料のソリューションであることを忘れないでください。

Instead of paying for this standalone tool, you should partner with an agency that has access to this tool and other solutions that help improve the perceived performance of your site.

Pre-Connection to Required Origins

Whether it's Google Analytics or a similar solution, there's a strong chance you have a tool in place that comes from a third-party provider.

In these cases, you need to ensure that your additional resources are not slowing down your page — even if these help you collect the name, email, and other details from each visitor.

Fortunately, WordPress page owners can rely on the pre-connect attribute to tell browsers immediately that there are scripts from third parties in the content.

This attribute allows your page to initiate pre-connections as quickly as possible in order to reduce or eliminate a drop in perceived performance.

Load Key Requests in Advanced

In simple terms, the pre-connection attribute allows you to make contact with important resources that are located off-page.

Similarly, you can help browsers load key internal requests in advance in order to reduce the amount of time it takes to load content. This can be achieved through the “preload” attribute that can be placed on the header of each page.

Likewise, you can choose a tool to help you make these improvements automatically.

The list of potential options includes WP Rocket, Pre* Party, and other tools. If not, you can manually add link tags onto your header in order to specify which resources should be loaded first.

Don't Redirect a Page More Than Once

Redirects are a common technique employed by website owners that have revamped or completely removed old pages from their sites.

But, in case you're not aware, having redirects on your page will automatically increase its loading time.

Therefore, you should carefully choose the URL for each page and only use redirects when you have no other alternative.

Additionally, you should avoid using more than one redirect per page.

In other words, you should not send a user to two redirects in a row because this will damage the user experience and likely result in a missed opportunity.

  • さらに役立つ読み物: https //www.fannit.com/blog/show-up-first-page-google-search/

Lower the Effects of Third-Party Code

It's true that there are third party scripts that improve the performance of your page.

That said, there are also countless pieces of code that actually do more harm than good, so you need to avoid implementing any tool that may increase your Google PageSpeed score or conversion rate.

In addition to the above, you should ensure that the scripts on your page have as little impact on loading time as possible.

If you want to reduce the chances of experiencing page delays due to the third party code on your site, you can host these scripts on your own servers and defer the loading of JavaScript.

Reduce Mobile Payload Sizes

Whether you're using WordPress or a custom website, you should ensure that mobile loading sizes are as small as possible.

Mobile traffic is already the most common type of traffic generated online and many of the most popular platforms are built on WordPress. Unfortunately, this doesn't ensure that the mobile payload is small, which can increase loading time and affect conversion rate.

Not only does Google PageSpeed Insights tell you when you have a large mobile payload, but it also provides tips like reducing the number of posts displayed on one single page.

Other common tips include breaching up a long blog into several posts to defer comments after the rest of the content has been loaded.

Observe Timing Marks and Measures (For User Timing API)

There are many reasons why you may want to have a time stamp on each interaction with your users.

These include analysis, planning, campaign development, and similar processes. But, not all business owners know how to use this data to develop better content or how to uncover it in the first place.

It takes time to figure out how to use the data collected through WordPress timestamps.

But, you can easily make this data available by installing the User Timing API onto your WordPress page. The API doesn't show a grade or rating, but rather the raw data that allows you to make decisions for your business.

Minimize Document Object Model (DOM) Size

The document object model (DOM) size refers to the process that allows browsers to transform HTML into visible elements.

In simple terms, the DOM relies on a tree structure that consists of multiple nodes, which, in turn, represent different elements.

As you can imagine, the larger the DOM, the longer it takes for your WordPress page to load.

Google PageSpeed Insights provides either a passing or failing grade for this area, but it doesn't provide any custom suggestions.

Instead, you should ensure that your page elements adhere to all DOM regulations, including common size requirements.

Ready to Learn More? 今すぐFannitに連絡する

Learning to understand Google PageSpeed Insights can unveil a huge amount of valuable information about your page and how to improve your conversion rate.

If you're looking for a knowledgeable digital marketing agency that understands Google webpage speed insights and how to interpret this data, contact Fannit today and our team of Google Analytics specialists will be glad to help.