Sélectionner une page

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/