Référencement /

Temps de chargement : les problèmes liés au chargement d’une page web


Création Site internet Agen

Par linkweb47
Le 20/11/2019

>> Revenir à l'accueil
Accueil du blog >> Référencement>>Temps de chargement : les problèmes liés au chargement d’une page web

Depuis l’annonce par Google de l’ajout d’un badge pour désigner les sites lents, le géant de la Moutain View a invité très sérieusement les webmasters et autres professionnels du web à faire le nécessaire pour accélérer le Web. Pour réduire le temps de chargement de ses pages web, il va être nécessaire de bien comprendre les causes de ce délai de chargement en vue de mettre en place des actions efficaces.

 

Chargement d’une page web : comment ça marche ?

 

Pour comprendre le fonctionnement du chargement d’une page web, il est nécessaire de schématiser le procédé. À partir du moment où l’utilisateur clique sur un lien qui le redirige vers un site, le navigateur effectue une requête GET (pour récupérer) en direction du serveur. Si tout fonctionne correctement, le serveur (sur lequel est hébergé l’ensemble des ressources du site internet) va renvoyer une réponse HTML pour lui permettre d’afficher la page.

Une fois la réponse du serveur acquise, le navigateur faire en sorte de récupérer et télécharger l’ensemble des ressources de la page : le HTML dans un premier temps, le CSS, le Java Script, mais aussi l’ensemble des images et contenus présents sur la page. C’est l’ensemble de ce processus de récupération de données qui va déterminer le temps de chargement d’une page.

 

Les principales causes d’un ralentissement

 

Vous l’aurez compris, le temps de chargement d’une page web est déterminé par la qualité de la communication entre le navigateur et le serveur. Par ailleurs, l’ensemble des ressources présentes sur la page présentent un poids. Cela peut causer des ralentissements dans le chargement d’une page web. En effet, il faut savoir que plusieurs problèmes peuvent être causés en raison d’une mauvaise optimisation de votre page et de vos ressources :

    • La taille et le format des images : parmi les problèmes fréquemment rencontrés, le surpoids des fichiers image est l’un des plus récurrents.

 

    • Le poids des ressources de la page : un fichier optimisé est un fichier dont les ressources CSS et le HTML sont optimisées. Autrement dit, il est important de ne pas laisser traîner de CSS inutilisé dans la page, cela va alourdir son poids et ralentir son chargement.

 

    • L’exécution du JavaScript : lorsqu’une page web est en cours de chargement, les ressources vont être téléchargées en partant du haut de page jusqu’au bas. Les ressources en JavaScript sont lourdes et peuvent causer un ralentissement si elles sont placées en haut de page.

 

    • Le temps d’affichage du contenu principal : une mauvaise optimisation peut causer un ralentissement de l’affichage du contenu principal, ce qui procure de mauvaises performances de chargement.

 

    • Le délai avant interactivité : il s’agit du temps nécessaire pour que le contenu de la page soit disponible et utilisable.

 

    • La présence de plugins inutilisés : sur les CMS, certains plugins installés, mais non utilisés ou pas indispensables peuvent alourdir le poids de la page web et donc la ralentir.

Il existe des outils comme GT Metrix ou PageSpeed Insights (de Google) pour vous permettre d’évaluer le temps de chargement de vos pages et connaître les raisons principales qui causent le ralentissement de leur chargement.

 

Temps de chargement optimal

 

Quelles solutions mettre en place ?

 

Avec l’instauration du badge pointant les sites lents, la donne va changer. C’est pourquoi il va devenir indispensable de procéder à des actions permettant d’accélérer le temps de chargement de votre site web de façon globale. Attention, toutes les méthodes permettant de réduire le temps de chargement ne sont pas accessibles à n’importe quel utilisateur. Certaines manipulations font appel à une compétence technique avancée.

 

Les solutions relatives aux images :

 

Pour réduire le poids d’une image sur un serveur web, il va être nécessaire d’optimiser son fichier. Tout d’abord, utiliser un format compressé tel que le JPEG est fortement conseillé par rapport à un format PNG ou GIF. Par ailleurs, il va être important de dimensionner correctement son fichier : est-ce que l’image va être présente en fond de site ? Est-ce qu’elle va seulement s’intercaler au sein d’un texte ?

Il est essentiel de dimensionner son image le plus justement possible afin de ne pas alourdir le fichier et donc la page web. Il est également possible d’ajuster la résolution de l’image pour optimiser au maximum son fichier. Il faut savoir que pour une impression, la résolution optimale est de 300 ppi, pour un écran elle s’élève à 150 ppi alors que pour un visuel sur les réseaux sociaux, elle est de 72 ppi.

Enfin, certains logiciels comme Photoshop et certaines plateformes en ligne permettent la compression de fichiers JPEG avec une perte contrôlée de la qualité. De plus, des formats nouvelle génération émergent à l’image du JPEG2000 ou bien du WebP : investir sur ces nouveaux formats va vous permettre d’obtenir de larges gains de place.

 

Les solutions liées aux ressources non optimisées présentes sur une page :

 

