Webのパフォーマンスと速度：最高のテクニック
公開: 2021-08-30読み込み速度とWebパフォーマンスは、SEOとwebperfコミュニティ、さらにはEマーケティングとEコマースのすべての人の口にあります。
Webパフォーマンスのコンサルタント兼リファレンスであるAndyDaviesは、次のことを思い出させてくれます。
「コンテキストはエクスペリエンスに影響を与えます。
経験は行動に影響を与えます、
行動はビジネスの収益に影響を与えます。」
したがって、収益、SEO、またはその両方を増やしようとしているかどうかにかかわらず、ユーザーエクスペリエンスの品質には高速ページが不可欠であることを理解する必要があります。 速度は、ページエクスペリエンスの更新以来速度を考慮しているGoogleに適切な信号を送信するのにも役立ちます。
ご存知のように、サイトは検索エンジンの期待に応える前に、ユーザーの期待に応えなければなりません。 したがって、表示速度と双方向性は、主にエンゲージメントとコンバージョンを促進するために、高品質のユーザーエクスペリエンスの前提条件の一部です。 たとえば、Googleの調査によると、インターネットユーザーの77％は、購入を迅速に完了することができるサイトまたはアプリケーションで注文する傾向が強いことに注意してください。
しかし、スムーズなブラウジング体験と本当のスピード感を提供するために、訪問者に最も目に見える影響を与えるテクニックはどれですか？
表示速度と双方向性を向上させるために、最適化レバーごとに整理されたチェックリストを次に示します。
サイトの表示速度を最適化する
ページが軽いほど、表示に必要な時間が短くなります。
リソースの最適化に加えて、ページを構成するさまざまな要素の表示速度とサイズを設定して、スピード感と使いやすさを向上させることができます。 ここにいくつかの重要なテクニックがあります：
- 画像を最も効率的な形式に圧縮する
新世代のWebP（Googleが推奨）およびAVIF（さらに優れた結果を提供する）形式を使用すると、最適な視覚品質を維持しながら、画像の重みをJPEGと比較して最大50％削減できます。 画像の重みがページの重みの約50％に相当することを知っているので、ページを高速化するために不可欠な手段です。 - メディアと画像の表示をさまざまな画面に適応させる
ユーザーがモバイルからサイトにアクセスしたか、コンピューターからサイトにアクセスしたかに応じて、メディアと画像のサイズを変更して定義します。 - ページリソースの重みを減らす
コードを最適化します。HTML、JS、CSSファイルの縮小（不要な文字の削除）、リソース圧縮（GzipおよびBrotli形式）、場合によっては連結は、すべてページの重みを減らして高速化するための優れた方法です。ブラウザでの表示。 - 遅延読み込み
この手法は、ページ全体をロードするのではなく、画面に表示されているものだけをロードすることで構成されます。 言い換えれば、ブラウザは、訪問者が画面に表示する必要があるものに関連して厳密に必要な作業のみを提供します。 - フォントを最適化する
フォントのフォーマットを最適化することができ（たとえば、ファイルサイズを30〜50％節約するWOFF2）、フォントがブラウザによってまだロードされていない場合でもテキストを表示することを選択して、レンダリングを高速化できます。 - ブロッキングリソースを排除し、非同期でロードします
ページのレンダリングをブロックしないでください。特にCSS（重要なCSS）、JS（非同期および延期）、フォント（display：swap）の場合は、リソースを非同期で読み込むことをお勧めします。
もちろん、ページの読み込みの開始時にいくつかのリソースが不可欠であるために選択の余地がない場合、これらのリソースは可能な限り軽量である必要があります。 - 適切なキャッシュ戦略を採用する
ユーザーがページをできるだけ速く表示できるようにするには、静的要素をキャッシュします。
これを行うには、動的コンテンツと静的コンテンツを事前に識別し、静的コンテンツをキャッシュするためのルールを定義する必要があります。どのくらいの期間、どのキャッシュ（ブラウザー、オリジン、またはCDN）にありますか。
[ケーススタディ]Googleのボットクロールの管理
ケーススタディを読む双方向性の向上：即座に応答するページ
ブラウザに要素が表示される速度に加えて、ユーザーに完全な満足を提供するには、対話する機能が不可欠です。
そうしないと、怒りのクリック、ページ上でマウスが必死に動く、ページが機能していることを確認するためのランダムなスクロールなどの動作につながるフラストレーションにさらされます。
最悪の場合、訪問者は前のページに戻ったり、サイトを離れてGoogleで新しい検索を行ったり、競合他社にアクセスしたりします。
ネガティブな体験の場合、インターネットユーザーの43％が次の購入のために競合他社のサイトにアクセスすることを忘れないでください。 したがって、あなたは自分自身にあなたの訪問者を引き付けるだけでなく維持する手段を与えなければなりません。
ほとんどの場合、悪い対話性の原因となるのはサードパーティのスクリプトとJavascriptです。 実際、ブラウザがJavaScriptの取得、解析、実行でビジー状態である限り、ユーザーの操作に応答することはできません。
ここでも、コードとサードパーティを最適化し、訪問者が最適なエクスペリエンスを楽しめるようにするためのテクニックがあります。
- サードパーティの読み込みを遅らせることにより、サードパーティの影響を軽減します
優先度の高いコンテンツ要素がページに表示されたら、スクリプトの読み込みと実行を開始できます。 ただし、注意してください。JavaScriptの読み込みを延期しても、パフォーマンスの点でJavaScriptが無料になるわけではないことに注意してください。
ユーザーを安心させるために、主要な要素の表示後に一部の機能（チャット、ウィジェット、追跡など）の読み込みを延期することが問題になる場合がありますが、ブラウザーがコードを処理するために必要な時間をキャンセルすることはありません。時間内にシフトするだけです。 - JavaScriptの実行時間を短縮する
ブラウザに時間がかかるタスク（長いタスク）を分割し、ユーザーの操作に応じて短い処理を優先するようにします（たとえば、スクロールなどの特定のイベントを積極的にリッスンしないようにします。また、ブラウザが特定のJavaScript処理を実行するための自由時間）。 - メインスレッドの作業を減らします
ブラウザは、リクエストの数と交換のサイズを減らすことで、インタラクションにより速く応答できるようになります。
時間も節約：サイトの最適化手法を自動化
ユーザーエクスペリエンスの2つの非常に重要な側面、つまり表示速度と対話性について説明しました。 幸いなことに、このチェックリストで説明したすべての最適化を自動化できます。
また、これらの側面をそれぞれ評価できるGoogleのコアWeb VItalの2つにリンクしている可能性があります。それは、最大のコンテンツフルペイントと最初の入力遅延です。
もちろん、累積レイアウトシフトスコアに取り組むことで、最適なユーザーエクスペリエンスのためにページの視覚的な安定性を向上させることも検討する必要があります。
これらの3つのメトリック（LCP、CLS、合計ブロッキング時間、またはTBT、FIDに相当）が、PageSpeed Insightsによるスコアの70％を占めることを知っておく必要があります。
したがって、論理的には、ページを高速化し、これらのメトリックを最適化するために行うことは、パフォーマンススコアだけでなくユーザーにもプラスの影響を及ぼします。
つまり、SEOの場合と同じアプローチをUXに適用できます。つまり、高品質のコンテンツとエクスペリエンスがユーザーの満足度を保証し、Googleによるインデックス作成の向上に貢献します。
また、SEOの場合と同様に、webperfの最適化は長期にわたって維持する必要があります。
技術と測定基準は急速に進化するため、これには時間と専門知識が必要です。 さらに、大規模なチームであっても、技術リソースには、サイトの速度を効果的に維持するための時間や知識が常にあるとは限りません。 そして、スフレのように落ちるコマンド操作のためにリソースとエネルギーを配備することは、非常に苛立たしく、さらには落胆させます。
したがって、メンテナンスに時間を浪費し、サイトの進化ごとに副作用を恐れ、プラグインを過負荷にするリスクを冒して増やすよりも、単一のツールですべてのフロントエンド最適化手法の適用を自動化する方がよいでしょう。
ほとんどの場合、トラフィックの多いeコマースサイトの場合、webperf最適化ソリューションのROIは簡単に測定できることを知っておく必要があります。
実際、Googleは、-0.1秒の読み込み時間で+ 8％のコンバージョンが発生する可能性があると推定しています。これは、フロントエンド最適化ソリューションで非常に簡単に実現できます。
Fasterizeでは、多くの場合、1ポイント未満のコンバージョン率の増加でも、SaaSソリューションのROIを確保するのに十分であることがわかりました。 技術チームによって節約された時間は言うまでもありません。
ビジネスは戦争の筋であり、あなたは自分で計算をすることができ、そしてそれは簡単です！ これにより、パフォーマンスの最適化を自動化することの関心を理解し、社内チームを説得して関与させることができます。
すべての面で時間を節約してください！