Bien que plusieurs facteurs aient sans aucun doute un impact sur les revenus, la plupart des experts affirment que le chargement des sites d’entreprise en moins de 5 secondes représente presque le double de celui enregistré en 19 secondes, soit le temps de chargement moyen du site.
L'étude a également révélé que les sites qui se chargent en moins de 5 secondes ont:
- Visibilité de l'annonce 25% supérieure,
- Taux de rebond inférieur de 35%, et
- Des sessions utilisateur plus longues de 70%.
C’est précisément pour cette raison que nous devons nous concentrer sur des solutions d’abord mobiles pour aider nos entreprises à réussir. Après tout, la vitesse du mobile n’a jamais été aussi importante.
$config[code] not foundLa vitesse de chargement lent peut vraiment être un problème
Selon Google,
- 1 personne sur 2 s'attend à ce qu'une page soit chargée en moins de 2 secondes.
- 53% des visites risquent davantage d'être abandonnées si le chargement de la page dure plus de 3 secondes sur un appareil mobile.
- 46% des personnes ont manifesté leur mécontentement à attendre le chargement des pages lors de la navigation sur le Web sur un appareil mobile.
Les trois principaux facteurs de ralentissement des sites sur l'Internet mobile sont le nombre de demandes de serveur, la taille du fichier et l'ordre séquentiel des éléments de chargement de page. Alors maintenant, nous avons souligné les causes; passons à la solution.
Comment augmenter la vitesse d'un site mobile
Mesurer et minimiser le temps de réponse de votre serveur
La vitesse de votre page mobile dépend non seulement de votre code, mais également d'un outil technologique important appelé le serveur.
Plus votre serveur attend longtemps pour répondre à une requête du navigateur, plus votre page se charge lentement sur le périphérique. La plupart des experts de Google recommandent que votre serveur commence à transmettre le 1st octet de ressources dans les deux cents millisecondes d’une demande de résultat optimal.
En règle générale, il existe 3 méthodes principales impliquées dans l’augmentation du temps de réponse de votre serveur:
- Améliorer la configuration de votre serveur Web ou de votre logiciel.
- Améliorer la portée et la qualité de votre service d'hébergement, en veillant notamment à ce que vous disposiez de suffisamment de mémoire et de ressources CPU.
- Réduire le nombre de ressources requises par vos pages Web.
Utiliser CSS pour charger des images
Si vous souhaitez masquer vos images de contenu pour les utilisateurs mobiles, chargez-les en tant qu'images d'arrière-plan via CSS et utilisez des requêtes multimédia pour les masquer de manière conditionnelle.
Amazon utilise une variante de cette technique pour charger sous condition des images spécifiques à un périphérique.
Réduisez le nombre de redirections pour augmenter la vitesse de votre page mobile
Les redirections ne sont que des instructions capables de conduire automatiquement les visiteurs d'un site Web d'une page à une autre.
Chaque redirection peut prendre des précieuses millisecondes, ce qui ralentit le chargement de la page. Cela est particulièrement problématique pour les appareils mobiles car ils dépendent souvent de réseaux peu fiables que les utilisateurs de bureau.
La première étape pour résoudre ce problème consiste à analyser le nombre de redirections sur votre site à l'aide d'outils tels que le mappeur de redirection. Si le nombre est trop grand, minimisez-le ou idéalement, ramenez-le à zéro pour obtenir les meilleurs résultats.
Réduire les fichiers JS et CSS
Plus de données signifie un excès de page. Cela prendra plus de temps à vos pages pour être chargées sur un appareil mobile.
C'est pourquoi la plupart des développeurs Web dignes de ce nom savent qu'il est nécessaire d'optimiser et de minimiser les actifs pour augmenter la vitesse de chargement des pages.
La «minification» élimine la redondance sans affecter l’affichage d’une page. Un large éventail d’outils Google peut vous aider à éliminer ces redondances, notamment:
- CSSNano (pour CSS)
- UglifyJS (pour JS)
Au lieu d'images, utilisez CSS3
Ombres portées, coins arrondis et remplissages en dégradé: toutes ces fonctionnalités peuvent être réalisées via CSS, au lieu d'images.
Cela peut grandement aider à réduire le nombre de requêtes HTTP, accélérant ainsi le temps de chargement en même temps.
Utiliser des SVG en ligne au lieu de JPEG
Comme les URI de données, les SVG (graphiques vectoriels évolutifs) peuvent être incorporés dans une page pour réduire le nombre de requêtes
Ces fichiers peuvent être créés dans un éditeur de graphiques vectoriels tel qu'Inkscape, Adobe Illustrator, etc. Une fois créé, vous pouvez l'ouvrir dans un éditeur de texte et l'insérer dans votre code.
Remarque: pour incorporer un fichier SVG dans votre feuille de style, vous devez d'abord le convertir en URI de données, puis passer à l'étape suivante.
Pour que plus ou moins résume les choses. J'espère que vous avez eu une bonne lecture et éclairante.
Photo via Shutterstock
1
