Pyver sur FacebookPyver sur TwitterPyver sur PinterestFlux RSS Pyver02 40 85 64 64
  • Graphisme & Webdesign

    creation web design graphique
  • Structures Responsive

    integration web responsive
  • Référencement / S.E.O

    prestation optimisation seo referencement
  • Stratégie digitale

    stratégie réseaux sociaux community management

Temps de chargement des pages : techniques d’optimisation

< Retour au Blog Publié le : mercredi 13/08/2014 dans : Web Design 

L'optimisation du poids aujourd'hui :

La réduction du temps de chargement des pages a depuis toujours été une contrainte dans la construction des sites, pour permettre à un site de se lancer rapidement quel que soit le débit internet de l'utilisateur, et d'une manière générale pour apporter l'information plus rapidement, ce qui est la logique même du web.

En revanche, depuis quelques années, avec l'installation de plus en plus massive dans les foyers des accès haut débit (aujourd'hui plus de 95% en France), on constate un laisser-aller impressionnant dans le poids des pages de la plupart des sites, même les plus utilisés, laissant ainsi de côté les utilisateurs bas-débit, et mettant potentiellement à l'épreuve la patience des internautes.

Cependant, le temps de chargement étant toujours et encore un critère de préférence pour Google, cette pratique est plus que jamais de rigueur dans la création de sites. De plus, avec l'augmentation du temps passé sur internet (environ 4h07 par jour pour les internautes français en 2014), les utilisateurs sont également moins patients, d'où l'utilité de réduire le temps de chargement.

Les techniques :

Lorsqu'un site s'affiche, il charge toutes les données qui le composent, chargeant à la fois le code qui structure la page (HTML, feuilles de style CSS, fichiers Javascript) et les informations présentes dans la page (images, textes, liens, vidéos, etc.). Toutes ces données ont un poids spécifique, des plus légéres (le code) aux plus massives (vidéos, images en haute résolution).

Le travail de réduction du poids passe alors par une optimisation méticuleuse de chacun de ces éléments.

Pour les images faisant partie de la charte graphique du site, par exemple le logo ou les pictogrammes, tout ce qui est ornemental, on utilisera de préférence le format vectoriel SVG, un type de fichier image récemment accepté sur de nombreux navigateurs, qui utilise des données mathématiques pour afficher une image plutôt que des pixels, réduisant considérablement le poids. Pour les PNG et les GIF, on utilisera des compresseurs.

Pour les photos par exemple, on va réduire au maximum la résolution et les dimensions, tout en essayant de ne pas dégrader la qualité de l'image, en utilisant des compresseurs en ligne ou ceux présents dans Photoshop. Le but est d'obtenir des images ne dépassant pas 400 Kiloctets dans le cas de galeries, qui utilisent de nombreuses photos.

Pour les vidéos, on privilégiera l'hébergement sur des serveurs dédiés comme Youtube, Vimeo ou Dailymotion, pour alléger les requêtes.

Pour le code (source, js, css), de nombreuses techniques existent pour alléger le code à charger, par exemple la création d'un seul mégafichier Javascript et CSS au lieu de fichiers multiples et la minification du code (par exemple via Closure Compiler ou bien Minify).

Pour le transport de tout cela, il faut être attentif à l'infrastructure de l'hébergement et on n'oubliera pas de configurer le(s) serveur(s) Web finement afin de disposer du meilleur taux de chargement pour magnifier l'expérience utilisateur (compression, multiplexage, différents niveaux de cache, liaison sécurisée, CDN, etc...)

On évitera les plugins ou widgets tiers venant d'autres sites afin de ne pas "plomber" son propre site... En effet, l'apport de données extérieures fournies par des tiers de service ne peut que freiner le chargement de votre site par les nombreuses connexions supplémentaires qui sont nécessaires et ainsi que par leurs temps de réponse...
Aussi, moins il y en a, mieux votre site se chargera et, dans la mesure du possible, on évite tout simplement ! Un 'beau' lien (dans un "blank") pour accéder à ces données est la seule bonne solution.

Màj : 21/02/19

Partager l'article sur:


Commenter: