ウェブサイトのパフォーマンスと健全性の監視: ヒントとベスト プラクティス

公開: 2022-11-01

ウェブサイトや e コマース プロジェクトをセットアップして実行することは素晴らしいことですが、サイトが稼働してからでも作業は終わりではありません。

適切な状態とパフォーマンスの監視がなければ、Web サイトは結果に苦しむことになります。これは単に読み込み速度が遅いだけではありません。

世界中のすべての Web サイトが正常に機能しているという、架空の理想的なシナリオに注意を向けてみましょう。 ユーザーの満足度が急上昇するだけでなく、より良い環境にも貢献できることをご存知ですか?

パフォーマンスの低い Web サイトは、それを作成または使用するすべての人に影響を与えるだけでなく、より大きな二酸化炭素排出量も残します。

Website Carbon Calculator によると、ウェブサイトには二酸化炭素排出量があり、平均的なウェブサイト ページは 1 ビューあたり 0.5 グラムの二酸化炭素を排出しています。 それはちょうど中央値です。

汚染度の高いウェブサイトも考慮した平均値を見ると、その数値は最大で 0.9 グラムになります。

世界規模の問題は別として、不健全でパフォーマンスが不十分な Web サイトは、時間、お金、収益を犠牲にします。 Web サイトの健全性は私たち自身のものと似ています。無視するのは簡単で、改善するのは難しいのです。

処理時間を節約するために適切な監視を実施するには、Web サイトの正常性を構成する主なコンポーネントを認識する必要があります。

すばやく簡単な Web サイト ビルダーの出現により、誰でも Web サイトを作成できるようになりました。 サインアップし、ドメインを選択し、テンプレートを選択するだけで、出来上がりです! 数秒でウェブサイトを作成できます。

しかし、多くの Web サイト所有者は、Web サイトの作成は最初のステップに過ぎないという事実を否定しています。 適切なパフォーマンスの維持とヘルス モニタリングも重要です。

その上で、いくつかの重要なウェブサイトの健全性とパフォーマンスの指標を見てみましょう: それらが何であるか、それらを監視する方法、および改善を行う方法.

高いウェブサイトの健全性スコアを監視するための側面

コア Web バイタル

Core Web Vitals による高い Web サイト ヘルス スコア 著者からの画像、2022 年 10 月

Google PageSpeed インサイト

パフォーマンス テストを実施する際に考慮すべき最初の指標は、Core Web Vitals です。 これらのパフォーマンス インジケーターは、速度、安定性、応答性を示し、Web サイトのユーザー エクスペリエンスの質を理解するのに役立ちます。

Core Web Vitals を追跡するツールはいくつかありますが、多くの Web サイト所有者はシンプルなツールである Google PageSpeed Insights に引き寄せられています。

ツールに URL を入力すると、Core Web Vitals テストに合格したかどうか、および注意する必要があるその他の側面を示すレポートが表示されます。 表示される 3 つの主要なメトリックは次のとおりです。

最大コンテンツ ペイント (LCP)

2.5 秒以内のスコアを目指します。

スコアが 2.5 秒を超える場合、これは次のことを示している可能性があります: サーバーが遅れている、リソースの読み込み時間が標準に達していない、レンダリングをブロックする JavaScript と CSS の数が多い、またはクライアント側でレンダリングが遅い。

最初の入力遅延 (FID)

100 ミリ秒以下のスコアを目指します。

スコアがその時間を超える場合は、サードパーティ コードの影響を減らし、JavaScript の実行時間を減らし、メイン スレッドの作業を最小限に抑え、転送サイズを小さく保ち、リクエスト数を少なくする必要があります。

累積レイアウト シフト (CLS)

0.1 以下のスコアを目指します。

スコアがこれを超える場合は、ビジュアルおよびビデオ コンテンツにサイズ属性を含める (または CSS アスペクト比ボックスでスペースを確保する) ことで、ランダムなレイアウト シフトを回避できます。 コンテンツが重ならないようにし、トランジションをアニメーション化するときは注意してください。

