La performance fait partie du design

Une maquette ne montre pas le coût du chargement

Une page peut sembler légère dans une maquette puis ralentir avec de grandes images, plusieurs polices, des animations et des scripts tiers. L’évaluation doit porter sur la vraie page, son contenu et des conditions proches de celles des visiteurs.

Convenez d’un budget de pages pendant que la mise en page est encore flexible. Le budget peut couvrir l'image du héros, les fichiers de polices, les scripts tiers et le code d'interaction qui doivent être prêts pour la première vue. Les concepteurs peuvent alors décider quels éléments visuels ont suffisamment de valeur pour justifier leur coût de chargement et de rendu.

Définir les attentes de performance par modèle et appareil. La page d'accueil, la page de service, l'article et l'écran d'application ont un contenu différent, de sorte qu'une seule page rapide ne représente pas l’ensemble du site. Utilisez les mêmes conditions de test avant et après un changement et conservez le résultat avec la version de page. Les mesures de laboratoire aident à diagnostiquer, tandis que les données de terrain reflètent les visiteurs réels; ni ne doivent être cités sans expliquer sa source et sa couverture.

Donner la priorité à l’action principale

Évaluer ensemble contenu prioritaire, médias et scripts.

Le premier titre, l’image principale et l’action essentielle méritent généralement la priorité. Les médias situés plus bas peuvent attendre pendant que le visiteur comprend déjà la page.

L'ordre de chargement suit la tâche du visiteur. Une page de service a normalement besoin de son en-tête, de son offre et de son action principale avant une galerie ou une carte intégrée. Un article a besoin d’un texte lisible avant les supports décoratifs. Marquer chaque image comme urgente rivalise pour la même connexion et peut retarder l’élément le plus important.

La priorisation commence par le contenu nécessaire pour comprendre la page. Le titre principal et le texte essentiel ne doivent pas attendre les scripts optionnels. Donnez la plus grande image visible des dimensions correctes et la priorité de livraison, puis chargez plus loin les médias en chargement différé. Évitez de marquer chaque image comme urgence. Sur les pages d'article et de catalogue, la structure lisible peut apparaître tandis que les images secondaires, les recommandations ou les services intégrés continuent de charger.

Examiner séparément images, polices et JavaScript

Tester sur une connexion mobile représentative avant de valider animations et services tiers.

Images, polices et JavaScript ont des coûts différents. Dimensions et formats, graisses réellement utilisées et raison d’exécuter chaque script se contrôlent séparément. Un score global explique rarement le correctif utile.

Le travail de performance doit identifier une cause plutôt que de poursuivre un score. Une réponse lente du serveur, une image de héros surdimensionnée, une police bloquante et une longue tâche JavaScript nécessitent des correctifs différents. Comparez les traces du même itinéraire et du même profil d'appareil, puis vérifiez que la modification améliore l'expérience du visiteur sans supprimer les fonctionnalités requises.

Les polices et l'animation affectent également la vitesse perçue. Limiter les familles et les poids, ne charger que les ensembles de caractères nécessaires et fournir des replis avec des paramètres compatibles. Le code d'animation devrait fonctionner après l'existence de la mise en page requise et respecter les préférences de réduction des mouvements. Vérifier si les sections épinglées ou transformées créent de grandes zones de rendu sur mobile. L'objectif est de garder la direction visuelle prévue tout en supprimant le travail qui ne contribue pas à la tâche du visiteur.

Tester la première visite dans des conditions mobiles réalistes.

Il faut mesurer la première visite sans cache et les navigations suivantes. Sur mobile, on vérifie les déplacements de mise en page, le délai d’interaction et le plus grand élément visible sur les vrais modèles.

Les critères de performance et de recette sont convenus avant la réalisation puis vérifiés sur de vrais appareils.

Inclure les performances dans les flux de travail de publication et de contenu. Un éditeur peut annuler le développement prudent en téléchargeant une image surdimensionnée ou en intégrant plusieurs widgets externes. Dimensions de l'image de document, traitement vidéo et outils tiers approuvés. Revérifier les pages représentatives après les changements de modèle, de suivi ou de campagne. Lorsqu'une régression apparaît, enregistrer l'actif responsable ou le script de sorte que la correction soit spécifique et ne devient pas une requête générale pour simplifier l'ensemble de la conception.