LighthouseとGTmetrixによる、読み込みの遅いウェブサイトと504エラー報告の区別ガイド

ウェブサイトを運営していく中で、ページへのアクセスが遅くなることはよくある問題です。ウェブマスターの中には、この問題に遭遇するとすぐにスローローディング実際、ページのスローダウンと504ゲートウェイタイムアウトエラーは2つの異なるものです。実際、ページのスローダウンと504エラーは、全く異なる解決策を持つ2つの異なる動作です。

本記事では、その違いを詳しく説明し、Google LighthouseとGTmetrixのツールを使って具体的な原因を特定し、ウェブサイトのレスポンス低下の根本原因を分析する方法を紹介します。

I. 504エラーとは？と低速アクセスの違い

504 ゲートウェイタイムアウト は、現在のサーバーがゲートウェイまたはプロキシとして動作しているときに、アップストリームサーバーから時間内に応答を取得できず、リクエストタイムアウトになったことを示す、サーバーから返されるステータスコードである。

このエラーは通常、以下のシナリオで発生する：

PHP バックエンドの過剰な実行時間
データベースのクエリが混雑したり、長時間応答しない。
サードパーティーインターフェースのブロック
時間制限のあるタスクやキュー・ジャム

の場合 504ブラウザのページがエラーを報告したり、真っ白になったりするのは、読み込みが遅いからではなく、リクエストが中断されたからである。これに対してページへのアクセスが遅くなるブラウザの読み込みが長くても、最終的には表示が完了するような、コンテンツの段階的な表示として示される。

この2つのタイプの問題は、プレゼンテーション・レベルでは混同しやすいが、処理方法はまったく異なる。この2つを見分ける能力は、その後のデバッグにおいて非常に重要である。

Lighthouseを使ってページ読み込みの問題を分析する

LighthouseはChromeに内蔵されたパフォーマンス診断ツールで、ページの読み込みパフォーマンス、フロントエンドのリソース処理、インタラクティブなレスポンスタイムをチェックします。

Chrome で任意のページを開き、F12 キーを押して開きます。開発者ツールを使用して、「Lighthouse」タブをクリックし、分析ディメンションを選択してテストを開始します。Lighthouseは、ロード速度、スクリプトの実行、イメージの最適化、構造的完全性などを網羅した詳細なレポートを生成します。

主な指標には、初回が含まれる。コンテンツマッピング(FCP）、最大コンテンツ描画（LCP）、総ブロッキング時間（TBT）、累積レイアウトオフセット(CLS).これらのメトリクスは、起動からページが完全にレンダリングされるまでの時間を反映し、ブロッキングポイントを特定し、読み込みが遅い根本原因を見つけます。

Lighthouseが正しく機能していない、または常に応答を待っている場合は、504などのサーバー側エラーの可能性を検討してください。

GTmetrixを使用してページ・レスポンスの詳細を分析する

GTmetrixは無料のオンライン・パフォーマンス分析ツールで、使いやすく包括的な情報を提供し、ウェブサイトの負荷順序やリクエストのボトルネックをさらに診断するのに適しています。

GTmetrixの公式サイトにアクセスし、テストしたいURLを入力すると、数分で完全なレポートが生成される。このツールは、パフォーマンス・スコアを提供するだけでなく、リソース負荷のウォーターフォール・ビューを表示するため、各リソースのパフォーマンスを視覚的に観察することができます。カスケーディングスタイルシートJS、画像ファイルのロード時間。

よくある質問は以下の通り：

画像が圧縮されていないため、読み込みが遅い
サードパーティのスクリプトは時間がかかりすぎる
サーバーの応答待ち時間が長い（TTFB時間が長い）

GTmetrixは、時間の経過とともにページの読み込みが遅くなるシナリオの分析に適しています。ページが最終的に正しく表示されるが遅い場合、それは504エラーというよりむしろフロントエンドのパフォーマンスの問題である可能性が高い。

IV.504エラーが発生したかどうかを判断する実践的な方法

ページが長い間応答しなかった直後に "504 Gateway Timeout "メッセージが表示された場合、または読み込み中にブラウザが接続を中断した場合、ほとんどのケースはバックエンドの問題に属します。この時、error.log、PHPの実行ログ、データベースのスロークエリログなどをチェックして、スクリプトやインターフェースの実行タイムアウトがあるかどうかを判断することができます。

また、最終的にページの読み込みに成功したものの、プロセスが遅い場合は、まずフロントエンドのリソースと読み込みプロセスのトラブルシューティングを行うことをお勧めします。LighthouseとGTmetrixの結果を使えば、スクリプトのブロックやキャッシュの無効化を突き止めることができます、DNS 遅延などの一般的な問題。

V. さらなる最適化のための提案

最適化のアプローチは問題の種類によって異なる：

ページの読み込みが遅い場合は、画像の圧縮、CSSやJSファイルのスリム化、キャッシュシステムの使用、そして以下のことを検討してください。コンテンツ・デリバリー・ネットワーク(CDN）などの方法でフロントエンドを最適化する。

サーバーが504エラーを返した場合、データベースのクエリー効率、インターフェイスの応答性、PHPスクリプトのランタイムの制限、タスクキューのスタッキングなど、バックエンドの問題に注意を払い、サーバーのコンフィギュレーションとコード実行ロジックを適切に最適化する必要がある。

まとめ

サイトアクセスの遅さと504エラーは、表面的には似ているかもしれませんが、本質的には異なる方向に進む2つの異なる問題です。原因を正確に特定することが、問題の診断と解決の第一歩です。LighthouseとGTmetrixを使えば、パフォーマンスのボトルネックがどこにあるのかを素早く特定し、様々なシナリオでサイトのパフォーマンスを向上させることができます。

これらのツールを適切に使用することは、技術者にとって実用的な意義がある。サイトが複数の地域を対象としていたり、複雑なビジネス・ロジックを持つ場合は、システムの安定性やページのアクセシビリティに影響を与える可能性のある誤った判断を避けるため、パフォーマンスを定期的に監視する必要があります。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み