ウェブサイトのパフォーマンスを改善し、ユーザーエクスペリエンスを最適化します！この記事では、燈臺ツールを使用してWebページのパフォーマンス、アクセシビリティ、SEO、その他の側面を分析および改善して、Webサイトのランキングとユーザーエンゲージメントを改善するための詳細な方法について説明します。

Lighthouseは、Googleの強力なオープンソースツールであり、Webページの品質を自動的に分析し、改善の提案を提供します。 Lighthouseスコアを最適化することにより、より多くのユーザーを引き付け、検索エンジンでより高いランキングを獲得できます。

この記事には、燈臺を使用することができます質問。さらに、別の強力なWebサイトのパフォーマンス評価ツールであるWebPageTestを紹介します。

キーポイント：

• Lighthouseは、Webページのパフォーマンス、アクセシビリティ、SEOなどを分析するためのGoogleのオープンソースツールであり、ウェブサイトのランキングとユーザーの魅力を改善します。
• パフォーマンスの改善は、SEOランキングの高度とユーザーエンゲージメントの向上に直接関係しており、積み込み時間が速いことが重要です。
• Chrome開発者ツールを使用してLighthouseを使用することは非常にシンプルであり、モバイルまたはデスクトップ設定でのパフォーマンス、アクセシビリティ、SEO、およびベストプラクティスのレビューを可能にします。
• 燈臺の主要なパフォーマンスメトリックには、最初のコンテンツペイント（FCP）、最初のインタラクティブタイム（TTI）、および最大コンテンツペイント（LCP）が含まれます。
• 燈臺のアクセシビリティ機能は、障害のある人もウェブサイトを使用できるようにし、それによって包含が増加することを保証するのに役立ちます。
• 定期的な燈臺監(jiān)査は、Webページの問題を特定して修正し、全體的なユーザーエクスペリエンスを改善し、Web開発のベストプラクティスに沿って修正するのに役立ちます。

ウェブサイトのパフォーマンスの重要性

トップグローバルWebサイトの一般的な機能の1つは、優(yōu)れたユーザーエクスペリエンスです。その中でも、パフォーマンスは非常に重要です。ユーザーは、ファーストロードWebサイトを好みます。読み込み時間が長すぎる場合、ユーザーは出発して、より便利な代替品を見つける可能性があります。

ウェブサイトのパフォーマンスの向上は、SEOランキングを改善し（この記事の詳細）、クリックスルーと変換率を改善することができます。したがって、より多くの販売、登録ユーザー、またはトラフィックを取得したい場合は、まずWebサイトが標準に合わせて実行されることを確認する必要があります。

なぜ燈臺を選ぶ燈臺はGoogleのオープンソースツールです。有名で信頼できる會社として、Googleの結果は他のツールよりも信頼性が高くなります。さらに、Google Search Enginesが過去10年間を先導してきたため、Googleの検索エンジンでランク付けされていると、より多くのトラフィックがもたらされる可能性があります。その結果、Googleのパフォーマンス監(jiān)査ツールでより高いスコアを取得すると、検索結果のWebサイトのランキングが改善される可能性があります。

Googleの承認に加えて、燈臺の卓越性も詳細な結果であり、常にユーザーの関心に焦點を當てています。 Lighthouseは、ページの読み込み時間、ページ（および最終的にはWebサイト）のセキュリティ、ページアクセシビリティの実踐、実裝など、多くの結果を提供します。

燈臺の使用方法

このセクションでは、最初に燈臺を使用してWebスコアを分析および確認する最も簡単な方法を紹介します。つまり、Chromeブラウザを介して直接操作します。次に、より詳細な結果やオプションを提供する可能性のある他の燈臺ツールを探索します。

Chromeを使用して

燈臺を使用してChromeを使用することは、Webサイトのパフォーマンスを測定する最も簡単な方法です。まず、測定するWebページを開きます。デモンストレーションのために、さまざまなサンプル結果を表示できるように、WebサイトおよびGitHubで実行される監(jiān)査結果を使用します。