Si l’optimisation de vos images n’a pas suffi à accélérer suffisamment le temps de chargement de vos pages, il va falloir aller chercher un peu plus loin. En effet, il va être nécessaire d’alléger le poids des pages web en optimisant tout ce qui va relever du CSS inutilisé ou mal optimisé.

En ce sens, nettoyer les balises de « style » directement implantées sur la page web en créant des classes à partir de la feuille de style (style.css) va permettre d’alléger votre fichier de page et de ne pas brouiller le téléchargement des ressources par du contenu inutile.

 

Les solutions liées à l’exécution du JavaScript :

 

Les ressources en JavaScript sont des ressources tout particulièrement lourdes au sein d’une page puisqu’elles concernent toute la partie destinée aux animations présentes sur le site. Ces ressources vont donc être plus lourdes à télécharger et vont donc mobiliser du temps. À ce niveau, il est fortement conseillé de regrouper l’ensemble de ses ressources JavaScript au sein d’un seul et même endroit pour limiter le nombre de requêtes et de scripts. Par ailleurs, concentrer le JavaScript en dehors de l’écran principal va permettre de ne pas bloquer l’affichage des ressources principales relevant du contenu principal de la page.

Il est recommandé de placer l’ensemble de ses requêtes JavaScript en bas de page. Le téléchargement de la page étant réalisé du haut vers le bas, cela va permettre de ne télécharger les ressources les plus lourdes en fin de page et donc de ne pas bloquer le rendu et le téléchargement des autres ressources qui vont être moins exigeantes.

 

Simplifier au maximum l’affichage de son contenu principal

 

Le temps de chargement de la page doit être un des facteurs qui va être pris en compte au moment de sa conception. En ce sens, l’objectif va être de faire en sorte que le contenu principal soit le plus rapidement accessible. Il est donc conseillé de déporter tout ce qui relève de l’animation dans les endroits non-visibles à l’arrivée sur le site. Ceci est tout particulièrement valable sur mobile, mais il ne faut pas pour autant négliger cet aspect sur un environnement desktop.

 

Optimisation site web

 

Quel outil faut-il privilégier ?

 

Certains outils permettent de favoriser la rapidité du temps de chargement. Si les Progressive Web Apps (PWA) ont été conçues pour favoriser l’expérience utilisateur grâce à une navigation rapide, Google a également proposé un outil appelé AMP (Accelerated Mobile Pages) permettant de créer une version ultra optimisée de sa page en termes de vitesse de chargement.

 

Progressive Web App : le tout-en-un

 

Créer une Progressive Web App revient à créer une plateforme web adaptée pour desktop, mais également téléchargeable en tant qu’application mobile. Ces PWA sont conçues pour minimiser le temps de chargement durant la navigation pour en augmenter la fluidité. L’application n’est plus téléchargeable par un store, mais directement dans le navigateur.

Les critères pour qu’un site internet soit considéré comme PWA peuvent être exigeants, c’est ce qui va demander une certaine compétence en développement web. Toutefois, les avantages procurés en termes de vitesse de chargement sont énormes.

 

AMP : un outil Google

 

Plus simple d’utilisation que la Progressive Web App, AMP possède l’avantage d’être un outil intégralement Google-friendly, ce qui lui procure certains avantages. Un site AMP peut-être accessible par un simple scroll via Google Images, par exemple, ce qui n’est pas le cas pour les sites n’utilisant pas cette technologie.

Cette dernière va permettre, à partir d’un contenu existant, de mettre en place une version allégée et minimaliste pour procurer une vitesse de chargement optimale. Ceci est tout particulièrement pratique pour les sites d’actualités dont le contenu principal va être le contenu de l’article et donc dans la majorité des cas, du contenu textuel rapidement téléchargeable.

 

La solution idéale est celle qui vous correspond

 

En définitive, la solution idéale n’existe pas. La solution qui sera considérée comme idéale pour vous ne le sera pas forcément celle d’une autre entreprise. Cela va dépendre de nombreux critères tels que la compétence technique à laquelle vous avez accès, la fréquence de votre publication ou bien de vos modifications, ou tout simplement sur le type de contenu que vous publiez.

Il peut-être utile d’essayer plusieurs méthodes avant de trouver chaussure à votre pied. Toutefois, avoir recours à un professionnel peut vous permettre de gagner du temps dans votre processus de prise de décision. En tous les cas, des actions visant à accélérer le chargement des sites web vont devoir être entreprises pour ne pas connaître une mauvaise surprise dans les mois à venir.

 


Vous souhaitez partager cet article ?

Vous souhaitez être recontacté pour la mise en place de votre solution web ?

À propos de l'auteur


Actualité digitale

linkweb47


Linkweb est une agence de communication web basée à Agen (47) et Toulouse (31). Spécialisés dans la création de site internet, le référencement SEO et le SEA, nous accompagnons nos clients pour des projets sur-mesure et qui répondent à leurs attentes.


Réseaux sociaux
Réseaux sociaux
Réseaux sociaux
Demander un devis

CATÉGORIES

>> Actualités >> Agence >> Référencement >> Tendances >> Tous les articles

DERNIERS ARTICLES

Création site internet AgenCréation site internet AgenCréation site internet Agen

LINKWEB SUR TWITTER