Optimieren Sie die CSS -Ladestrategie und verbessern

In diesem Artikel wird erl?utert, wie Browser CSS -Dateien geladen werden und ihre Auswirkungen auf die Webrendern -Geschwindigkeit auswirken und mehrere Optimierungsstrategien einführt, mit denen Sie Ihre Benutzererfahrung verbessern k?nnen.

Problem: CSS -Blockierungsrendern

Wenn Sie Google Page Speed ??-Erkenntnisse verwendet haben, haben Sie m?glicherweise einen Tipp wie folgt gesehen:

Der Browser verwendet DOM und CSSOM, um Webseiten zu rendern. CSS befindet sich auf dem kritischen Rendering -Pfad, was bedeutet, dass der Browser alle HTML- und CSS -Informationen zum Rendern herunterladen und verarbeiten muss, was zu Verz?gerungen und Auswirkungen auf die Benutzererfahrung führen kann. Insbesondere externe Stilbl?tter führen zu mehreren Rundenfahrten zwischen dem Browser und dem Server, was zu einem Zeitunterschied zwischen dem Abschluss des HTML -Downloads und dem Rendering der Seite führt.

Konzept des Schlüssel -CSS

W?hrend HTML für die Seitenwiedergabe von entscheidender Bedeutung ist, ist nicht alle CSS von entscheidender Bedeutung. Was Benutzer am meisten besorgt sind, ist der Inhalt des sichtbaren Bereichs (Ansichtsfenster) der Seite. H?ufige Optimierungsstrategien sind daher verz?gert oder asynchrone Belastungen blockierender Ressourcen oder inline -Schlüsselteile in HTML.

Optimierungsstrategie

Folgendes sind einige h?ufig verwendete Optimierungsmethoden für Entwickler:

1. Minimieren Sie das Rendernblockieren mit Medientypen und Medienabfragen: Teilen Sie externe CSS in verschiedene Dateien (z. B. , style.css, print.css) und verwenden Sie die entsprechenden Medientyp- und Medienabfragen, auf ihnen. Zum Beispiel: other.css

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

Der Browser l?dt alle Stilbl?tter herunter, bevorzugt aber nicht blockierende Stilbl?tter.

2. Verwenden Sie den Befehl : preload , um dem Browser mitzuteilen, dass er im Voraus bestimmte Ressourcen erhalten soll. In Kombination mit dem Ereignis von JavaScript k?nnen Sie asynchrone Ladestilbl?tter implementieren: preload onload

derzeit ist die Browserunterstützung von

<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

begrenzt und Sie k?nnen die von der Filamentgruppe bereitgestellte Polyfill verwenden.

preload

3. L?sungen der Filamentgruppe: Die Richtlinien der Filamentgruppe umfassen: Inlinekritische CSS in HTML und laden nicht kritischer CSS asynchron mithilfe von HTTP/2-Server-Push. Sie verwenden die LOADCSS -Bibliothek, die Polyfills enth?lt, die

   Browser nicht unterstützen. preload

Stellen Sie den Stylesheet -Link in den K?rper des Dokuments ein:
4. Diese Methode stützt sich nicht auf das Konzept von "ob oben", sondern platziert den Stylesheet -Link vor dem entsprechenden HTML der Inhalt nacheinander. Zum Beispiel:

Schlussfolgerung

<link rel="stylesheet" href="/site-header.css">
<main>...</main>
<link rel="stylesheet" href="/article.css">

Die Art und Weise, wie der Browser Style -Bl?tter herunterl?dt, kann das Seitenwechsel blockieren und die Benutzererfahrung beeinflussen. In mehreren in diesem Artikel eingeführten Optimierungsmethoden k?nnen Sie dieses Problem l?sen und die Ladegeschwindigkeit von Webseiten verbessern. Welche Methode zu w?hlen, h?ngt von der Gr??e und Komplexit?t Ihrer Website ab.

FAQs (FAQs)

• Was ist der kritische Rendering -Pfad (CRP)? Warum ist es wichtig für schnellladende Websites? CRP ist eine Abfolge von Schritten für einen Browser zum Umwandeln von HTML, CSS und JavaScript in Bildschirmpixel. Das Optimieren von CRP kann das Laden der Webseite beschleunigen und die Benutzererfahrung verbessern.

• Wie optimieren Sie die wichtigsten Rendering -Pfade? CRP kann optimiert werden, indem die Dateigr??e reduziert, die Anzahl der kritischen Ressourcen minimiert und die kritische Pfadl?nge verkürzt. Zum Beispiel: Komprimierte Dateien, Inlinekritische CSS, verz?gerte nicht kritische CSS und JavaScript und verwenden asynchrone Laden.

• Was ist eine Renderblockierungsressource? Wie wirken sie sich auf die Ladegeschwindigkeit der Website aus? Blockierungsressourcen rendern Ressourcen sind Dateien (normalerweise CSS und JavaScript -Dateien), die Webseiten vom Anzeigen blockieren, bis sie vollst?ndig heruntergeladen und verarbeitet werden. Sie verz?gern das Rendern von Web -Rendern und verlangsamen das Laden.

• Wie kann man Renderblockerressourcen beseitigen? Sie k?nnen Renderblockierungsressourcen beseitigen, indem Sie nicht kritische CSS und JavaScript, Inline Critical CSS und asynchrones Laden von Dateien verz?gern.

• Was ist der Unterschied zwischen synchroner Belastung und asynchronem Laden? Synchron -Ladebl?cke Webseitenrendern Bis die Datei vollst?ndig heruntergeladen und verarbeitet wird.

• Wie kann man die kritischen CSS einfügen? Warum ist das vorteilhaft? Inline -Schlüssel CSS besteht darin, CSS direkt in HTML -Dokumenten zu platzieren, nicht in externen Dateien. Dadurch wird die Notwendigkeit separater Netzwerkanfragen beseitigt, wodurch die Zeit, die zum Rendern einer Webseite erforderlich ist, verringert wird.

• Was spielt JavaScripts Rolle bei kritischen Rendering -Pfaden? JavaScript kann DOM und CSSOM bedienen, aber wenn es nicht ordnungsgem?? behandelt wird, blockiert es auch den Rendering -Prozess.

• Wie erh?hen Sie die Ladegeschwindigkeit der Website mit komprimierten Dateien? Komprimierte Dateien l?schen unn?tige Zeichen (z. B. Leerzeichen und Kommentare) im Code, reduzieren die Dateigr??e und beschleunigen Downloads.

• Welche Tools k?nnen verwendet werden, um kritische Rendering -Pfade zu analysieren und zu optimieren? Tools wie Google PageSpeed ??Insights, Lighthouse und WebPagetest k?nnen dazu beitragen, kritische Rendering -Pfade zu analysieren und zu optimieren.

• Wie optimieren Sie die wichtigsten Rendering -Pfade, um die Benutzererfahrung zu verbessern? Optimieren kritischer Rendering -Pfade k?nnen die Ladezeit des Webseiten verkürzen und die Benutzererfahrung verbessern. Eine schnellere Ladegeschwindigkeit kann die Zufriedenheit der Benutzer verbessern und m?glicherweise die Suchmaschinenrangliste verbessern.

(Einige Inhalte dieses Artikels werden von SiteGround bereitgestellt)

Das obige ist der detaillierte Inhalt vonAngriff auf das Blockieren von Rendern CSS für eine schnelle Rendering -Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!