次に、[

]シフトコントロールをクリックして、開発者ツールを開きますjまたはf12Windows/linuxを使用するか、>をクリックします。 OptionCommandjまたは fn

f12

> fn。

の後、[燈臺]タブをクリックします。

ご覧のとおり、含めるカテゴリを確認することを選択できます。これらのカテゴリには、パフォーマンス、プログレッシブWebアプリケーション、ベストプラクティス、アクセシビリティ、SEOが含まれます。監(jiān)査がモバイルデバイスまたはデスクトップデバイスで実行されるかどうかを選択することもできます。

このセクションでは、4つの監(jiān)査、つまりパフォーマンス、ベストプラクティス、アクセシビリティ、SEOを実行します。これをデスクトップで実行します。ただし、最良の結果を得るには、モバイルデバイスやさまざまなインターネット速度で、さまざまな條件でページをテストしてください。

したがって、測定するページで、上記の4つのカテゴリとデスクトップを選択し、[レポートを生成]をクリックします。

これには數分かかる場合があり、ブラウザのウィンドウがその過程で大きくて小さくなる可能性があることがわかります。これは、レポートにWebページのさまざまな畫面サイズと條件が含まれているためです。完了すると、Lighthouseタブには、パフォーマンス、ベストプラクティス、アクセシビリティ、SEOの各スコアなど、レビュー結果が含まれます。

インターネット接続によって結果が異なる場合があることに注意することが重要です。さらに、燈臺には、一部の拡張機能が結果に影響する可能性があるという通知が表示される場合があります。もしそうなら、目に見えないウィンドウでテストを実行するのが最善です。

燈臺が実行されたら、任意のカテゴリをクリックして、より詳細なレポートを表示できます。