ページ速度ブロッカー

いくつかの要因がウェブサイトの読み込み速度に影響を与える可能性があります。 ただし、時間に余裕があり、最初に主な犯人に焦点を当てたい場合は、次の要因に細心の注意を払ってください。

  • 未使用の JavaScript および CSS コード。
  • JavaScript および CSS コードをブロックするレンダリング。
  • 縮小されていない JavaScript および CSS コード。
  • 画像ファイルのサイズが大きい (詳細は後述)。
  • リダイレクト チェーンが多すぎます。

JavaScript および CSS ファイルのロードを改善するために、それらをプリロードすることを検討してください。

もう 1 つのオプションは、アーリー ヒントを有効にすることです。これは、「サーバーの思考時間」を利用してダウンロードを開始する必要があるリソースを HTTP サーバーの応答でブラウザーに通知し、ページの読み込みを高速化します。

ウェブサイトをテストするには:

  1. https://pagespeed.web.dev/ に移動します。
  2. スキャンするページの URL を入力します。

最初にホームページを選択することをお勧めします。

もう 1 つの便利なツールは WebPageTest.org です。これは、Web サイトのパフォーマンスと健全性を大幅に改善するのに役立つ Core Web Vitals やその他の指標も表示します。 また、それは無料です！

サイトに表示される検索ボックスにページの URL を貼り付けるだけで、デフォルトの場所から完全なテストが実行されます。

ユーザーとして登録し、場所のリストから選択して、さまざまな国、デバイス、ブラウザーから Web サイトをテストすることもできます。

WebPageTest は、4 つの主要なセクション (機会と実験、観測された指標、実際のユーザーの測定、および個々の実行) で構成されるパフォーマンスの概要を通じて、Web サイトのパフォーマンスがどこにあるのか、速度を低下させている可能性があるものを正確に示します。

観察された指標 著者からの画像、2022 年 10 月

UCRAFT では、特に SaaS 業界がすでに非常に競争力があります。

デザイン要素

デザイン要素 著者からのスクリーンショット、2022 年 10 月

Web サイトのパフォーマンスとヘルス モニタリングについて考えるとき、通常、これらの処理は技術チームに任せます。

しかし、あなたがどのようにウェブサイトをデザインしているか、どの要素を選択するかによってパフォーマンスが左右されるとしたらどうでしょうか?

そうです。設計チームを関与させる時が来ました。

画像の最適化

画像は素晴らしいものですが、適切なサイズにしないと Web サイトの速度が低下する可能性があります。 画像のサイズを必ず変更し、全体が表示されない場合は巨大なファイルをアップロードしないようにしてください。

同様に、重い JPEG や PNG ファイルを選択する代わりに、画像を圧縮し、WebP、JPEG 2000、JPEG XR などのさまざまなファイル タイプを試してください。

一度にすべての画像を読み込むのではなく、ユーザーが表示したときに画像が確実に読み込まれるように、ネイティブの遅延読み込みを実装することを検討してください。

Chrome、Safari、Firefox を含むほとんどすべてのブラウザーは、<img> または <iframe> で loading=”lazy” 属性をサポートしています。これにより、ユーザーが近くにスクロールしたときにそれらを読み込むようにブラウザーに指示します。

ページの LCP スコアが低下するため、スクロールせずに見える画像を遅延読み込みしないようにしてください。Google では、スクロールせずに見える画像に fetchpriority="high" 属性を使用して LCP を改善することを推奨しています。

その属性を使用する場合、画像をプリロードする必要はありません。 スクロールせずに見える範囲の画像にプリロードするか、「fetchpriority」属性を設定する必要があります。

また、「srcset」属性の応答性を利用して、画面サイズに基づいて適切なサイズの画像を読み込み、小さな画面に余分に大きな画像を読み込まないようにします。 これは、LCP スコアの改善に大きく役立ちます。

