L’impact des performances sur les ventes n’étant plus à démontrer, passons directement à la liste des pires pratiques pour la performance web que l’on retrouve couramment :
Numéro 1 - Ne pas mettre le contenu en premier
Symtôme : La page reste blanche et affiche tout le contenu d’un coup plusieurs secondes plus tard ou la page qui affiche des éléments de navigation en premier, et le contenu intéressant en dernier
Sources :
- CSS complexes (carousels, sliders, RWD, fonts custom)
- JS bloquants (scripts tiers, comme FB, twitter etc), la pire d’entre toutes !
- contenus statiques volumineux (images HD par ex)
Solutions :
- Chargement des CSS dans le <HEAD> html
- Eviter les CSS embarquée dans le html
- Eviter les définitions de styles « inline »
- Eviter d’utiliser des sélecteurs compliqués, exemple :
.post h1 + p:first-line { font-variant: small-caps; }
- Différer le chargement des JS
- Préférer les scripts asynchrones
- Pour les images, 70% de gain possible avec pêle-mêle : compression, sprite, lazy load, adaptive images, progressive image rendering (peu utilisé), auto-preloading (complexe).
Numéro 2 - CTA first
Symtôme :le CTA (call-to-action, ou « Lien, bouton ou visuel appelant l’internaute à entreprendre une action ») est affiché en dernier
Solutions :
- Déplacer le CTA pour l’afficher en premier (sur Amazon par exemple la barre de recherche est dans les premières affichée).
Numéro 3 - Pop-up bloquante
Symptôme : un pop-up (inscription à une newsletter par exemple) bloque le chargement de la page
Solutions :
- Optimiser le pop-up
- Retarder son apparition d’au moins 10 secondes.
- Tests A/B
Source : http://www.webperformancetoday.com/2014/07/29/design-best-practices-become-performance-worst-practices-slides/
Rétroliens/Pings