<script>標簽添加defer或async屬性。例如： <pre class='brush:php;toolbar:false;'>&lt;script src=&quot;myScript.js&quot; defer&gt;&lt;/script&gt;（次のコンテンツは、元のテキストのパフォーマンスパーツの単純化と書き換えであり、他の部分も同様に扱われており、空間関係は関連しています。パフォーマンスパーツの書き換えのみがここに示されています。 ）&lt;??&gt;&lt;??&gt;&lt;h4&gt;パフォーマンス&lt;/h4&gt; &lt;p&gt;パフォーマンスは、ウェブサイトの読み込みをスピードアップする方法に焦點を當てています。 6つの重要なパフォーマンスメトリック、それぞれに含まれるものと、各メトリックでより良いスコアを取得する方法について説明します。 &lt;/p&gt; &lt;h5&gt;最初のコンテンツ図面（FCP）&lt;/h5&gt; &lt;p&gt;最初のコンテンツ図面（FCP）は、ユーザーがWebページに移動する瞬間から測定を開始します。最初のDOMコンテンツをロードするのにかかる時間を測定します。 DOMコンテンツには、畫像、非白のキャンバス要素、およびSVG要素が含まれる場合があります。 &lt;/p&gt; &lt;p&gt;FCPは秒で測定されます。ページを作成するには、FCPが高速であることを意味する「グリーン」スコアを持つために、最初のDOMコンテンツは最大1.8秒のロードでなければなりません。この時間を超えると、中程度または遅くなる可能性があります。 &lt;/p&gt; &lt;p&gt; FCPは、ユーザーを理解するのに役立つため重要です。前述のように、ユーザーは忍耐強くなく、長すぎるとロードされれば、ウェブサイトを離れます。高速FCPは、ユーザーをエンゲージし続けることができます。これは単純なロード畫面であり、Webページがロードしようとしているため、ユーザーに待機するように指示できます。 &lt;/p&gt; &lt;p&gt; WebサイトのFCP時間に影響を與える要因の1つはフォントです。フォントは長い間ロードされる可能性があり、時にはテキストがロードする前に見えない場合があります。この問題を解決する良い方法は、 @font-faceでフォントを宣言する場合、CSSプロパティフォントディスプレイを使用することです。たとえば、&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code&gt;@font-face { font-family: 'MyFont'; font-style: normal; font-weight: 400; src: url(MyFont.woff); font-display: swap; }</pre> <p> Googleフォントを使用している場合、このプロパティはデフォルトで有効になります。このプロパティにより、Webサイトのフォントがロードされるまで、ユーザーのシステムデフォルトフォントを使用してテキストを表示できます。 </p> FCPに影響を與えるもう1つの要因は、ブロッキングリソースをレンダリングすることです。これらは通常、JavaScriptまたはCSSファイルが同期的にロードされ、長時間の読み込み時間があります。これらのリソースにより、ページの殘りの部分はページを完全にロードする前にロードするのを待たせ、DOMコンテンツのFCPに影響します。いくつかの解決策は次のとおりです<ul> <li> is <code></pre><ul> <li> 使用されているJavaScriptおよびCSSファイルを圧縮し、サイズを縮小して、これらのリソースをロードするのに時間がかかりないようにします。使用しているフレームワークまたはプログラミング言語に依存しますが、ほとんどすべてのフレームワークまたはプログラミング言語にはこれを行う方法があります。 Web.dev Webサイトでさまざまな一般的なフレームワークを使用して、JavaScriptの圧縮に関する簡単なヒントを確認できます。 <li> Webページで未使用のCSSを削除します。 CSSサイズが増加すると、ページ上の未使用のルールとプロパティを削除することでCSSファイルのサイズを縮小すると、ロードがスピードアップできます。繰り返しますが、使用しているフレームワークに応じて、これを行うにはさまざまな方法があります。ただし、Chromeの開発者ツールを使用して、「カバレッジ」タブで未使用のCSSを表示できます。 Tailwind CSSなどのフレームワークを使用すると（ツリーシュキングメカニズムを使用してCSSスタイルを削減します。 <li> サーバーの応答時間を短縮します。これは、非同期リクエストを使用してページの読み込みに必要なロジックを実行したり、サーバーで使用されることが多い數字をキャッシュするか、サーバーコードを最適化して目的の結果をより速く取得することで達成できます。 <p> パフォーマンス監(jiān)査を実行すると、ページにフォント、コンテンツブロッキングリソース、未使用のCSS、または上記の問題に問題がある場合、燈臺は、問題を引き起こし、改善の提案を提供する各ファイルを強調します。たとえば、フォントがテキストの可視性をブロックすると、燈臺は問題を引き起こすフォントファイルと、問題の修正がページのFCP時間をスピードアップする方法を表示します。 <p> 以下は、CSSファイルを「レンダリングブロッキングリソース」として示すGitHub監(jiān)査レポートの例です。 <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173917586115577.jpg" class="lazy" alt="A Beginner's Guide to Lighthouse " /> <p> 殘りのメトリックを読むと、それらがこのメトリックの結果にある程度依存していることに気付きます。したがって、優(yōu)れたFCPスコアを取得することが非常に重要です。 <p> <strong>（元のテキストやその他のパーツのパフォーマンスの殘りの指標はここで省略されています）<p> <strong>概要<p> ウェブサイトのパフォーマンスの向上は、開発プロセスの重要なステップです。無視したり過小評価したりしないでください。検索エンジンで高速でアクセスしやすいパフォーマンスのあるWebサイトを提供すると、Webサイトのトラフィックを増やし、登録ユーザーまたは販売を増やすことができます。 Lighthouseは、ウェブサイトを改善し、より多くのユーザーを引き付けるのに役立つ包括的な洞察と分析を提供する優(yōu)れたオープンソースツールです。 <p> <strong>（元のテキストのFAQの部分はここで省略されています）<</script>

以上が燈臺への初心者のガイドの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。