フォント

贅沢なカスタム フォントは、20/20 視力のないユーザーにとって読みにくいことがよくありますが、Web サイトの速度が大幅に低下する可能性もあります。

外部でホストされているフォントをより多くの Web セーフ フォントに切り替え、Google の CDN を通じてホストされている限り、Google フォントを試してみてください。

さらに、可変フォントを Web サイトの全体的な美学に組み込むことを検討してください。このフォント仕様により、フォント ファイルのサイズが大幅に削減される可能性があります。

フォントをプリロードしてください。

アニメーション/追加機能

言うまでもなく、アニメーション、ビデオ、特殊効果、スライダー、またはその他の凝った要素を使いすぎないでください。

あちこちにインタラクティブな要素を含めるのは良いことですが、あまりにも多くの動く「もの」で Web サイトが飽和状態になると、ユーザーとサーバーの両方がイライラする可能性があります。

合成されていないアニメーションは使用しないでください。ページの再描画が発生し、メイン スレッドの作業が増加します。また、Web ページが読み込まれたときに視覚的に不安定に見える場合があります。

モバイル最適化のための PWA ソリューション

完全にモバイル フレンドリーなルートに進み、モバイル サイトをプログレッシブ Web アプリ (PWA) に変えてみませんか?

PWA は Service Worker で構築されているため、キャッシュされたコンテンツをより高速に読み込みます。 それだけでなく、PWA はネイティブのモバイル アプリに似ているため、パフォーマンスと UX に優れています。

追加の技術的パフォーマンス指標

アップタイム

アップタイムは、ウェブサイトがどれだけうまく機能しているかを示します。

ウェブサイトが頻繁にクラッシュしたりダウンしたりすると、ユーザー エクスペリエンスや Google のランキングに悪影響を及ぼし、結果として収益にも悪影響を及ぼします。

可能であれば、99.999% のアップタイムを目指し、さまざまな場所から Web サイトをテストしてください。

稼働時間監視用ツール:

  • ステータスケーキ。
  • ピンダム。
  • アップタイムの向上。
  • アップタイムロボット。

データベースのパフォーマンス

基本を確認しても Web サイトの応答が遅い場合は、データベースのパフォーマンスが低いことが原因である可能性があります。

これは、クエリの応答時間を監視し、最も時間を費やしているデータベース クエリを特定することで確認できます。

それが終わったら、最適化を始めましょう！ Blackfire.io などのツールを使用すると、ボトルネックを簡単に特定し、正確なデータに基づいて解決策を見つけることができます。

Web サーバーのハードウェア

ディスク容量がログ ファイル、画像、ビデオ、およびデータベース エントリでいっぱいになると、Web サイトの動作が遅くなることがあります。 特に更新や設計変更を実装した後は、中央処理装置 (CPU) の負荷を定期的に監視してください。

New Relic などのツールは、効率的な監視とデバッグを通じてスタック全体を改善するのに役立ちます。

検索の可視性

上で説明した指標の多くは、すでに検索の可視性に大きな影響を与えています。

したがって、Google PageSpeed Insights を使用してウェブサイトのページを実行し、それらを最適化することは、SEO にとって重要なことでもあります。

また、Semrush や Sitechecker.pro、Screaming Frog、DeepCrawl、またはニーズに最適なその他のツールなどの Web サイト クローリング ツールを選択することもできます。

Web サイト クローラーは、次のようなあらゆる種類の問題を検出するのに役立ちます。

  • リンク切れ。
  • 壊れた画像。
  • コア Web 重要指標を監視します。
  • チェーンをリダイレクトします。
  • 構造化データ エラー。
  • 索引付けされたページはありません。
  • 見出しとメタディスクリプションがありません。
  • 混合コンテンツ。

