La lenteur du chargement des pages est l'une des principales raisons pour lesquelles votre site Web n'obtient pas les visites qu'il mérite.
Alors que l'attention du public est au plus bas, voici quelques conseils pour accélérer votre site et vous assurer que vos visiteurs restent.
Si votre site Web se charge plus lentement que trois secondes, les gens risquent de l'abandonner avant même le chargement de la page d'accueil. L'utilisation du mauvais format pour vos images peut facilement gonfler votre site Web et ruiner une expérience de navigation par ailleurs excellente.
Plus de 70 % des pages Web mobiles dépassent 1 Mo et 12 % dépassent 4 Mo ! Gardez à l'esprit que cela prend sept secondes pour télécharger 1,5 Mo sur une bonne connexion 3G. La meilleure pratique consiste à limiter la taille de chaque page à moins de 0,5 Mo.
Apprenez la différence entre JPG, PNG et GIF et assurez-vous d'utiliser la résolution dont vous avez besoin.
Selon GlobalStats, ce sont les résolutions d'écran les plus utilisées en 2018 :
Cela représente plus de 50 % de tous les utilisateurs, alors tenez-en compte lorsque vous ajoutez des photos à votre site Web.
D'après une étude effectuée par Google l'année dernière sur la vitesse des pages mobiles :
Selon une nouvelle analyse, le temps moyen nécessaire pour charger complètement une page de destination mobile est de 22 secondes. Pourtant, 53 % des visiteurs d'un site mobile quittent une page dont le chargement prend plus de trois secondes. C'est un gros problème.
Plus de 75 % des sites mobiles prennent 10 secondes ou plus pour se charger en 3G. Bien plus de la moitié de tout le trafic se fait via des appareils mobiles, et il est peu probable que cela diminue. Gardez donc une petite empreinte de site Web pour rendre les utilisateurs d'Internet mobiles heureux et assurez-vous qu'ils restent dans les parages !
Si vous utilisez un CMS comme WordPress, Joomla ou Drupal, il existe des plug-ins pour rendre votre site Web plus adapté aux mobiles.
Vous pouvez également utiliser des outils tels que bMobilized ou Duda Mobile pour convertir votre site Web de bureau en mobile. Cela dit, il est souvent préférable de concevoir un site Web distinct pour garantir la meilleure expérience possible à vos mobinautes.
Vous devriez également envisager de proposer une version simplifiée de votre site Web à l'aide du projet Accelerated Mobile Pages (AMP). L'utilisation de pages AMP améliorera la vitesse de chargement des pages sur mobile. Il existe des directives strictes pour JavaScript et CSS, mais les avantages sont mesurables.
Quelle que soit la voie que vous décidez d'emprunter, assurez-vous que votre site Web mobile est une option légère.Et essayez de respecter la recommandation de 0,5 Mo par page.
Si vous écrivez votre propre site Web à partir de zéro, modifiez-le régulièrement. Au fur et à mesure que votre projet se développe, vous apprenez probablement des façons plus efficaces de faire les choses, alors assurez-vous de revoir votre code au fur et à mesure que vous vous améliorez.
Minifiez et combinez vos CSS, HTML et JavaScript. Si vous utilisez un CDN comme Cloudflare par exemple, il existe un onglet spécifique pour les améliorations de vitesse, où la première option est Auto Minify. Si vous utilisez un constructeur de site Web (comme Squarespace ou Weebly), cela est probablement fait pour vous par défaut.
Assurez-vous de tester votre site Web après avoir activé tout ce qui combine ou minimise les ressources de votre site Web. Testez les différentes options pour voir ce qui convient le mieux à votre site Web, car certaines fonctionnalités peuvent ne pas fonctionner avec Minify activé.
Le fait de devoir charger plusieurs fichiers JavaScript avant qu'ils ne soient nécessaires ralentira inutilement la vitesse de la page entière. Vous pouvez utiliser les outils ChromeDev pour vérifier ce qui est chargé. Évitez de charger des scripts à partir de serveurs tiers si vous le pouvez.
Les demander ralentira davantage votre vitesse de chargement et peut potentiellement poser un risque pour la sécurité. Conservez-les sur le serveur de votre site Web lorsque cela est possible.
Vous pouvez utiliser différer ou asynchrone pour retarder le chargement de fichiers JavaScript spécifiques afin de réduire la pression sur les appareils des visiteurs et d'améliorer la vitesse de chargement de vos pages. Sinon, pour les petits scripts, vous pouvez inline le JavaScript directement dans le document HTML.
Async indiquera au navigateur de continuer à analyser le HTML en même temps que les fichiers JavaScript sont téléchargés. La pause se produira alors après le téléchargement complet du fichier.
En attendant, différer indiquera au navigateur d'exécuter les fichiers JavaScript après le navigateur a fini d'analyser l'intégralité du document HTML.
Un navigateur suspendra par défaut l'analyse des fichiers HTML pendant que tous les fichiers JavaScript sont récupérés et exécutés.
L'intégration de JavaScript dans le document HTML aidera en réduisant le nombre de fichiers qu'un navigateur doit télécharger avant d'afficher une page. Vous pouvez intégrer du JavaScript en ajoutant le contenu de n'importe quel fichier JavaScript externe entre des balises de script.
Vous pouvez utiliser en toute sécurité le report et l'asynchronisation sur Google Analytics, Facebook Pixel et d'autres outils d'analyse et de rapport d'erreurs sans affecter la fonctionnalité de la page.
Enfin, déterminez si les codes de suivi, les analyses, les fonctionnalités supplémentaires et les publicités que vous diffusez sur votre site Web sont nécessaires. Utilisez des options plus légères lorsque cela est possible et supprimez-les si elles n'ajoutent rien de valeur pour vous ou vos visiteurs.
Un réseau de diffusion de contenu (CDN) copiera votre site sur des serveurs du monde entier et réduira le temps de parcours des données en connectant les visiteurs à un serveur géographiquement plus proche d'eux. Le contenu statique sera également mis en cache et livré par les serveurs du CDN.
Cloudflare est probablement le CDN que vous connaissez le mieux, mais Akamai et Amazon CloudFront sont des alternatives bien établies.
Assurez-vous également de tirer parti de la mise en cache du navigateur pour améliorer la vitesse de chargement de votre site Web pour les visiteurs réguliers. La mise en cache du navigateur fonctionne en téléchargeant ces fichiers du serveur sur l'appareil de l'utilisateur.
Lors d'autres pages vues ou visites, ces fichiers seront chargés localement à partir de l'appareil de l'utilisateur au lieu de les demander au serveur externe (selon la date d'expiration des fichiers).
Les plugins ne doivent être utilisés que lorsque cela est nécessaire. Cela est vrai que vous utilisiez Wix, Weebly, WordPress ou Squarespace ou autre chose. Toutes les fonctionnalités que vous pouvez faire en ajoutant un simple CSS plutôt qu'un plugin, vous devriez. Utilisez l'injection de code sur Squarespace, utilisez le personnalisateur CSS dans WordPress et le CSS personnalisé sur Wix.
Les plugins peuvent provoquer une surcharge du processeur ou de la mémoire sur votre serveur, ce qui peut ralentir ou même arrêter le chargement de votre site Web.
Si vous utilisez WordPress, il est probable que vous n'utilisiez pas toutes ses fonctionnalités intégrées. Désactivez-les avec un plugin comme Clearfy.
Considérez toujours les plugins que vous utilisez. Si vous utilisez peu de fonctionnalités dans des plugins comme JetPack, envisagez de les supprimer complètement et remplacez-les par des plugins plus légers qui font le même travail.
Le retard du serveur aura un impact négatif important sur la vitesse de chargement de votre page et votre PageRank.
Google recommande que le Time to First Byte (TTFB) soit de 1,3 seconde ou moins. Il s'agit du délai le plus long avant qu'un appareil ne commence à télécharger une page après avoir initialement contacté le serveur. Cela dit, la page moyenne a un TTFB de plus de 2 secondes, bien au-dessus de leur recommandation.
Les hôtes partagés en sont généralement la cause, mais vous pouvez configurer certains paramètres pour améliorer le temps de réponse de votre serveur.
Si votre site Web est réalisé en WordPress, assurez-vous d'utiliser un hébergeur spécialisé dans l'hébergement WordPress, comme Bluehost. Cela garantira que les paramètres du serveur sont configurés spécifiquement pour les performances de WordPress.
Maintenant que vous connaissez le temps de chargement, la taille et le temps de chargement de page idéaux (TTFB) que vous devriez viser, comment savez-vous quel est le vôtre ?
Voici quelques-uns de nos outils en ligne préférés pour tester votre site :
Vous pouvez tester votre site mobile avec les liens ci-dessus, ainsi qu'avec le test ThinkWithGoogle Mobile (optimisé par WebPageTest). Les résultats vous donneront des conseils spécifiques sur ce que vous pouvez améliorer, avec une réduction estimée du temps de chargement si vous suivez les conseils.
Les meilleures pratiques recommandées changent constamment, alors continuez à vérifier régulièrement la vitesse de votre page au fur et à mesure que vous apportez des améliorations.
Pour obtenir des informations encore plus précieuses sur les performances de votre site Web, n'oubliez pas de valider votre domaine sur Google et Bing.
