Top 5 des correctifs de vitesse des pages mobiles

0
41
Top 5 des correctifs de vitesse des pages mobiles


Nous avons abordé dans les articles précédents la vitesse des pages mobiles et les efforts de Google pour favoriser l’indexation mobile. Ayant construit et conseillé de nombreux sites de commerce électronique mobile, j’ai découvert des centaines de tactiques d’optimisation. Dans cet article, je vais partager les cinq principaux problèmes qui ont un impact sur la vitesse des pages mobiles dans mon expérience. Je vais également proposer des conseils pour évaluer et corriger rapidement.

5. Balises de suivi

Une explosion des services publicitaires a conduit les sites à installer des dizaines de pixels, ralentissant les performances. De nombreux sites s’appuient à juste titre sur Google Tag Manager, mais n’optimisent pas les balises de cette plate-forme. En conséquence, Google Lighthouse signalera souvent Tag Manager comme un problème de vitesse de page mobile.

Pour résoudre, évaluez quand vous avez besoin de balises à déclencher. Pour la plupart des sites, les balises ne doivent pas être déclenchées immédiatement. Au lieu de cela, réglez le déclencheur dans Tag Manager pour qu’il se déclenche après le chargement d’une page.

4. Plugins WordPress

Environ 20% de tous les sites Web dans le monde utilisent WordPress. Beaucoup de ces sites ont une douzaine de plugins ou plus pour gérer diverses fonctionnalités. Peu de ces plugins sont optimisés pour la vitesse.

Il est difficile de suggérer comment optimiser chaque plugin. Travaillez avec votre développeur pour en identifier un ou deux qui ralentissent le site. Il s’agit généralement de plugins pour prendre en charge les formulaires ou les commentaires publics sur la page. Concentrez-vous sur quelques plugins qui nuisent à vos performances, puis essayez de les charger après une page est entièrement chargée, un processus appelé «DOM terminé».

3. JavaScript

JavaScript est omniprésent sur Internet. Il gère souvent diverses interactions d’un site et est généralement écrit dans un seul grand bloc. Mais cela taxe les appareils mobiles, qui doivent télécharger et traiter le gros bloc de code lors du premier chargement d’une page – avant qu’un utilisateur puisse interagir avec elle.

D’après mon expérience, dans l’écrasante majorité des sites Web, seuls 5% du code JavaScript téléchargé sont nécessaires pour rendre la page prête pour l’utilisateur. Pourtant, la plupart des utilisateurs mobiles sont obligés d’attendre cinq à 10 secondes pour que l’intégralité du JavaScript soit traité avant de pouvoir avancer.

La solution la plus simple consiste à diviser le JavaScript en petits morceaux. Demandez à votre développeur de fournir au navigateur mobile uniquement la quantité de JavaScript nécessaire pour traiter la page. Reportez ensuite le chargement du reste du JavaScript une fois qu’une page est devenue disponible pour l’utilisateur.

2. Images non optimisées

Les grandes et petites entreprises sont coupables du snafu de vitesse mobile le plus évident: les gros fichiers image.

Le correctif ici est simple. Convertissez toutes vos images au nouveau format WebP. Il rend des images de qualité à la moitié de la taille de fichier des anciens formats.

Au minimum, remplacez les types de fichiers PNG et SVG par des fichiers JPEG. Vous serez peut-être surpris du nombre de fichiers JPEG de 10 Mo qui pèsent sur vos utilisateurs, sans raison valable. Analysez l’intégralité de votre répertoire de fichiers image pour ceux qui ne sont pas des fichiers JPEG. Puis remplacez-les. Le coupable le plus probable? Votre logo!

1. Composants non mis en cache

La plupart des propriétaires de sites croient naturellement que la mise en cache sur un réseau de diffusion de contenu accélérera leurs pages. Ainsi, ils basculent un commutateur «cache» sur leur serveur d’hébergement ou paient un CDN tiers. Mais de grands composants de leurs sites ne sont probablement pas mis en cache. Le résultat est des vitesses de page qui s’améliorent à peine.

Déterminer quels fichiers de votre site ne sont pas mis en cache prend un peu de recherche. Je préfère un outil gratuit de Pingdom, qui scanne votre site et évalue la vitesse de téléchargement de chaque fichier pour chaque URL. Pingdom communique visuellement non seulement les fichiers lents, mais également quelle partie du téléchargement a pris le plus de temps.

Le téléchargement d’un fichier comporte quatre éléments: (i) appeler le serveur, (ii) développer une réponse sécurisée, (iii) attendre une réponse et (iv) recevoir le fichier. La plupart des webmasters pensent que le quatrième élément, la réception du fichier, est la cause de la lenteur des téléchargements. D’après mon expérience, cependant, les trois autres sont souvent les composants les plus lents, et généralement parce que les fichiers ne sont pas mis en cache sur un serveur géographiquement proche de la personne qui télécharge le fichier.

La page d’accueil de Walmart.com est un bon exemple. Le téléchargement de l’un des fichiers HTM de base sur un appareil mobile est très rapide, à peine 7,6 millisecondes. Mais il a fallu 21 fois plus de temps pour qu’une réponse du serveur de Walmart reconnaisse que j’avais demandé le fichier.

Le téléchargement d'un fichier HTM de base sur un appareil mobile sur Walmart.com est très rapide, à peine 7,6 millisecondes.  Mais il a fallu 21 fois plus de temps pour attendre que le serveur de Walmart accuse réception de la demande.  Source: Pingdom.

Le téléchargement d’un fichier HTM de base sur un appareil mobile sur Walmart.com est très rapide, à peine 7,6 millisecondes. Mais il a fallu 21 fois plus de temps pour attendre que le serveur de Walmart accuse réception de la demande. Cliquez sur l’image pour agrandir. Source: Pingdom.

En creusant un peu plus profondément, je peux voir que le fichier a bien été mis en cache. Cependant, le cookie n’a pas été correctement configuré pour ne pas stocker le fichier. Voir la ligne ci-dessous pour “cache-control” défini sur “no-store”.

Lorsque j’ai rapidement signalé cela à Walmart (mon ancien employeur), le personnel s’est rendu compte de l’erreur et a rapidement activé la mise en cache pour de nombreux fichiers mal définis. Vous pouvez apporter les mêmes modifications dans les paramètres de votre CDN ou en contactant l’hôte de votre domaine. Dans WordPress, un plugin peut rapidement configurer votre cache.

La réparation du cache sur la page d'accueil de Walmart a considérablement amélioré la vitesse de la page.  <em> Cliquez sur l’image pour l’agrandir.  Source: Pingdom. </em>” width=”1200″ height=”793″ srcset=”http://www.he-accelerator.org/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a.jpg 1200w, http://www.he-accelerator.org/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-300×198.jpg 300w, http://www.he-accelerator.org/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-570×377.jpg 570w, http://www.he-accelerator.org/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-768×508.jpg 768w, http://www.he-accelerator.org/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-150×99.jpg 150w, http://www.he-accelerator.org/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-500×330.jpg 500w” sizes=”(max-width: 1200px) 100vw, 1200px”/></p>
<p id=La réparation du cache sur la page d’accueil de Walmart a considérablement amélioré la vitesse de la page. Cliquez sur l’image pour agrandir. Source: Pingdom.



Leave a reply

dix-sept + huit =