Outils d'optimisation CSS pour augmenter les performances PWA

Amélioration des performances PWA: Guide d'optimisation CSS

Cet article explorera comment améliorer considérablement les performances des applications Web progressives (PWA) grâce à l'optimisation du CSS. Nous apprendrons à supprimer le CSS inutilisé, à en ligne de chemin critique CSS et à compresser le code final. Ces technologies conviennent également aux sites Web et applications ordinaires.

Points clés:

• L'optimisation du CSS peut améliorer considérablement les performances de PWA en supprimant le CSS inutilisé, le chemin CSS critique en ligne et la compression du code.
• Le phare de l'outil d'audit open source Google peut aider à identifier les opportunités d'optimisation CSS.
• Les outils tels que PurifyCSS peuvent supprimer les styles CSS inutilisés et réduire la taille des fichiers CSS. Des outils tels que l'extracteur CSS critique peuvent extraire et alimenter les règles CSS clés, réduisant le nombre de demandes HTTP et la quantité de code d'analyse du navigateur.
Les fichiers
• CSS peuvent être empêchés de bloquer le rendu en chargeant des fichiers CSS à la fin de la page à l'aide de JavaScript après que Dom est prêt.

Exemple PWA et audit

Pour la démonstration, nous utiliserons un exemple PWA simple (le code est disponible dans le référentiel GitHub, ou accédera directement à la version en ligne). Ce PWA utilise Bootstrap V4 non compressé pour le style CSS et affiche un ensemble de publications obtenues à partir de l'API JSON générée statiquement.

PWA contient les éléments clés suivants:

• Fichier de performances (manifest.json): fournit des informations sur le navigateur sur les applications Web, telles que le nom, la description, l'icône, l'URL de démarrage, etc.
• SERVICE SERVICE: cache le shell d'application (affiche le HTML, CSS et JavaScript minimum de l'interface utilisateur) et proxys toutes les demandes du réseau.
• HTTPS: PWA doit fournir des services grâce à des sources sécurisées.

Utilisez Google Lighthouse pour la revue

Lighthouse est un outil d'audit open source développé par Google qui peut être utilisé pour améliorer les performances, l'accessibilité et le référencement des sites Web et des PWA.

Dans l'onglet "Audit" des outils de développeur Chrome, accédez au phare, entrez l'adresse PWA (par exemple: https://www.techiediaries.com/unoptimizedpwa/), exécutez l'audit et affichez le rapport.

Des suggestions d'optimisation sont fournies dans le rapport du phare, telles que la réduction du blocage de rendu CSS, l'élimination des règles CSS inutilisées et la compression du CSS.

Optimisation CSS: supprimez les règles CSS inutilisées

Lighthouse souligne que 96% des CS dans l'échantillon PWA ne sont pas utilisés. Nous pouvons utiliser PurifyCSS pour éliminer ces CSS inutilisés.

Installation de purifycss: npm install -g purify-css

Exécutez PurifyCss: purifycss styles/bootstrap.css index.html -o styles/purified.css -i

Réduire le blocage de blocage CSS

Nous pouvons extraire le CSS critique à l'aide de l'extracteur CSS critique (extension Chrome) et l'installer dans le fichier index.html.

Compress CSS

Les fichiers

CSS peuvent être compressés à l'aide d'outils tels que CSSNANO ou CSSO.

Installation de CSSNano et PostCSS CLI: npm install cssnano npm install postcss-cli --global

Créer un fichier postcss.config.js et configurer cssnano.

Exécutez la commande de compression: postcss styles/bootstrap.css > styles/bootstrap.min.css

Chargement tardif de bootstrap en utilisant javascript

Chargez des fichiers CSS à l'aide de JavaScript à la fin de la page pour éviter de bloquer le rendu.

Résultats optimisés et autres outils

Exécutez à nouveau l'audit du phare pour voir les améliorations des performances.

Les autres outils disponibles comprennent: CSSO, Critical, UNCSS, Purgecss, etc.

Résumé

Les performances

PWA peuvent être considérablement améliorées en supprimant le code redondant, en lignes de ressources critiques et en compressant le CSS.

FAQ

L'article comprend également des questions fréquemment posées sur l'optimisation du CSS et les performances PWA, couvrant les stratégies d'optimisation CSS, les méthodes de mesure du rendement, le rôle des travailleurs de service, l'optimisation de l'image, l'évitement des erreurs courantes, l'accessibilité PWA, l'optimisation des moteurs de recherche et la comparaison entre PWA et applications Web traditionnelles.

(Remarque: Étant donné que l'image ne peut pas être traitée directement, le chemin d'image reste inchangé. Veuillez vous assurer que le chemin d'image est correct à afficher normalement.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!