CSS -Optimierungstools zur Steigerung der PWA -Leistung

Verbesserung der PWA -Leistung: CSS -Optimierungshandbuch

In diesem Artikel wird untersucht, wie die Leistung progressiver Webanwendungen (PWA) durch CSS -Optimierung erheblich verbessert wird. Wir werden lernen, wie man nicht verwendete CSS entzieht, CSS inlinekritisch ist und den endgültigen Code komprimiert. Diese Technologien eignen sich auch für normale Websites und Anwendungen.

Schlüsselpunkte:

• CSS -Optimierung kann die PWA -Leistung erheblich verbessern, indem ungenutzte CSS, Inline -CSS und Codekomprimierung inline.
• Google Open Source Audit Tool Lighthouse kann dazu beitragen, Möglichkeiten für die CSS -Optimierung zu ermitteln.
• Tools wie PurifyCSS können unbenutzte CSS -Stile entfernen und die Größe von CSS -Dateien verringern. Tools wie Critical CSS -Extraktor können CSS -Regeln extrahieren und inline -Key -CSS -Regeln extrahieren und die Anzahl der HTTP -Anforderungen und die Menge des Browser -Parsing -Codes verringern.
• CSS -Dateien können verhindert werden, dass das Rendering durch das Laden von CSS -Dateien am Ende der Seite mit JavaScript nach DOM geladen wird.

Beispiel PWA und Audit

Zur Demonstration werden wir ein einfaches PWA -Beispiel verwenden (der Code ist im GitHub -Repository verfügbar oder direkt auf die Online -Version zugreifen). Diese PWA verwendet unkomprimierte Bootstrap V4 für den CSS -Stil und zeigt eine Reihe von Beiträgen an, die von der staatlich erzeugten JSON -API abgerufen wurden.

PWA enthält die folgenden Schlüsselelemente:

• Performance -Datei (Manifest.json): Bietet Browserinformationen zu Webanwendungen wie Name, Beschreibung, Symbol, Start -U -URL usw.
• Service Worker: zwischen den Anwendungsschalen (Zeigt die Mindest -HTML, CSS und JavaScript der Benutzeroberfläche an) und proxy alle Netzwerkanforderungen.
• https: PWA muss Dienste über sichere Quellen anbieten.

Verwenden Sie Google Lighthouse für die Überprüfung

Lighthouse ist ein von Google entwickeltes Open -Source -Prüftool, mit dem die Leistung, die Zugänglichkeit und die SEO von Websites und PWAs verbessert werden können.

In der Registerkarte "Audit" von Chrome Developer Tools, Access Lighthouse, geben Sie die PWA -Adresse ein (z. B. https://www.techiediaries.com/unoptimizedpwa/), die Prüfung ausführen und den Bericht anzeigen.

Optimierungsvorschläge werden im Lighthouse -Bericht angegeben, wie z.

CSS -Optimierung: Entfernen Sie nicht verwendete CSS -Regeln

Leuchtturm weist darauf hin, dass 96% der CSS in der Probe PWA nicht genutzt sind. Wir können PurifyCSS verwenden, um diese nicht verwendeten CSS zu entfernen.

purifycss installieren: npm install -g purify-css

purifycss ausführen: purifycss styles/bootstrap.css index.html -o styles/purified.css -i

Blockierungsrendern CSS

Reduzieren

Wir können das kritische CSS unter Verwendung des kritischen CSS -Extraktors (Chromerweiterung) extrahieren und in die Datei idex.html inline investieren.

komprimieren Sie CSS

CSS -Dateien können mit Tools wie CSSNano oder CSSO komprimiert werden.

Installieren von CSSNANO und POSTCSS CLI: npm install cssnano npm install postcss-cli --global

erstellen Sie die Datei postcs.config.js und konfigurieren Sie CSSNano.

Führen Sie den Komprimierungsbefehl aus: postcss styles/bootstrap.css > styles/bootstrap.min.css

spätes Laden von Bootstrap mit JavaScript

Laden Sie CSS -Dateien mit JavaScript am Ende der Seite, um das Blockieren von Rendern zu vermeiden.

optimierte Ergebnisse und andere Tools

Führen Sie das Lighthouse -Audit erneut durch, um die Leistungsverbesserungen zu erkennen.

Andere verfügbare Tools umfassen: CSSO, kritisch, UNCSS, Purgecss usw.

Zusammenfassung

Die PWA -Leistung

kann durch Entfernen von redundanter Code, Inline -Kritischen Ressourcen und Komprimieren von CSS erheblich verbessert werden.

FAQ

Der Artikel enthält auch häufig gestellte Fragen zur CSS -Optimierung und zur PWA -Leistung, die Abdeckung von CSS -Optimierungsstrategien, Leistungsmessmethoden, die Rolle von Dienstangestellten, Bildoptimierung, gemeinsame Fehlervermeidung, PWA -Zugänglichkeit, Suchmaschinenoptimierung und Vergleich zwischen PWA und Vergleich Traditionelle Webanwendungen.

(Hinweis: Da das Bild nicht direkt verarbeitet werden kann, bleibt der Bildpfad unverändert. Bitte stellen Sie sicher, dass der Bildpfad normal angezeigt wird.)

Das obige ist der detaillierte Inhalt vonCSS -Optimierungstools zur Steigerung der PWA -Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!