灯台への初心者のガイド

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

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

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

キーポイント：

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

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

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

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

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

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

灯台の使用方法

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

Chromeを使用して

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

次に、[

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

f12

> fn。

の後、[灯台]タブをクリックします。

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

このセクションでは、4つの監査、つまりパフォーマンス、ベストプラクティス、アクセシビリティ、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 id=&quot;パフォーマンス&quot;&gt;パフォーマンス&lt;/h4&gt; &lt;p&gt;パフォーマンスは、ウェブサイトの読み込みをスピードアップする方法に焦点を当てています。 6つの重要なパフォーマンスメトリック、それぞれに含まれるものと、各メトリックでより良いスコアを取得する方法について説明します。 &lt;/p&gt; &lt;h5 id=&quot;最初のコンテンツ図面-FCP&quot;&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サイトのフォントがロードされるまで、ユーザーのシステムデフォルトフォントを使用してテキストを表示できます。 FCPに影響を与えるもう1つの要因は、ブロッキングリソースをレンダリングすることです。これらは通常、JavaScriptまたはCSSファイルが同期的にロードされ、長時間の読み込み時間があります。これらのリソースにより、ページの残りの部分はページを完全にロードする前にロードするのを待たせ、DOMコンテンツのFCPに影響します。いくつかの解決策は次のとおりです<ul> <li> is <code><ul> <li> 使用されているJavaScriptおよびCSSファイルを圧縮し、サイズを縮小して、これらのリソースをロードするのに時間がかかりないようにします。使用しているフレームワークまたはプログラミング言語に依存しますが、ほとんどすべてのフレームワークまたはプログラミング言語にはこれを行う方法があります。 Web.dev Webサイトでさまざまな一般的なフレームワークを使用して、JavaScriptの圧縮に関する簡単なヒントを確認できます。 <li> Webページで未使用のCSSを削除します。 CSSサイズが増加すると、ページ上の未使用のルールとプロパティを削除することでCSSファイルのサイズを縮小すると、ロードがスピードアップできます。繰り返しますが、使用しているフレームワークに応じて、これを行うにはさまざまな方法があります。ただし、Chromeの開発者ツールを使用して、「カバレッジ」タブで未使用のCSSを表示できます。 Tailwind CSSなどのフレームワークを使用すると（ツリーシュキングメカニズムを使用してCSSスタイルを削減します。 <li> サーバーの応答時間を短縮します。これは、非同期リクエストを使用してページの読み込みに必要なロジックを実行したり、サーバーで使用されることが多い数字をキャッシュするか、サーバーコードを最適化して目的の結果をより速く取得することで達成できます。 <p> パフォーマンス監査を実行すると、ページにフォント、コンテンツブロッキングリソース、未使用のCSS、または上記の問題に問題がある場合、灯台は、問題を引き起こし、改善の提案を提供する各ファイルを強調します。たとえば、フォントがテキストの可視性をブロックすると、灯台は問題を引き起こすフォントファイルと、問題の修正がページのFCP時間をスピードアップする方法を表示します。 <p> 以下は、CSSファイルを「レンダリングブロッキングリソース」として示すGitHub監査レポートの例です。 <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173917586115577.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="A Beginner's Guide to Lighthouse " /> <p> 残りのメトリックを読むと、それらがこのメトリックの結果にある程度依存していることに気付きます。したがって、優れたFCPスコアを取得することが非常に重要です。 <p> <strong>（元のテキストやその他のパーツのパフォーマンスの残りの指標はここで省略されています）<p> <strong>概要<p> ウェブサイトのパフォーマンスの向上は、開発プロセスの重要なステップです。無視したり過小評価したりしないでください。検索エンジンで高速でアクセスしやすいパフォーマンスのあるWebサイトを提供すると、Webサイトのトラフィックを増やし、登録ユーザーまたは販売を増やすことができます。 Lighthouseは、ウェブサイトを改善し、より多くのユーザーを引き付けるのに役立つ包括的な洞察と分析を提供する優れたオープンソースツールです。 <p> <strong>（元のテキストのFAQの部分はここで省略されています）<</script>

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