Pyver sur Facebook Pyver sur Twitter Pyver sur Google Plus Pyver sur Pinterest Flux RSS Pyver 02 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, de nombreuses techniques existent pour alléger la masse à charger, par exemple la création d'un seul mégafichier Javascript au lieu de fichiers multiples ou la compilation du code (par exemple via Closure Compiler).

Partager l'article sur:


Commenter:

comments powered by Disqus