Performance

    La vitesse d’affichage est déterminante pour un site web pour plusieurs raisons :
  • Elle est le premier critère d’ergonomie d’un site web, aussi bien pour un site vitrine que pour un site e-commerce.
  • Elle est prise en compte dans l’algorithme de classement des moteurs de recherche.

Une page peut être affichée rapidement sans que son chargement soit terminé, offrant ainsi une expérience utilisateur jugée satisfaisante. Pour se faire nous utilisons, la technologie du lazy loading (ou lazy load, “chargement fainéant” en français) qui consiste à spécifier quels composants d’un programme doivent être chargés lors du démarrage de celui-ci.

Les images

Optimiser le poids

Il est généralement préférable que le poids total d’une page Web soit inférieur à 1 ou 2 Mo. Les images représentent en moyenne 21% du poids total d’une page web. En général, les images plus simples comme les PNG devraient être inférieures à 100 Ko ou moins pour obtenir les meilleures performances. Le poids d'une image ne doit pas dépasser 150 ko (sauf cas exceptionnel).
Vous pouvez utiliser des outils de compression automatique tel qu'ImageOptim (pour Mac).

Quel format ?

JPEG
C’est l’un des formats les plus utilisés en ligne, il est très adapté aux images avec beaucoup de couleurs, de nombreux détails et du bruit. Format recommandé dans les emails. Les JPEG peuvent être redimensionnés, mais plus la compression est importante, plus on perd des détails comme une altération de la qualité au niveau des dégradés de couleurs et des formes précises (texte par exemple).
PNG
Pour les images haute résolution avec fond transparent. Le PNG aura de bons résultats en termes de compression sur des images présentant de larges zones de couleurs homogènes ou des formes/du texte simple.
SVG
Le SVG est un format qui permet de sauvegarder et afficher des images vectorielles. Ce format est léger et permet de redimensionner les images sans perte de qualité. Il est notamment utilisé pour les pictogrammes. Format non interprété dans les emails et MMS.

Les dimensions

Dimensionner vos images par rapport à leur taille affichée à l'écran.
 
Largeur/Hauteur (px) % largeur de l'écran Poids recommandé (kb) Cas d'usage
~80*80 10% < 10 vignette logo, picto -> svg
~300*180 25% < 20 vignette "MAIF vous conseille"
~375*250 50% < 75 image 6 col / 12
~800*450 75% < 100 image article conseil d'assurance
~1920*500 100% < 150 image carrousel / cover
Attention

Pour la conception des visuels au format .SVG, il faut suivre les formats stipulés dans les maquettes statiques HTML . Sont notamment concernées les illustrations dites "narratives", essentiellement utilisées dans les pages projets. Chaque illustration est unique avec un emplacement spécifique et un encombrement déterminé (de 4 à 8 col). Il convient de la nommer avec un suffixe précisant le nombre de colonnes (exemple : nom-illustration-section-1-A-colX).

Pour la contribution dans Jahia, suivez les étapes suivantes : Editer l'image; Cocher « Dimensions image format SVG »; Enregistrer; Rediter l'image; Rentrer les dimensions correspondant au composant; Enregistrer; Publier l'image; Enfin Publier le composant contenant l'image

Ces liens ne sont accessibles que via le réseau local.

Contribution et stockage

écran de selection d'une marque de voiture
Visuel fixe : lié au composant

Lorsque l'image n'a pas vocation à changer, que l'on considère qu'elle est liée au composant, il convient de la stocker sur le serveur dit "Static". Il héberge les éléments tel que les .js, css, police icone,... Tout changement de ce visuel demande une intervention technique (intégration-développement).
Exemples : pictos de carte bancaire pour illustrer le module paiement, bouton-radio logo marque

composant option en ligne horizontal
Visuel interchangeable : stocké dans Jahia

Lorsque l'illustration n'est pas à proprement parler liée au composant, l'image est stockée dans le CMS Jahia et sa mise à jour est à la main des contributeurs. Les dimensions des images sont indiquées sur les maquettes des composants concernés.
Exemple : composant "Ligne option horizontal"

Le chargement

schema chargement d'image au dessus de la ligne de flottaison
Spécifier les images à charger

Avec la technologie du lazy loading qui consiste à spécifier quels composants d’un programme doivent être chargés lors du démarrage de celui-ci, seules les images situées au-dessus de la ligne de flottaison sont chargées. On améliore ainsi le temps de chargement initial de la page. Ainsi une fois le premier affichage de la page à l'écran de l'utilisateur présent, les images sont progressivement chargées dans le viewport. Le script prédit quelle zone est utile à l'affichage, puis il la précharge pour que la navigation soit fluide.

Attention

L'attribut "data-src" doit être présent, il spécifie l'url de l'image. Dans ce cas, la balise "img" ne doit pas comporter l'attribut src. De ce fait, ne pas récupérer le code de l'inspecteur mais le code source.

DO

code source
Code source
Pour obtenir un chargement progressif utiliser ce code data-src="url-de-limage" seul.