Outils d'optimisation CSS pour stimuler les performances PWA –

Lorsque vous stylisez des sites Web ou des PWA avec CSS, vous devez analyser la manière dont les ressources CSS affecteront les performances. Dans ce didacticiel, nous utiliserons divers outils et techniques connexes pour créer une meilleure PWA en nous concentrant sur l’optimisation CSS. Plus précisément, nous supprimerons le code CSS non utilisé, alignerons le chemin critique CSS et minimiserons le code résultant.

Les techniques peuvent également être utilisées pour améliorer les performances des sites Web et des applications en général. Nous allons nous concentrer sur l'optimisation CSS pour les PWA, car ils doivent être rapides et conviviaux sur les périphériques utilisateur.

Les applications Web progressives (PWA) sont des expériences Web qui offrent le meilleur des deux mondes: applications mobiles natives ) et des applications Web (accessibles à partir d’URL publiques). Les utilisateurs peuvent commencer à utiliser l'application directement depuis leur navigateur Web sans attendre le téléchargement, l'installation ou l'espace supplémentaire requis dans l'appareil.

Les opérateurs et la mise en cache permettent à l'application de fonctionner hors connexion et lorsque la connectivité réseau est mauvaise. Au fil du temps, l'application pourrait devenir plus rapide à mesure que davantage d'éléments sont mis en cache localement. Les PWA peuvent également être installées en tant qu'icône sur l'écran d'accueil et être lancées en plein écran avec un écran de démarrage initial.

La PWA de démonstration à auditer

Avant d'apprendre à auditer une PWA pour tout problème CSS, code d'un site web simple avec des fonctionnalités PWA de ce dépôt GitHub . La PWA utilise une version non modifiée de Bootstrap v4 pour le style CSS et affiche un ensemble de publications extraites d'une API JSON générée statiquement . Vous pouvez également utiliser la version hébergée de cette démonstration car apprendre à construire une PWA dépasse le cadre de ce didacticiel.

Les PWA sont simplement des applications Web avec des fonctionnalités supplémentaires, y compris les éléments suivants: [19659008] Un fichier manifeste . Un fichier JSON fournit au navigateur des informations sur l'application Web, telles que le nom, la description, les icônes, l'URL de démarrage, les facteurs d'affichage, etc.

Voici une capture d'écran du shell de l'application:

Une capture d'écran de l'application avec les données:

Audit avec le phare de Google

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

Lighthouse est accessible depuis l'onglet Audit de Chrome DevTools, sous forme de module Node.js et un outil CLI. Il prend une URL et exécute une série d'audits pour générer un rapport avec des suggestions d'optimisation.

Vous pouvez appliquer différentes techniques manuellement ou à l'aide d'outils. Cet article décrit comment de tels outils peuvent être utilisés pour supprimer des styles redondants, extraire le CSS critique ci-dessus, charger le CSS restant avec JavaScript et réduire le code résultant.

Lancer Chrome, visitez l'adresse PWA https://www.techiediaries.com/unoptimizedpwa/ et ouvrir Developer Tools ( CTRL-Shift-I ). Dans les outils de développement, cliquez sur le panneau Audits :

Cliquez ensuite sur Effectuer un audit … . Une boîte de dialogue vous demandera les types d'audit que vous souhaitez effectuer. Gardez tous les types sélectionnés et cliquez sur le bouton Exécuter l'audit .

Attendez que Lighthouse termine le processus d'audit et générez un rapport:

Les scores sont calculés dans un environnement simulé. Il est peu probable que vous obteniez les mêmes résultats sur votre ordinateur car ils dépendent des capacités du matériel et du réseau.

À partir du rapport, vous pouvez voir un scénario qui montre visuellement comment la page est chargée. Les premières peintures significatives First Interactive et Interactive interactives sont des points-clés décrivant la vitesse de chargement de la page. Notre objectif est d’optimiser ces mesures conformément au Critical Rendering Path .

Critical Rendering Path

Le chemin de rendu critique représente les étapes que le navigateur doit suivre avant de pouvoir afficher une vue de page initiale (le zone visible de la page ou la zone "au-dessus du pli"). Lorsque vous visitez une URL, le navigateur:

