Astuces simples et utiles qui vous permettront de maximiser votre site Web sans avoir à fouiller dans les métriques Google PageSpeed ​​et Lighthouse.
Javascript- Au lieu de JavaScript, essayez d'utiliser les balises HTML5 plus souvent: <type d'entrée = date>, <type d'entrée = heure>, Détails / Résumé , etc.
Nous oublions très souvent ou ne connaissons même pas les solutions prêtes à l'emploi intégrées aux navigateurs qui fonctionneront mieux sur différents appareils et qui ne nécessitent pas de code JavaScript supplémentaire. - Utilisez la minification du code JavaScript.
- Essayez de mettre tout votre code JavaScript dans le pied de page ou le chargement retardé, et moins il y a de JavaScript dans <head>, meilleures sont les performances de Google PageSpeed.
- <script src = "file-path"> nécessite un accès supplémentaire au serveur, rappelez-vous ceci.
Si au lieu d'un fichier JavaScript, insérez le contenu du fichier dans le pied de page:
<script> </script>
Ensuite, le premier téléchargement sera plus rapide, mais il n'y aura pas de mise en cache du fichier JavaScript.
Chargement retardé- Utilisez le chargement paresseux (différé) pour les images, iframe, vidéo, audio, javascript et autres objets similaires. Il doit être inclus pour les éléments qui se trouvent dans des fenêtres contextuelles ou sur le deuxième écran et les écrans suivants de la page.
À ces fins, il existe de nombreuses bibliothèques: lazyload, lazysizes, autoload, etc. - Vous pouvez utiliser le chargement paresseux natif dans Chrome.
- VK propose de placer une connexion de code JavaScript dans <head> pour que leur widget de commentaire fonctionne, mais cela réduit Google PageSpeed ​​et la vitesse de chargement des pages.
Au lieu du code que VK propose:
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
Collez le code légèrement modifié sous le téléchargement différé:
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
En conséquence, nous obtenons un code qui ne se chargera que lorsque l'écran défilera jusqu'au widget.
Le code de carte que Google propose d'intégrer sur le site:
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Si la carte est en pop-up ou loin en pied de page, une personne visitant votre page commencera immédiatement à charger beaucoup de superflu à partir de ce cadre et la vitesse de chargement d'une telle page sera très lente, Google PageSpeed ​​vous donnera un moins et un gros!
Collez le code légèrement modifié sous le téléchargement différé:
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Tout se résume à ne pas donner au navigateur src = "" tout de suite, mais seulement quand une personne en a vraiment besoin. Et donc avec tous les objets!
Jquery- Si possible, n'utilisez pas Jquery dans vos projets et cela augmentera considérablement la vitesse de votre site, mais si vous l'utilisez déjà , remplacez-le progressivement par du JavaScript natif pur.
- Si vous connectez Jquery à <head>, cela bloque l'affichage de la page, car le navigateur attend jusqu'à ce que tout ce qui est dans <head> soit chargé, et alors seulement affiche la page. Mais comme la bibliothèque elle-même est petite et Internet est rapide pour tout le monde, cela a peu d'effet sur la vitesse; Google, si elle abaisse la note, c'est environ 0,5, bien qu'avant j'ai tiré 10 ou 20 points pour ça ...
- Tout le code jquery que vous avez écrit ou les bibliothèques jquery que vous utilisez sont mieux placés dans le pied de page du site, en raison du blocage de l'affichage. Si vous ne pouvez pas le transférer dans le pied de page, vous devriez peut-être utiliser l'exécution de code retardée, un article sur ce sujet: utiliser en toute sécurité .ready () avant d'inclure jQuery .
Les polices- Polices Google
- Si Google connecte la police depuis longtemps, assurez-vous de la reconnecter, car la présence de & display = swap dans l'URL est importante - c'est une nouvelle option qui affecte Google PageSpeed ​​et elle vous permet d'afficher du texte sur la page avant de charger la police ... pas toujours belle, mais elle augmente vitesse d'affichage du site ... et affecte Google PageSpeed
- S'il est possible de remplacer les polices Google par vos propres polices, faites-le, il est préférable que les polices soient sur votre serveur, cela augmente également la vitesse.
- Lorsque vous choisissez une police sur Google Fonts, essayez de choisir le minimum d'options, choisissez uniquement ce dont vous avez besoin et si vous n'utilisez pas une police inclinée ou une épaisseur de 200 sur le site, ne sélectionnez pas cette option dans les paramètres, car cela affecterait la vitesse de téléchargement.
- Polices personnalisées
- Vérifiez l'affichage des polices de style CSS: swap; dans vos polices, Google PageSpeed ​​y prête attention et sous-estime si ce style n'en vaut pas la peine:
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
- Si vous connectez des polices via une feuille de style distincte, cela affecte l'heure du premier rendu et réduit les performances de Google PageSpeed, il vaut mieux ne pas le faire:
<link href="/fonts.css" rel="stylesheet">
Si vous insérez une connexion de police dans <head> via la balise <style>, et non via <link>, cela améliorera la vitesse de téléchargement et les performances de Google PageSpeed, car le navigateur n'aura pas besoin d'accéder séparément à votre feuille de style:
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
- Si possible, supprimez toutes les choses inutiles que vous n'utilisez pas de vos fichiers de police afin d'augmenter la vitesse de téléchargement.
- Vous pouvez effectuer un chargement de police en deux étapes: Développement d'une stratégie de chargement de police robuste pour les astuces CSS
CSS- Essayez de vous débarrasser de l'excès de code CSS pour les anciens navigateurs, y compris les préfixes -moz- -o- -ms- -webkit-
- Essayez de ne pas charger les styles qui ne sont pas utilisés sur cette page, mais qui sont utilisés sur d'autres pages du site.
- Si possible, il vaut la peine de charger des morceaux de code CSS et HTML par un chargement différé.
- Charger des styles avec <link href = 'st.css' rel = 'stylesheet'> ralentit le chargement de la première page et son rendu, mais permet au navigateur de mettre ce fichier en cache.
Si vous avez des styles uniques pour chaque page ou plus important pour vous que le premier chargement de page soit un peu plus rapide, alors nous insérons la balise de style au lieu du fichier:
<style> </style>
- Utilisez la minification CSS, comme Cssresizer ou d'autres outils similaires.
HTML- Plus il y a de balises HTML sur la page, plus le navigateur a besoin de ressources pour afficher la page, et cela affecte les performances de Google PageSpeed, mais uniquement si votre page est trop surchargée de balises.
- Évitez de surcharger les balises HTML; Google PageSpeed ​​y prête également attention.
- Cela vaut la peine de nettoyer votre code HTML du code pour les navigateurs plus anciens, car généralement, c'est un code qui crée un grand nombre de balises supplémentaires et imbriquées.
- Le nombre de balises et d'imbrication affecte particulièrement fortement Google PageSpeed ​​pour mobile.
Les images- Utilisez la balise <picture> pour utiliser des formats d'image modernes (JPEG 2000, JPEG XR et WebP). Google PageSpeed ​​y prête attention si vous n'avez pas de chargement d'images paresseux.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
Vous pouvez également utiliser des supports et remplacer différentes images par différentes résolutions et différentes densités de pixels.
<source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">
Ceci est utile pour les photos et les vidéos.
Moins: vous avez besoin de beaucoup d'espace, car vous devrez stocker différents formats d'image (vidéo) et sous différentes résolutions. - Utilisez le chargement paresseux pour toutes les images qui se trouvent dans des fenêtres contextuelles ou sur le deuxième écran et les écrans suivants de la page.
- Utilisez une compression maximale des images, Google PageSpeed ​​attire également l'attention sur ce point. Il existe de nombreux outils de compression, un par exemple: compresseur.io
Paramètres du serveur- Activez la mise en cache des fichiers statiques (polices, scripts, images, CSS, etc.), tout en définissant l'année de mise en cache, sinon Google ne jure que.
- Activez la compression gzip.
- Utilisez les en-tĂŞtes HTTP Last-Modified et If-Modified-Since pour mettre en cache les pages.
La communication- Les résultats dépendent fortement de la distance de votre serveur par rapport à vous. Si vous êtes à Hawaï et que le serveur est à Moscou, les résultats pour vous seront désastreux.
- Les résultats dépendent de votre serveur et de votre ordinateur et si pendant les tests le serveur ou l'ordinateur était surchargé de quelque chose, le résultat sera mauvais.
ConclusionIl est impossible de presser PageSpeed ​​108 points ou plus :)
Il est inutile de serrer mĂŞme 100 points sous le mobile. Nous devons viser 100 et ne pas tomber dans la paranoĂŻa! Ce n'est lĂ qu'un des nombreux indicateurs importants pour le site.
Vous pouvez voir
un exemple de page oĂą les indicateurs pour les mobiles sont 97-98 et 100 pour un ordinateur.
Sur cette page, il y a 2 vidéos YouTube dans des popups et la vidéo n'est activée que lorsque la popup est ouverte.
Toutes les images sont placées en chargement paresseux.
Tout le JavaScript est rendu Ă partir de <head> dans le pied de page de la page.
Mais en même temps, les éléments suivants sont connectés à <head>: les compteurs Jquery, GoogleFonts et Yandex (Google).
Les styles sont insérés dans la <style> balise des codes de style </style>.
<photo> n'est pas utilisé sur cette page.
Il y a un certain nombre de sections sur la page qui sont présentes sur la page, mais qui ne sont accessibles que par lien direct vers les clients, elles devront être chargées au besoin, ce qui réduira le nombre de code html et css.
Merci de votre attention!