Verbesserung der Website -Leistung und optimieren Sie die Benutzererfahrung! In diesem Artikel wird eingehend untersucht, wie Sie Lighthouse-Tools verwenden, um die Leistung der Webseiten, die Zug?nglichkeit, die SEO und andere Aspekte zu verbessern, um die Website-Ranking und das Benutzungsbetrieb zu verbessern.

Lighthouse ist ein leistungsstarkes Open -Source -Tool für Google, das die Qualit?t der Webseiten automatisch analysiert und Verbesserungsvorschl?ge bereitstellt. Durch die Optimierung der Leuchtturmwerte k?nnen Sie mehr Benutzer anziehen und h?here Ranglisten in Suchmaschinen erhalten.

Dieser Artikel konzentriert sich auf die Bedeutung der Website; Frage. Darüber hinaus werden wir ein weiteres leistungsstarkes Tool für die Bewertung von Website -Performance -Bewertung vorstellen - WebPagetest.

Schlüsselpunkte:

• Lighthouse ist das Open -Source -Tool von Google zur Analyse von Webseitenleistung, Zug?nglichkeit, SEO usw. und verbessert damit die Website -Rangliste und die Benutzerathrungsanziehung.
• Leistungsverbesserungen stehen in direktem Zusammenhang mit h?heren SEO -Rankings und einer besseren Einbindung des Benutzers, und schnelle Ladezeiten sind entscheidend.
• Lighthouse mit Chrome Developer Tools verwenden, ist sehr einfach und erm?glicht die überprüfung der Leistung, Zug?nglichkeit, SEO und Best Practices in mobilen oder Desktop -Einstellungen.
Zu den wichtigsten Leistungsmetriken in Lighthouse geh?ren die erste Inhaltsfarbe (FCP), die erste interaktive Zeit (TTI) und die maximale Inhaltsfarbe (LCP), die für die Aufrechterhaltung des Benutzers Engagement und der Zufriedenheit von entscheidender Bedeutung sind.
• Die Zug?nglichkeitsfunktionen von
Lighthouse tragen dazu bei, dass Menschen mit Behinderungen auch die Website nutzen k?nnen, wodurch die Einbeziehung erh?ht wird.
regul?re Lighthouse -Audits k?nnen dazu beitragen, Webseitenprobleme zu identifizieren und zu korrigieren, die allgemeine Benutzererfahrung zu verbessern und den besten Practices der Webentwicklung zu verbessern.

Die Bedeutung der Website -Leistung

Eine der g?ngigen Funktionen der globalen Websites ist: hervorragende Benutzererfahrung. Unter ihnen ist die Leistung von entscheidender Bedeutung. Benutzer bevorzugen schnellladende Websites. Wenn die Ladezeit zu lang ist, gehen die Benutzer wahrscheinlich, um bequemere Alternativen zu finden.

Verbesserung der Website-Leistung kann die SEO-Rangliste verbessern (mehr zu diesem Artikel) und die Klick- und Conversion-Raten verbessern. Wenn Sie also mehr Verk?ufe, registrierte Benutzer oder Traffic erhalten m?chten, müssen Sie zun?chst sicherstellen, dass die Website bis zum Standard ausgeführt wird.

Warum Lighthouse w?hlen

Leuchtturm ist das Open -Source -Tool von Google. Als bekanntes und vertrauenswürdiges Unternehmen sind die Ergebnisse von Google zuverl?ssiger als andere Tools. Da Google -Suchmaschinen in den letzten zehn Jahren den Weg sind, wird die Rangliste in Google -Suchmaschinen wahrscheinlich mehr Verkehr bringen. Infolgedessen kann das Erz?hlen h?herer Punktzahlen in Googles Performance Audit Tools das Ranking Ihrer Website in den Suchergebnissen verbessern.

Zus?tzlich zu Googles Best?tigung ist die Exzellenz des Leuchtturms auch die detaillierten Ergebnisse, die sich immer auf Benutzerinteressen konzentrieren. Lighthouse bietet eine gro?e Anzahl von Ergebnissen, darunter die Ladezeit von Seiten, die Sicherheit (und letztendlich Website), die Praktiken und Implementierungen von Seitenzugriffszügeln und vielem mehr.

wie man Leuchtturm verwendet

In diesem Abschnitt wird zun?chst die einfachste M?glichkeit eingebracht, Web -Scores mit Lighthouse zu analysieren und zu überprüfen, d. H. Direkt über den Chrombrowser zu arbeiten. Wir werden dann andere Leuchtturm -Tools untersuchen, die m?glicherweise detailliertere Ergebnisse oder Optionen liefern.

mit Chrome

Leuchtturm mit Chrome ist der einfachste Weg, die Leistung der Website zu messen. ?ffnen Sie zun?chst jede Webseite, die Sie messen m?chten. Zur Demonstration werde ich die Prüfungsergebnisse verwenden, die auf meiner Website und auf GitHub ausgeführt werden, damit wir verschiedene Beispielergebnisse anzeigen k?nnen.

