Optimisation du site Web pour GooglePage Speed ​​(toutes les fonctionnalités sont prises en compte après sa mise à jour) Partie 1

Cet article sera intéressant pour tous ceux qui ont rencontré toutes sortes de problèmes après la mise à jour de Google PageSpeed ​​et les réclamations des clients ou du patron, pourquoi la balle est tombée ou il y a eu tellement de commentaires. Et aussi à ceux qui font de l'optimisation du site.
Tout d'abord, il convient de mentionner que dans cet article , à mon avis, tout est peint de manière très compétente et accessible.

J'ajouterai moi-même plus de conseils pratiques , et il sera également intéressant d'écouter votre point de vue et de voir vos bonnes pratiques.

Je vais énumérer ce dont je vais parler dans cet article:

1. CSS et JS
   
   • connexion de fichier
   • chargement de bibliothèques
   • astuces
   
   
2. Les polices
   
   • connexion de police
   • afficher les polices pendant le chargement de la page
   
   
3. Les images
   
   • différents formats (jpg, png, webp, base64)
   • sprite

Et si vous êtes resté sur cet article jusqu'à ce moment, alors vous êtes probablement intéressé (ou le bouton "retour" s'est éteint pour vous) Ci-dessous est plus détaillé sur chaque article.

CSS et JS

Js

1. La propriété async pour les scripts de plug-in (sauf jQuery) sera requise. Cela vous évitera certainement les commentaires de GPSpeed ​​sur le chargement de scripts asynchrones.
2. Le conseil est courant, mais il est très judicieux - essayez d'utiliser au minimum des bibliothèques complexes et massives.
3. Il est préférable de télécharger vos paramètres de bibliothèque js (slick, fancybox) ou de petits morceaux de code qui effectuent différentes tâches sur le serveur avec un seul fichier. Dans mon cas, le script pour l'envoi de courrier et le masque pour la saisie et l'animation et tout se trouvent dans le même fichier build.js (auquel j'ai également défini async .
4. Ces conseils sont situationnels, c'est-à-dire, regardez la situation. Si vous avez une sorte de script en cours d'exécution juste après avoir ouvert la page sur son premier écran, alors il sera plus correct de la connecter séparément et de ne pas la donner asynchrone

CSS

1. Ici un peu plus compliqué. Vous devrez ajouter une telle propriété à la balise de lien .
   
   

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css> 

   
   C'est sous cette forme que vos fichiers css ne seront connectés qu'après l'arborescence DOM. En gros, c'est la même async pour .css uniquement
2. Des conseils très importants et efficaces! Il ajoute 5 à 10 points garantis. Vous devez diviser votre main.css en deux fichiers . Dans le premier, seuls les styles sont chargés pour le contenu visible immédiatement après l'ouverture de la page. Il s'agit de la barre supérieure, de l'en-tête, de la première image, du premier formulaire, etc. En général, ce que vous mettez sur le "visage" de votre site. Dans le second, tout le reste est déjà.

Les polices

J'ai découvert une nouvelle propriété css pour les polices

 font-display 

Plus précisément, son paramètre swap , qui, sans attendre le chargement de votre belle et lourde police, affiche le texte dans le navigateur en utilisant la police intégrée au même navigateur (par exemple, sans-serif). Cela supprime immédiatement l'une des erreurs de GPSpeed.

Cela ressemblera à ceci

  @font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } 

Il existe également un tel script (vous devez connecter fontfaceobserver.js pour son fonctionnement):

 <script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script> 

Personnellement, je n'ai pas vraiment aidé, mais vous essayez, peut-être pouvez-vous mieux le contrôler. Après tout, je l'ai trouvé dans le vaste, et les gens ont dit que cela aide vraiment.

Connexion de police

1. Fondamentalement, il existe deux types de connexion - en utilisant un lien (par exemple, pour les polices google, ou localement, sur le serveur. Donc, en ce qui concerne la deuxième méthode, elle peut également être divisée en 2: un fichier css distinct (en utilisant un lien, nous connectons fonts.css ) et directement via le code (via votre style.css).
   Et puisque maintenant nous parlons d'optimiser le site pour GPSpeed, j'étais convaincu qu'il valait mieux connecter les polices via votre fichier css principal.
2. Et une autre astuce qui aide est de mettre les fichiers de police (woff, ttf, etc.) à côté de votre fichier css qui le demande. J'avais auparavant un dossier séparé sur le serveur pour les polices, mais j'ai ensuite déplacé leur vitesse de téléchargement de polices de 2 fois. (selon GPSpeed, il m'a fallu 180 ms pour connecter la police Muller auparavant, maintenant 70 à 90 ms)

Images, photos, etc.

Je garantis pour les 2 conseils suivants, ils m'ont aidé non seulement moi, mais tout le bureau et même mes amis travaillant à distance.

1. Téléchargez absolument toutes les images <img > en utilisant le lazyloading. Cela ressemblera à ceci

 <img class="yourClass lazy" data-src="../images/image.jpg" alt=""/> 

Et n'oubliez pas de connecter lazyload.min.js

2. Si vous avez de nombreux éléments svg sur la page, il est préférable de les ajouter avec du code propre , sans utilisation inutile de la balise img. De plus, svg doit être pressé, par exemple, en utilisant ce site jakearchibald.imtqy.com/svgomg (pas de publicité).

3. Trite, mais n'oubliez pas de presser TOUTES les images sur le site. Même ceux qui pèsent 5 Ko. Bien que ces 3 ko que vous gagnez n'affecteront en rien la vitesse de téléchargement, vous vous débarrasserez de l'erreur sur GPSpeed ​​et vous ajouterez jusqu'à 10 points.

! Maintenant, le problème est les formats d'image. À savoir, nous sommes préoccupés par webp, JPEG 2000, JPEG XR . En effet, c'est maintenant l'une des extensions GPSpeed ​​recommandées. Comme vous le savez, ils ne sont toujours pas pris en charge par certains navigateurs, dont le très populaire Mozila Firefox. Bien qu'ils aient annoncé qu'en mars, ce format sera entièrement pris en charge , nous devons encore attendre un an avant que tous les utilisateurs de ce navigateur soient mis à jour vers la dernière version ... J'ai fouillé à travers un tas de sites, un tas de scripts, mais je n'ai rien trouvé de raisonnable. Alors maintenant, il est temps que je vous pose une question: utilisez-vous le format webp ou tout autre nouveau format d'image? Et comment tu fais?