• commence à télécharger le code HTML qui est analysé au fur et à mesure qu'il diffuse
• identifie et télécharge des éléments externes tels que CSS, JavaScript, polices et images
• . 19659011] Le téléchargement et l'analyse des actifs peuvent être effectués en parallèle pour des éléments tels que des images. Cependant, CSS et JavaScript bloquent le rendu: le navigateur interrompt le traitement jusqu'à ce que le fichier soit téléchargé et analysé. Cela est nécessaire car les navigateurs sont à thread unique et que tout peut se produire. Par exemple, la page redirige vers une autre URL ou modifie les styles de présentation.

  Les performances de la page devraient être améliorées si le nombre d'éléments de blocage de rendu est réduit.

  Optimisation CSS à l'aide des opportunités de phare

  demande dans la section Opportunités du rapport. Il y a trois suggestions pour améliorer les performances:

  • Réduire le blocage du CSS
  • éliminer les règles CSS inutilisées
  • Minify CSS.

  

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

  Commençons par la deuxième opportunité Lighthouse, qui concerne les règles CSS non utilisées. Développer le Règles CSS non utilisées opportunité:

  

  Lighthouse estime que 96% du CSS du fichier bootstrap.css est inutilisé par l'application. Si nous éliminons les CSS non utilisés, l'activité réseau sera réduite en conséquence.

  Tous les outils décrits ici peuvent être utilisés dans le cadre d'un système de génération tel que webpack, Gulp ou Grunt, mais ce tutoriel les utilise sur la ligne de commande. Pour éliminer les styles CSS non utilisés, nous utiliserons PurifyCSS . Assurez-vous d'avoir installé Node.js sur votre ordinateur, puis installez l'outil globalement à l'aide de npm :

   $ npm install -g purify-css
  

  Ensuite, assurez-vous d'être dans votre dossier unoptimizedpwa et exécutez la commande:

   $ purifycss styles / bootstrap.css index.html -o styles / purified.css -i
  

  • Le premier argument est le fichier CSS à purifier .
  • Le deuxième argument est le fichier HTML pour vérifier les styles utilisés.
  • L'option -o spécifie le chemin d'accès et nom du fichier de résultat à créer.
  • L'option -i indique à l'outil d'afficher des informations sur la quantité de CSS supprimée.

  (An -m L'option indique à l'outil de minimiser le CSS purifié, mais nous utiliserons un autre outil pour la minification ci-dessous.)

  Dans ce cas, nous voyons PurifyCSS réduit la taille du fichier de ~ 84.5% . Ce n'est pas tout à fait le 96% identifié par Lighthouse, mais les outils utilisent des techniques différentes.

  

  Vous pouvez également utiliser d'autres outils pour supprimer CSS non utilisés tels que uncss et vous pouvez lire cet article par Addy Osmani pour plus d'informations.

  Vous pouvez maintenant supprimer le fichier original styles / bootstrap.css et renommer styles / purified. css à styles / bootstrap.css .

  Réduire le CSS par blocage du rendu

  Si nous développons l'opportunité Réduire les feuilles de style de blocage du rendu nous pouvons voir plus de détails :

  

  Le fichier bootstrap.css retarde de 678 ms la première peinture de notre application. Tous les styles ne sont pas nécessaires pour un rendu au-dessus du pli, nous pouvons donc procéder comme suit:

  1. Extraire le CSS critique de bootstrap.css et l'inclure dans le index.html fichier en utilisant une balise
. Cela réduit le nombre de requêtes HTTP et réduit le code à analyser pour le navigateur.
  2. Distribuez les styles non critiques restants après le rendu de la partie supérieure de la page.

  Nous utiliserons Critical CSS Extractor une extension Chrome pour extraire les règles CSS critiques pour la page en cours. Une fois que vous avez installé cette extension, vous verrez un nouveau panneau - Critical CSS - dans DevTools.

  Chrome fait le travail difficile pour nous. Ouvrez à nouveau DevTools avec le site toujours actif et sélectionnez l'onglet Critical CSS . Cliquez sur le bouton Extract Critical CSS pour télécharger le fichier CSS critique:

  

  Ouvrez index.html et ajoutez le contenu. de ce fichier CSS critique dans une balise

• csso - un minificateur CSS à optimisations structurelles.

Pour utiliser cssnano de unoptimizedpwa ]exécutez la commande suivante pour installer cssnano localement:

 npm install cssnano

Ensuite, installez la CLI PostCSS en utilisant globalement:

 npm install postcss-cli --global

Ajoutez un nouveau fichier nommé postcss.config.js avec les paramètres de configuration cssnano suivants (par défaut):

 module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

Le guide cssnano fournit davantage d'informations sur les paramètres prédéfinis de configuration.

Réduisez le fichier bootstrap.css en exécutant:

 styles postcss / bootstrap.css> styles / bootstrap .min.css

Report du chargement de Bootstrap avec JavaScript

Pour empêcher le blocage du rendu par le fichier CSS, il est possible de le charger à la fin de la page à l'aide de JavaScript une fois le DOM prêt. Ajoutez l'extrait de code JavaScript suivant à index.html juste avant la balise de fermeture:

Si vous inspectez votre DOM après le chargement de la page, vous trouverez la balise insérée dans la balise :

Vérification des optimisations

exécuter à nouveau Lighthouse contre la PWA optimisée . Les résultats:

Le score de performance s'est amélioré.

Lighthouse rapporte que d'autres règles CSS non utilisées pourraient être supprimées. Cela pourrait se produire parce que PurifyCSS ne supprime pas les sélecteurs nommés similaires .

La PWA optimisée finale est disponible à partir de ce référentiel GitHub .

nous avons utilisé dans ce tutoriel. Voici une liste d’outils bien connus pour purifier, minimiser et extraire des CSS critiques:

• csso - un minificateur CSS à optimisations structurelles
• critical un outil de Addy Osmani pour extraire et incorporer des CSS critiques dans les pages HTML
• uncss un outil pour supprimer les CSS inutilisés de vos feuilles de style sur plusieurs fichiers et prendre en charge les CSS injectés Javascript [19659030] purgecss un outil pour supprimer les CSS non utilisés.

Conclusion

Dans ce didacticiel, nous avons opté pour l'optimisation CSS en supprimant le code redondant, Par conséquent, le fichier PWA sera téléchargé plus rapidement et rendu plus rapidement. Des outils et des techniques similaires peuvent être utilisés sur vos sites et applications pour optimiser les performances CSS.

Ahmed est un entrepreneur, développeur, spécialiste du marketing numérique et blogueur. Il écrit sur le développement de logiciels et de sites Web, les astuces pour gagner de l'argent, le référencement et plus encore. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .