Fermer

août 23, 2018

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.

  • Un technicien de maintenance . Un fichier JavaScript est utilisé pour mettre en cache le shell de l'application (HTML, CSS et JavaScript minimum requis pour l'affichage de l'interface utilisateur) et traiter toutes les requêtes réseau par proxy.
  • HTTPS .
  • Voici une capture d'écran du shell de l'application:

     Coque de l'application

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

     PWA

    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 :

     Panneau d'audit de Chrome

    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 .

     Audits dans Chrome

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

     Rapport de phare

    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.

       Opportunités de phare

      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é:

       Règles CSS non utilisées

      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.

       CSS purifié

      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 :

       Réduire les feuilles de style de blocage de rendu

      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