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:
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.
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
f12auf 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>标签添加defer或async属性。例如： <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script src="myScript.js" defer></script> <🎜><h4> Leistung </h4> <p> 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. </p> <h5> Erstes Inhaltszeichnung (FCP) </h5> <p> 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. </p> <p> FCP wird in Sekunden gemessen. Damit Ihre Seite eine "grüne" 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. </p> <p> 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. </p> <p> 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: </p> <pre class="brush:php;toolbar:false"><code>@font-face { font-family: 'MyFont'; font-style: normal; font-weight: 400; src: url(MyFont.woff); font-display: swap; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <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><head></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="https://img.php.cn/upload/article/000/000/000/173917586115577.jpg" 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>标签添加defer或async属性。例如： <pre class="brush:php;toolbar:false"><code class="language-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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