?ffnen Sie als n?chstes das Entwickler -Tool, indem Sie auf verschieben Steuerung j oder f12 unter Windows/Linux oder klicken Sie auf klicken Option Befehl j oder fn

f12

auf macOS.

Klicken Sie nach

auf die Registerkarte Leuchtturm.

Wie Sie sehen, k?nnen Sie die Kategorie überprüfen, die einbezogen werden soll. Diese Kategorien umfassen Leistung, progressive Webanwendungen, Best Practices, Barrierefreiheit und SEO. Sie k?nnen auch w?hlen, ob das Audit auf einem mobilen oder Desktop -Ger?t ausgeführt wird.

In diesem Abschnitt werden wir vier Audits durchführen, n?mlich Leistung, Best Practices, Barrierefreiheit und SEO, die wir auf unserem Desktop ausführen werden. Testen Sie jedoch Ihre Seite unter verschiedenen Bedingungen, beispielsweise auf mobilen Ger?ten und mit unterschiedlichen Internetgeschwindigkeiten.

W?hlen Sie auf der Seite, die Sie messen m?chten, die oben genannten vier Kategorien und den oben genannten Desktop aus und klicken Sie auf "Bericht generieren".

Dies kann einige Minuten dauern, und Sie werden feststellen, dass das Fenster des Browsers in dem Prozess gr??er und kleiner werden kann. Dies liegt daran, dass der Bericht unterschiedliche Bildschirmgr??en und -bedingungen für die Webseite enth?lt. Nach Abschluss der Lighthouse -Registerkarte enth?lt die überprüfungsergebnisse, einschlie?lich jeder Punktzahl für Leistung, Best Practices, Barrierefreiheit und SEO.

Es ist wichtig zu beachten, dass die Ergebnisse manchmal je nach Internetverbindung variieren k?nnen. Darüber hinaus kann Lighthouse manchmal Benachrichtigungen zeigen, dass einige Erweiterungen die Ergebnisse beeinflussen k?nnen. In diesem Fall ist es am besten, den Test im unsichtbaren Fenster durchzuführen.

Wenn der Leuchtturm ausgeführt wird, k?nnen Sie auf eine beliebige Kategorie klicken, um einen detaillierteren Bericht anzuzeigen.

