Top 5 des pages de téléphonie mobile sur la vitesse

0
113

Nous avons abordé dans les articles précédents la vitesse des pages mobiles et les efforts de Google pour faire passer le mobile en premier dans l’indexation. 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 vous faire part des cinq principaux problèmes qui, selon mon expérience, ont une incidence sur la vitesse des pages mobiles. J’y propose également des conseils pour évaluer et corriger rapidement ces problèmes.

5. Suivi des balises

Une explosion des services publicitaires a conduit les sites à installer des dizaines de pixels, ce qui a ralenti les performances. De nombreux sites s’appuient à juste titre sur Google Tag Manager mais ne parviennent pas à optimiser les balises au sein de cette plateforme. Par conséquent, Google Lighthouse signale souvent le Tag Manager comme un problème de vitesse de page mobile.

Pour résoudre, évaluez quand vous avez besoin d’étiquettes pour tirer. Pour la plupart des sites, les balises ne doivent pas se déclencher immédiatement. Ajustez plutôt le déclencheur dans le gestionnaire de balises pour qu’il se déclenche après le chargement d’une page.

4. Plugins WordPress

Environ 20 % des sites web dans le monde utilisent WordPress. Beaucoup de ces sites disposent d’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 destinés à prendre en charge les formulaires ou les commentaires publics sur les pages. 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 complet ».

3. JavaScript

Le JavaScript est omniprésent sur Internet. Il gère souvent les différentes interactions d’un site et est généralement écrit en un seul gros bloc. Mais il 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 la grande majorité des sites web, seuls 5 % du code JavaScript téléchargé sont nécessaires pour préparer la page pour l’utilisateur. Pourtant, la plupart des utilisateurs de téléphones portables sont obligés d’attendre cinq à dix secondes pour que l’intégralité du JavaScript soit traitée avant de pouvoir avancer.

La solution la plus simple consiste à décomposer le JavaScript en petits morceaux. Demandez à votre développeur de ne transmettre au navigateur mobile que la quantité de JavaScript nécessaire pour traiter la page. Ensuite, reportez le reste du JavaScript à charger après qu’une page soit disponible pour l’utilisateur.

2. Images non optimisées

Les petites et grandes entreprises sont coupables de la pagaille la plus évidente en matière de vitesse mobile : les gros fichiers d’images.

La solution est simple. Convertissez toutes vos images au nouveau format WebP. Il rend des images de qualité à la moitié de la taille des fichiers des anciens formats.

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

1. Composantes non cachées

La plupart des propriétaires de sites pensent, à juste titre, que la mise en cache sur un réseau de diffusion de contenu accélérera leurs pages. Ils peuvent donc soit activer un commutateur de « cache » sur leur serveur d’hébergement, soit payer un CDN tiers. Mais il est probable que de grandes parties de leurs sites ne soient pas mises en cache. Il en résulte des vitesses de pages qui s’améliorent à peine.

Déterminer quels fichiers de votre site ne sont pas mis en cache demande pas mal de recherches. 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 aussi la partie du téléchargement qui a pris le plus de temps.

Le téléchargement d’un fichier comporte quatre éléments : (i) appeler le serveur, (ii) élaborer 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. Selon mon expérience, cependant, les trois autres éléments sont souvent les plus lents, et ce 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 en est un bon exemple. Le téléchargement d’un des fichiers HTM de base sur un appareil mobile est très rapide, 7,6 millisecondes seulement. 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 Walmart.com est très rapide, seulement 7,6 millisecondes. Mais il a fallu 21 fois plus de temps à un appareil mobile pour attendre que le serveur de Walmart accuse réception de la demande. <em>Cliquez sur l’image pour l’agrandir. Source : Royaume de l’épingle. </em> » width= »1000″ height= »526″ srcset= »https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-1.jpg 1000w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-1-300×158.jpg 300w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-1-570×300.jpg 570w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-1-768×404.jpg 768w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-1-150×79.jpg 150w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-1-500×263.jpg 500w » sizes= »(max-width : 1000px) 100vw, 1000px »/></p>
<p id=Le téléchargement d’un fichier HTM de base sur Walmart.com est très rapide, à peine 7,6 millisecondes. Mais il a fallu 21 fois plus de temps à un appareil mobile pour attendre que le serveur de Walmart accuse réception de la demande. Cliquez sur l’image pour l’agrandir. Source : Royaume de l’épingle.

En creusant un peu plus, je peux voir que le fichier a bien été mis en cache. Cependant, le cookie a été mal configuré pour ne pas stocker le fichier. Voir la ligne ci-dessous pour le « contrôle du cache » réglé sur « pas de stockage ».

Lorsque je l’ai rapidement signalé à 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 paramétrés. Vous pouvez effectuer les mêmes modifications dans les paramètres de votre CDN ou en contactant votre hôte de domaine. Dans WordPress, un plugin permet de configurer rapidement votre cache.

La réparation du cache de 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 : Royaume de l’épingle.</em> » width= »1200″ height= »793″ srcset= »https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a.jpg 1200w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-300×198.jpg 300w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-570×377.jpg 570w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-768×508.jpg 768w, https://www.practicalecommerce.com/wp-content/uploads/2020/06/Mobile-Page-Speed-2-a-150×99.jpg 150w, https://www.practicalecommerce.com/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 de la page d’accueil de Walmart a permis d’améliorer considérablement la vitesse de la page. Cliquez sur l’image pour l’agrandir. Source : Royaume de l’épingle.