Amélioration de la webperf mobile

optimisation mobile seo
5 (100%) 11 votes

La vitesse de chargement serait la première qualité recherchée par les mobinautes (à 41%) et ils seraient 74% à abandonner leur navigation mobile, sur un site qui mettrait plus de 5 secondes à s’afficher, selon une étude menée par Mobilosoft.

Cela tombe bien, car la vitesse de chargement est également un critère pour avoir un meilleur SEO: En 2015, ce fut l’arrivée du mobile friendly dans l’algorithme de Google.



Pourquoi optimiser les performances mobiles de son site?

Il peut être difficile de consulter et d’utiliser la version classique d’un site sur un appareil mobile. Si la version n’est pas adaptée aux mobiles, le mobinaute doit pincer l’écran ou faire un zoom avant pour pouvoir lire le contenu. C’est une expérience frustrante pour les mobinautes, susceptible de les inciter à quitter le site. Au contraire, la version adaptée aux mobiles est facilement lisible et utilisable immédiatement.

 La compatibilité mobile est cruciale pour votre activité professionnelle et elle le restera. Assurez-vous que les mobinautes peuvent profiter pleinement des fonctionnalités de votre site.


Quelques chiffres significatifs

  • La moitié des recherches Google sont faites sur le moteur mobile selon Google Webmaster Central.
  • Les ventes via les mobiles sont en hausse de 60% en 2014 et représente 4% du CA du e-commerce (source: Fevad)
  • +68% en moyenne pour le trafic des sites mobiles vs +45% pour les applis contre -6,8% pour les sites web, en juin 2014 (source: AT internet).
  • En France, 76,38% des visiteurs proviennent d’un ordinateurs, 16,02% d’un mobile, et 7,39% d’une tablette.  (source: StatCounter).


Les notions et indicateurs des performances mobiles

Le TTFB

Le time to first byte c’est le temps qui s’écoule entre le moment où l’utilisateur clique sur un site (pour le consulter) et le moment où le serveur renvoie les premiers octets de la page HTML à son navigateur.
Plus il faut de temps pour obtenir ces données, plus il faut du temps pour afficher votre page. En général, tout ce qui est inférieur à 100ms est excellent. Google page speed recommande un temps de réponse du serveur inférieur à 200ms.

Le Start Render

Le Start Render (ou Début de l’affichage) indique le temps nécessaire à ce qu’un premier élément s’affiche sur la page, quelque soit sa taille ou son importance pour l’internaute.
Cela peut-être une couleur de fond, un texte ou autre, mais dans tous les cas, un signe important est envoyé au visiteur : la page est bien en train de s’afficher, des opérations sont en cours et le reste du contenu devrait arriver.

Visually Complete

Le Visually complete (ou affichage complet), s’insère dans la continuité du start render.
Il vous permet de voir votre application web à travers les yeux de vos utilisateurs. Cette note permet de voir exactement combien de temps il faut à votre page Web pour devenir Visuellement complète.
Les utilisateurs perçoivent la page comme étant prête lorsque tout est visible dans leur “fenêtre d’affichage” – pas toutes les autres choses sur la page…



Le Speed Index

Bien que les Start Render et Visually Complete soient sensiblement identiques,  il est très juste de penser que la première version est bien meilleure en terme d’expérience utilisateur. Ces 2 temps sont importants, mais il manque une information majeure : comment se comporte la page durant la période qui les sépare ? Est-ce que la majorité des contenus est affichée juste après le Start Render, ou bien au contraire, est-elle affichée juste avant le Visually Complete ?
Le speedindex est un indice qui va nous permettre de résumer ces comportements.

Il met en lumière le rythme auquel les élements au-dessus de la ligne de flottaison s’affichent (comme le démontre l’image ci-dessous).
Il s’exprime via un score global : plus le score est bas, plus la page s’est affichée rapidement


Les outils pour analyser les performances



Mesure avec WebPageTest

WebPageTest est idéal pour mesurer votre TTFB. Comme vous pouvez le voir dans notre test ci-dessous, ce site a été mesuré à 0.256s ou 256 ms de TTFB.




Mesure avec Pingdom

Chrome et WebPageTest l’appellent TTFB. Cependant, si vous utilisez Pingdom, il s’agit en fait d’un temps d’attente. Assurez-vous également de consulter notre guide détaillé sur la façon d’utiliser Pingdom.



Mesure avec GTmetrix

Dans GTmetrix, tout comme dans Pingdom, le TTFB est appelé temps d’attente. Assurez-vous également de consulter notre guide détaillé sur la façon d’utiliser GTmetrix.



Mesure avec Analytics

Même Google Analytics a une section pour voir votre temps de réponse moyen. Cliquez simplement sur « Comportement > Vitesse du site > Aperçu ».


Il existe également d’autres outils de mesure du TTFB, tels que le Sucuri Performance Tool et ByteCheck.



Les manière d’améliorer les performances web dans la majorité des cas.

 Les images

C’est souvent le premier point à travailler. C’est l’élément le plus consommateur de ressources.  Gtmetrix les fourni en optimisées.

 Les Etags 

Le principe d’un ETag est d’associer un identifiant à une ressource HTTP, typiquement une URL. Quand le client va interroger le serveur il va demander l’URL en fournissant également le ETag qu’il possède. Le serveur va vérifier que le ETag fourni correspond toujours à la ressource actuelle. Si c’est le cas, il va simplement renvoyer un code 304 pour lui signifier qu’il peut utiliser sa version en cache car elle est à jour.

Dans le fichier .htacess, ajouter les lignes suivantes:

 Header unset ETag
FileETag none

Compression Gzip 

Le GZIP est une application web de compression et de décompression de fichiers. Si la compression GZIP est activée sur votre serveur, les fichiers nécessaires à l’affichage de votre site internet, tels que les fichiers CSS, JavaScript, textes et autres, seront compressés avant d’être envoyé à un internaute.
La compression est le fait d’encoder une information en utilisant moins de bits.
Si Gzip n’est pas disponible, il faut l’activer manuellement via le fichier .htaccess.
Pour tester que ça fonctionne : https://checkgzipcompression.com/.


Minification JS, CSS, Html

En programmation, minifier signifie réduire la taille du code. C’est un processus très utilisé en programmation web pour réduire la taille d’un programme à télécharger depuis un serveur et ainsi réduire l’encombrement du réseau.
On va donc supprimer:

  • Les espaces
  • Les sauts de lignes
  • Le commentaires
  • Les séparateurs de blocs

Il existe plusieurs outils pour minifier un fichier CSS ou JavaScript en ligne ou en ligne de commande tels que:

  • minifier
  • uglify-js
  • minify
  • JSCompress.com



Expire Header 

Il permet d’indiquer que certains types de fichiers peuvent rester en cache dans le navigateur du visiteur pendant une durée déterminée, sans que le navigateur n’ait besoin de faire des requêtes pour vérifier la validité du cache. Vous allez donc diminuer drastiquement le nombre de requêtes de votre site.

# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7200 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 2592000 seconds"
ExpiresByType image/icon "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
ExpiresByType application/javascript A2592000
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers

Cache-Control

Le cache control est un complément de l’expire headers, en fonction du serveur que vous avez ou du navigateur utilisé par vos visiteurs. Là aussi, on va déterminer une durée de cache par type de fichier

# BEGIN Cache-Control Headers 
<IfModule mod_headers.c>
 <FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
 Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\.(js)$"> Header set Cache-Control "max-age=2592000, private" </FilesMatch> <filesMatch "\.(html|htm)$"> Header set Cache-Control "max-age=7200, public" </filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *