Angriff auf das Blockieren von Rendern CSS für eine schnelle Rendering -Website

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!