次の点については、準備が整っていることを確認してください。

  • XML サイトマップ– サイトマップが正しくフォーマットされていることを確認し、更新が必要かどうかを確認し、Google Search Console 経由でサイトマップを再送信します。
  • robots.txt – Web ページ (HTML、PDF、または検索エンジンが読み取ることができるその他のメディア以外の形式) に robots.txt ファイルを使用して、クロール トラフィックをより適切に管理してください。 Google のクローラーからのリクエスト。

ウェブサイトのセキュリティとキャッシング

SSL証明書を取得してください！

健全なウェブサイトは安全なウェブサイトです。

Web サイトが完璧なタイミングで読み込まれ、100/100 のスコアが得られたとしても、https:// で始まらなければ、ユーザー (または検索エンジン) がサイトを信頼することはありません。

SSL 証明書は基本的に、暗号化された接続を構築するサーバー上のコードであり、ユーザー データの安全性を保証します。

SSL 証明書の取得は特に難しいプロセスではありませんが、手動で行うと時間がかかる場合があります。

ただし、BlueHost などの確立されたホスティング プロバイダーを使用している場合、多くの場合、プロバイダーはドメインに対して無料の SSL を発行できます。

CDN の使用を検討する

コンテンツ配信ネットワーク (CDN) は、高速インターネット コンテンツを配信するために連携して動作する分散サーバーです。

つまり、CDN は、地理的な場所に関係なく、コンテンツをユーザーの近くのサーバーに保持することで、Web サイトのパフォーマンスを高速化するツールです。 これはキャッシングとも呼ばれます。

グローバルなプレゼンスを持っている場合、CDN は必須です! ページの読み込み速度が向上し、帯域幅のコストが削減され、トラフィックが分散され (サイトがダウンする可能性が減少します)、DDoS 軽減などの機能によってセキュリティが強化されます。

業界のトッププレーヤーには、Cloudflare、Amazon Cloudfront、Google Cloud CDN が含まれます。 ただし、他にも多くのオプションがあるため、調査を行い、Web サイトとビジネス要件に最適な CDN を選択してください。

ウェブ アプリケーション ファイアウォールのセットアップ

Web アプリケーション ファイアウォール (WAF) は、疑わしい HTTP トラフィックを除外することで Web アプリケーションを保護します。 次のような攻撃からアプリケーションを防ぐことを目的としています。

  • クロスサイト偽造。
  • クロスサイトスクリプティング (XSS)。
  • ファイルの包含。
  • SQL インジェクション。

以下は、最も一般的で信頼できる Web アプリケーション ファイアウォールのリストです。

  • クラウドフレアWAF.
  • GoDaddy ファイアウォール。
  • マイクロソフトアズール。

または、WordPress を使用している場合は、次のようなプラグインのインストールを検討できます。

  • ワードフェンス。
  • スクリ。
  • オールインワン セキュリティ (AIOS)。

評決

おしまいです！ お分かりのように、ウェブサイトのパフォーマンスと健全性はさまざまな側面に依存します。

あなたのウェブサイトが遅れている場合、最初の論理的なステップは、Core Web Vitals をチェックして、改善できる点を確認することです。 また、他の技術指標を調べて改善することもできます。

SEO は Web サイトの健全性にも不可欠です。検索の可視性、リンク、潜在的なロード ブロッカーをチェックして、改善できる点を確認してください。

また、SSL 証明書とキャッシュについても忘れないでください。

特にあなたやあなたのデザイナーが重いデザイン要素を使用するのが好きな場合は、ウェブサイトのデザインも読み込み速度とパフォーマンスに影響を与える可能性があります。

画像を最適化し、重いフォントを避け、適度にアニメーションを使用することを忘れないでください。

その他のリソース:

  • Chrome UX レポートを使用してサイトのパフォーマンスを改善する方法
  • Google ディスプレイ ネットワークのパフォーマンスを大幅に向上させるための 6 つのヒント
  • 高度なテクニカル SEO: 完全ガイド

主な画像: JulsIst/Shutterstock