(Der folgende Inhalt ist eine Vereinfachung und Umschreibung des Leistungsteils im Originaltext, und auch andere Teile wurden ?hnlich behandelt, und die Raumbeziehung h?ngt. Nur die Umschreibung des Leistungsteils wird hier gezeigt ) <script>標(biāo)簽添加defer或async屬性。例如： <pre class='brush:php;toolbar:false;'>&lt;script src=&quot;myScript.js&quot; defer&gt;&lt;/script&gt; &lt;??&gt;&lt;h4&gt; Leistung &lt;/h4&gt; &lt;p&gt; Die Leistung konzentriert sich darauf, wie das Laden der Website beschleunigt wird. Wir werden sechs wichtige Leistungskennzahlen abdecken, was sie jeweils enthalten und wie man in jeder Metrik bessere Punktzahlen erzielt. &lt;/p&gt; &lt;h5&gt; Erstes Inhaltszeichnung (FCP) &lt;/h5&gt; &lt;p&gt; Erstes Inhaltszeichnung (FCP) beginnt mit dem Moment, an dem der Benutzer zur Webseite navigiert. Es misst, wie lange es dauert, den ersten DOM -Inhalt zu laden. Der DOM-Inhalt kann ein Bild, ein nicht wei?es Canvas-Element und ein SVG-Element enthalten. &lt;/p&gt; &lt;p&gt; FCP wird in Sekunden gemessen. Damit Ihre Seite eine &quot;grüne&quot; Punktzahl hat - was bedeutet, dass FCP schnell ist -, sollte der erste DOM -Inhalt die Zeit bis zu 1,8 Sekunden laden. Sobald diese Zeit überschritten ist, kann es mittel oder langsam werden. &lt;/p&gt; &lt;p&gt; FCP ist wichtig, da es uns hilft, Benutzer zu verstehen. Wie bereits erw?hnt, sind Benutzer nicht geduldig und wenn sie zu lange geladen werden, verlassen sie Ihre Website. FAST FCP kann die Benutzer engagieren. Dies kann ein einfacher Ladebildschirm sein, in dem der Benutzer warten soll, da auf der Webseite geladen wird. &lt;/p&gt; &lt;p&gt; Ein Faktor, der die FCP -Zeit einer Website beeinflusst, ist eine Schriftart. Schriftarten k?nnen lange geladen werden, und manchmal ist der Text vor dem Laden unsichtbar. Eine gute M?glichkeit, dieses Problem zu l?sen, besteht darin, das CSS-Eigenschafts-Schriftart zu verwenden: Swap; Zum Beispiel: &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> Wenn Sie Google -Schriftarten verwenden, ist diese Eigenschaft jetzt standardm??ig aktiviert. Mit dieser Eigenschaft k?nnen Text mit der Standardschrift des Benutzers angezeigt werden, bis die Schriftart der Website geladen ist. </p> <p> Ein weiterer Faktor, der FCP beeinflusst, ist die Erbringung von Blockierungsressourcen. Dies sind normalerweise JavaScript- oder CSS -Dateien, die in <code>&lt;head&gt;</code> synchron geladen sind und eine lange Ladezeit haben. Diese Ressourcen erzwingen den Rest der Seite, um darauf zu warten, dass sie geladen werden, bevor sie die Seite voll geladen haben, was sich auf den FCP des DOM -Inhalts auswirkt. Hier sind einige L?sungen: </p><ul> <li> ist <code></pre> <ul> <li> komprimieren Sie die verwendeten JavaScript- und CSS -Dateien, wodurch deren Gr??e nicht zu lange dauert, um diese Ressourcen zu laden. Es h?ngt von der von Ihnen verwendeten Framework- oder Programmiersprache ab, aber fast alle Frameworks oder Programmiersprachen haben eine M?glichkeit, dies zu tun. Sie k?nnen einfache Tipps zum Komprimieren von JavaScript unter Verwendung verschiedener beliebter Frameworks auf der Web.dev -Website überprüfen. <li> ungenutzte CSS auf der Webseite l?schen. Wenn die Gr??e der CSS zunimmt, kann die Reduzierung der Gr??e von CSS -Dateien durch Entfernen ungenutzter Regeln und Eigenschaften auf der Seite das Laden beschleunigen. Abh?ngig vom von Ihnen verwendeten Framework gibt es auch verschiedene M?glichkeiten, dies zu tun. Sie k?nnen jedoch die Entwickler -Tools von Chrome verwenden, um nicht verwendete CSS auf der Registerkarte "Berichterstattung" anzuzeigen. Die Verwendung von Frameworks wie Tailwind-CSS (die Baumschüttelmechanismus verwenden, um CSS-Stile zu reduzieren, anstatt Ihre Website mit vielen Stilen zu bauen, die Sie m?glicherweise nie verwenden) kann das Laden von Websiteen beschleunigen. <li> Reduzieren Sie die Reaktionszeit des Servers. Dies kann erreicht werden, indem asynchrone Anforderungen zur Ausführung der für das Laden von Seite erforderlichen Logik, die vom Server h?ufig verwendete Nummer durchgeführt werden, oder den Servercode optimieren, um die gewünschten Ergebnisse schneller zu erhalten. <p> Wenn Sie eine Leistungsprüfung durchführen, hat der Leuchtturm jede Datei, die das Problem verursacht und Verbesserungsvorschl?ge liefern, wenn Ihre Seite Probleme mit Schriftarten, Inhaltssperrressourcen, nicht verwendeten CSS oder anderen oben genannten Problemen hat. Wenn die Schriftart beispielsweise die Sichtbarkeit des Textes blockiert, zeigt der Leuchtturm die Schriftart an, die das Problem verursacht und wie das Problem die FCP -Zeit der Seite beschleunigt. <p> Folgendes ist ein Beispiel für den GitHub -Audit -Bericht, der eine CSS -Datei als "Renderblockierungsressource" anzeigt. <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> Wenn Sie den Rest der Metriken lesen, erkennen Sie, dass sie in gewissem Ma?e von den Ergebnissen dieser Metrik abh?ngen. Daher ist es sehr wichtig, einen guten FCP -Wert zu erhalten. <p> <strong> (die verbleibenden Leistungsanzeigen im Originaltext und andere Teile werden hier weggelassen) <p> <strong> Zusammenfassung <p> Die Verbesserung der Website -Leistung ist ein entscheidender Schritt im Entwicklungsprozess. Niemals ignorieren oder untersch?tzen. Durch die Bereitstellung von schnellen, zug?nglichen und gut leistungsf?higen Websites in Suchmaschinen k?nnen Sie den Website-Verkehr erh?hen und registrierte Benutzer oder Ums?tze erh?hen. Lighthouse ist ein hervorragendes Open -Source -Tool, das umfassende Erkenntnisse und Analysen bietet, mit denen Sie Ihre Website verbessern und mehr Benutzer anziehen k?nnen. <p> <strong> (Der FAQS -Teil im Originaltext ist hier weggelassen) <script>標(biāo)簽添加defer或async屬性。例如： <pre class="brush:php;toolbar:false"><code class="html"><script src="myScript.js" defer></script>

Das obige ist der detaillierte Inhalt vonEin Anf?ngerleitfaden zum Leuchtturm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!