L'adage "la patience est une vertu" ne s'applique pas en ligne.
Même un délai d'une seconde peut réduire considérablement réduire les pages vues, la satisfaction des clients et les conversions de baisse . La vitesse de votre site affecte même votre classement de recherche organique.
Alors, quel est le facteur le plus important contribuant à la vitesse de votre page?
Taille.
Les navigateurs prennent du temps pour télécharger le code qui compose votre page. Vous devez télécharger votre HTML, vos feuilles de style, vos scripts et vos images. Le téléchargement de toutes ces données peut prendre un certain temps.
Comme les utilisateurs Web s'attendent à des conceptions de sites plus attrayantes, la taille des fichiers de ressources d'un site continuera d'augmenter. Chaque nouvelle fonctionnalité nécessite un nouveau script ou une nouvelle feuille de style qui pèse un peu plus sur votre site.
Comment vous assurez-vous que votre site est mis à jour?
Il existe d'excellentes ressources pour analyser cela. Google PageSpeed Insights HubSpot Website Qualifier et GTMetrix sont parmi les plus populaires. Les deux services analyseront votre site et vous indiqueront où vous êtes en retard.
Une petite mise en garde: les résultats peuvent parfois être un peu décevants, mais la plupart des solutions sont relativement rapides et faciles. Il ne résout peut-être pas tout ce que le service de vitesse recommande, mais vous devez en corriger suffisamment pour améliorer l'expérience du site pour vos visiteurs.
Apprenons à accélérer les choses.
Alors que certains systèmes de gestion de contenu modernes comme HubSpot implémentent des options d'amélioration de la vitesse prêtes à l'emploi, les systèmes les plus courants, comme WordPress et Joomla, nécessitent un petit travail manuel pour rattraper leur retard.
Voyons maintenant quelques solutions de vitesse essentielles que chaque webmaster devrait considérer.
Comment réduire le temps de chargement des pages
- Réduisez l'échelle de vos images.
- Cachez votre navigateur pour le stockage des données.
- Réduisez le temps de chargement de CSS.
- Gardez les scripts sous le pli. ] Ajoutez des pages asynchrones.
- Réduisez les redirections.
1. Réduisez vos images.
Les images sont l'un des porcs de bande passante les plus courants sur le Web. La première façon d'optimiser vos images est de les mettre à l'échelle correctement, afin qu'elles n'affectent pas autant le temps de chargement des pages.
De nombreux webmasters utilisent d'énormes images, puis les réduisent avec CSS. Ce qu'ils ne réalisent pas, c'est que leur navigateur les charge toujours en pleine taille d'image. Par exemple, si vous avez une image de 1000 x 1000 pixels, mais que vous l'avez réduite à 100 x 100 pixels, votre navigateur devrait se charger dix fois plus que nécessaire.
Remarquez la différence de taille lorsque nous réduisons l'une de nos images:
Cependant, la mise à l'échelle des images rend parfois vos photos floues. La clarté peut être perdue et l'image peut être déformée. Si cela vous arrive généralement, choisissez la deuxième option: compresser.
La compression d'image réduira considérablement la taille de l'image sans perte de qualité. Il existe plusieurs outils en ligne gratuits pour la compression d'images, tels que tinypng.com qui peuvent réduire la taille des images. Vous pouvez voir des réductions de taille allant de 25% à 80%.
Par exemple, j'ai pris cette première image, à 133 Ko, et je l'ai compressée à l'aide d'une application de site Web gratuite appelée Squoosh . Lorsque l'image a été terminée, elle était 87% plus petite et n'a rien perdu de sa qualité d'origine.
2. Cache votre navigateur pour le stockage des données.
Pourquoi inciter les visiteurs à télécharger les mêmes choses chaque fois qu'ils chargent une page? L'activation de la mise en cache du navigateur vous permet de stocker temporairement certaines données sur l'ordinateur de votre visiteur, afin qu'il n'ait pas à attendre qu'il se charge à chaque fois qu'il visite votre page.
La durée de stockage des données dépend des paramètres de votre navigateur et des paramètres de cache côté serveur. Pour configurer la mise en cache du navigateur sur votre serveur, veuillez consulter les ressources ci-dessous ou contacter votre hébergeur:
3. Réduisez le temps de chargement CSS.
Votre CSS est chargé avant que les gens voient votre site. Plus ils mettent de temps à télécharger votre CSS, plus ils attendent. CSS optimisé signifie que vos fichiers seront téléchargés plus rapidement, donnant à vos visiteurs un accès plus rapide à vos pages.
Commencez par vous demander, "Est-ce que j'utilise tout mon CSS?" Sinon, supprimez le code superflu dans vos fichiers. Chaque petite quantité de données gaspillées peut s'accumuler jusqu'à ce que la vitesse de votre site Web éloigne vos visiteurs.
Ensuite, vous devez réduire vos fichiers CSS. Des espaces supplémentaires dans vos feuilles de style augmentent la taille du fichier. La minimisation CSS supprime ces espaces supplémentaires de votre code pour garantir que votre fichier est de la plus petite taille.
Vérifiez si votre CMS minimise déjà votre CSS ou s'il existe une option pour celui-ci. HubSpot, par exemple, minimise déjà votre CSS par défaut, tandis que les sites Web WordPress nécessitent un plugin supplémentaire comme WP Hummingbird pour optimiser ces fichiers.
Si votre CMS n'a pas d'option pour réduire le CSS, vous pouvez utiliser un service en ligne gratuit comme CSS Minifier . Collez simplement votre CSS et appuyez sur "Compresser" pour voir votre nouvelle feuille de style réduite.
La réduction de vos fichiers de ressources est un excellent moyen de supprimer une certaine taille de vos fichiers. Croyez-moi, ces petits espaces s'additionnent rapidement.
4. Gardez les scripts sous le pli.
Les fichiers Javascript peuvent être chargés après le reste de votre page, mais si vous les mettez tous avant leur contenu, comme le font de nombreuses entreprises, ils seront chargés avant leur contenu.
Cela signifie que vos visiteurs doivent attendre que vos fichiers Javascript se chargent avant de voir votre page. La solution la plus simple consiste à placer vos fichiers Javascript externes en bas de votre page, juste avant la fermeture de la balise body. Désormais, une plus grande partie de votre site peut être chargée avant vos scripts.
Une autre méthode qui permet encore plus de contrôle consiste à utiliser les attributs defer ou async lors de la mise en place de fichiers .js externes. Le report et l'asynchrone sont très utiles, mais assurez-vous de bien comprendre la différence avant de les utiliser.
Les balises asynchrones chargent les scripts tandis que le reste de la page se charge, mais les scripts peuvent être chargés sans ordre. Fondamentalement, les fichiers les plus légers sont chargés en premier. Cela peut être bien pour certains scripts, mais cela peut être désastreux pour d'autres.
Par exemple, supposons que l'une de vos pages comporte une vidéo au-dessus du pli, du texte ci-dessous et quelques images en bas. Si vous exécutez des balises asynchrones sur cette page, le texte sera chargé en premier, puis les images et la vidéo en dernier.
Le plus gros fichier, le fichier vidéo, est également celui avec lequel les utilisateurs sont censés interagir en premier. Lors de son dernier chargement, il n'a pas le même impact. Par conséquent, utilisez des balises asynchrones si votre page contient bon nombre des mêmes éléments qui ne tardent pas à se charger, comme du texte ou un carrousel d'images.
L'attribut de report charge vos scripts une fois le chargement de leur contenu terminé. Il exécute également les scripts dans l'ordre. Pour illustrer, pensez à votre page d'accueil. Tous les éléments, y compris les champs d'image, les champs de texte et la mise en page, apparaîtront dans l'ordre, le reste étant chargé par la suite.
Assurez-vous simplement que vos scripts s'exécutent sans casser votre site. Il vous suffit d'ajouter un seul mot à vos tags
Et ajoutez le petit code pour vous assurer qu'il se charge à tout moment:
L'importance de vos scripts déterminera s'ils obtiennent un attribut et quel attribut il ajoute. Les scripts les plus essentiels devraient probablement avoir l'attribut asynchrone afin qu'ils puissent être chargés rapidement sans conserver le reste de leur contenu. Cependant, les informations non essentielles doivent attendre la fin pour que les visiteurs voient votre page plus rapidement.
Mais assurez-vous toujours de tester chaque script pour vous assurer que l'attribut ne casse pas votre site.
5. Ajoutez des pages asynchrones.
La plupart des pages Web téléchargent du contenu peu à peu à partir de différentes sources. Par exemple, le navigateur charge le corps d'une page Web. Cependant, l'en-tête est représenté par des polices externes, telles qu'une feuille de style et un script utilisé pour charger du texte et des images.
Le navigateur qui charge la page du début à la fin, de la tête au corps, prend un certain temps, mais beaucoup de pages sont rendues, avec ce chargement synchrone. Si une partie de la page a besoin d'une certaine fonction à charger, mais que ce composant charge déjà une autre partie de la page, ce chargement initial doit se terminer avant de commencer le travail sur la tâche suivante.
Pendant ce temps, le visiteur attend depuis longtemps qu'une page Web apparaisse. Dans le backend, vous profitez tellement du processeur d'un ordinateur que tout semble s'arrêter.
Au lieu de cela, le chargement asynchrone reconnaît les scripts qui peuvent être chargés simultanément, remplaçant les fonctions synchrones. Lorsque certaines pages sont chargées en même temps, en supprimant cette chaîne de commandes de fonction discutée précédemment, d'autres aspects de la page, tels que l'en-tête de page, peuvent être chargés ensemble.
Les pages asynchrones peuvent être implémentées simplement en ajoutant quelques lignes de code dans le CSS de votre page. Lisez comment les concevoir dans cette publication .
6. Minimisez les redirections.
Combien de redirections se trouvent sur votre site Web? Si vous avez récemment migré le site Web ou acheté des sous-domaines, vous avez probablement une ou deux requêtes HTTP. Ces redirections mettent du temps à charger les pages.
Des redirections, telles que "Erreur: 404 introuvable", apparaissent lorsque les utilisateurs tapent une adresse Web incorrecte ou sont redirigés vers une page cassée sur un site Web. Lorsqu'une page est redirigée, une autre page prend sa place ou une page vierge avec le message d'erreur remplace l'écran.
Les visiteurs devraient passer par l'écran HTTP tout en étant redirigés, augmentant ainsi le temps nécessaire au chargement de la page. Supposons que votre page "À propos" ait été déplacée vers un autre sous-domaine.
Lorsque les visiteurs écrivent sur le site Web, par exemple mywebsite.com/about, ils doivent être immédiatement redirigés vers cette page. Au lieu de cela, mywebsite.com/about mène à une page HTTP, puis emmène un visiteur sur mywebsite.com> mywebsite.com/aboutus. Il s'agit d'une page supplémentaire que les utilisateurs doivent parcourir pour atteindre la destination souhaitée.
Au lieu d'héberger plusieurs redirections, supprimez-les. Dans cet article vous apprendrez comment trouver toutes vos pages de redirection, leurs alternatives et surtout comment les supprimer.
Comme les utilisateurs en ligne exigent une expérience en ligne plus riche, la taille de nos pages continuera d'augmenter. Il y aura plus de Javascript accrocheur, plus de trucs CSS et plus d'analyses tierces pour peser nos sites Web.
Un peu d'attention ira un long chemin: N'oubliez pas, il suffit d'une seconde derrière pour perdre un avantage.
