35 optimisations de performance pour votre site WordPress
Une page créée avec Canvas ne télécharge que le CSS et le JavaScript des blocs qu'elle affiche, et rien d'autre. S'y ajoutent 35 optimisations, chacune étant un interrupteur que vous contrôlez, avec des valeurs par défaut prudentes et une explication claire de son effet.
Mis à jour le
Chargement des ressources par bloc
La plupart des thèmes livrent une feuille de style volumineuse et un script volumineux, et chaque page paie pour chaque fonctionnalité du thème. Canvas associe chacun de ses 314 blocs au CSS et au JavaScript dont il a besoin, puis charge l'ensemble des éléments réellement affichés sur la page.
- Une page de tarifs ne charge jamais le script du slider
- Une page sans formulaire ne télécharge jamais le gestionnaire de formulaire
- L'éditeur charge les styles des blocs de la même manière
- Aucune configuration requise, et impossible de la désactiver par erreur
Déclaré, pas deviné
Chaque bloc déclare ses propres ressources. La cartographie des ressources est dans le bloc, donc il n'existe aucune liste centrale que quelqu'un risquerait d'oublier de mettre à jour.
Compatible avec les blocs principaux
Les blocs de base et les blocs tiers conservent leur propre comportement de chargement. Canvas ne reprend pas leurs ressources et n'entre pas en concurrence avec WordPress pour les gérer.
Les modèles comptent aussi
Les en-têtes, pieds de page, titres de page et diaporamas sont aussi des blocs. Ainsi, une page qui utilise un en-tête simple ne charge pas le code du méga menu.
Rien à acheter
Le chargement conditionnel n'est pas une fonctionnalité premium ni un module complémentaire. C'est ainsi que la bibliothèque fonctionne sur toutes les formules et avec une licence expirée.
35 optimisations, regroupées selon ce qu'elles touchent
Rien ici n'a de magie et rien n'est caché. Chaque élément modifie de façon précise et vérifiable la page que WordPress envoie.
Chargement de 7
Empêchez le CSS et le JavaScript de bloquer le premier affichage, et préchargez la page suivante plus tôt.
- Charger les feuilles de style non critiques de manière asynchrone
- Différer le JavaScript non critique
- Différer le JavaScript jusqu’à la première interaction
- Précharger la plus grande image au-dessus de la ligne de flottaison
- Préconnecter aux origines qu'utilisera la page
- Préchargement DNS pour les hôtes tiers
- Préchargement spéculatif, pour que la page suivante soit récupérée avant d'être cliquée
Polices 3
Le texte reste lisible pendant le chargement d'une police web, et les polices Google ne nécessitent pas du tout de requête vers un tiers.
- Ajoutez font-display swap à vos polices web
- Précharger les polices nécessaires au premier écran
- Héberger les polices Google sur votre propre serveur
Médias 6
Les images sont l’élément le plus lourd de la plupart des pages, et le plus facile à mal gérer.
- Chargement différé des images sous le pli
- Chargement différé des iframes et des contenus intégrés
- Définissez la qualité JPEG que WordPress génère
- Limiter la largeur maximale des images téléversées
- Contrôlez les ensembles d'images adaptatives que WordPress génère
- Contrôler quelles tailles d'image sont générées du tout
Nettoyage 8
WordPress embarque des fonctionnalités que chaque site supporte et que peu de sites utilisent.
- Supprimer les chaînes de requête des ressources statiques
- Désactiver les scripts et les styles emoji
- Désactiver la détection oEmbed et le script d'intégration
- Désactiver Dashicons côté visiteur
- Désactiver XML-RPC
- Désactiver les flux RSS
- Suppression de jQuery Migrate
- Désactiver les pingbacks internes
Base de données 5
La partie administration d'un site lent : révisions, enregistrements automatiques et Heartbeat qui ne s'arrête jamais.
- Limiter le nombre de révisions conservées par article
- Définissez l'intervalle de sauvegarde automatique
- Limiter ou désactiver le Heartbeat de l’administration
- Suppression des révisions, transitoires et spams de la base de données
- Limiter l'API REST aux utilisateurs connectés
WooCommerce 5
Une boutique charge ses scripts sur chaque page du site, y compris celles qui ne vendent rien.
- Supprimer le JavaScript WooCommerce sur les pages sans contenu de boutique
- Désactiver le suivi d'attribution des commandes
- Empêcher le script des fragments de panier d'interroger le serveur sur chaque page
- Ne plus charger la bibliothèque de vérification de la force des mots de passe en dehors des pages de compte
- Supprimer la bibliothèque Select2 incluse en dehors du paiement
Réécriture par le réseau de diffusion de contenu 1
Dirigez vos feuilles de style, scripts, images et polices vers un réseau de diffusion de contenus que vous payez déjà, en réécrivant leurs adresses au moment du rendu de la page. Canvas ne vous vend pas de réseau et ne fait pas transiter votre trafic par ses propres serveurs.
Cela fait 35 réglages au total, et les cinq réglages WooCommerce n'apparaissent que lorsque WooCommerce est actif. Pour en savoir plus sur l'intégration à la boutique.
Chacun d'eux est un interrupteur, et les valeurs par défaut restent prudentes
Canvas active ce qui est sans risque pour tout site web et laisse le reste à votre appréciation, avec la raison indiquée à côté de chaque réglage. Le seul réglage généralement déconseillé le signale directement dans le panneau, au moment où vous devez décider.
Bases du référencement et de l'accessibilité
Une page qui se charge vite mais ne peut être ni lue, ni indexée, ni utilisée au clavier n'est pas terminée. Tout cela est inclus dans le thème lui-même, sur chaque formule, sans rien réserver à une offre supérieure.
Métadonnées de votre contenu
Titres, descriptions, cartes sociales, URL canoniques, règles robots et plan du site, tous dérivés de la page telle qu'elle s'affiche. Il n'existe aucune seconde copie de votre contenu à mettre à jour.
16 types de schéma
Organization, WebSite, WebPage, Person, fil d’Ariane, Product, Brand, Offer, Review et note, adresse, coordonnées géographiques, horaires d’ouverture et recherche sur le site, générés là où ils s’appliquent.
Repères sémantiques
Repères de page pour l'en-tête, la navigation, le contenu principal et le pied de page, un lien d'évitement vers le contenu, des titres qui suivent leur ordre, et un focus visible sur tout élément accessible.
Menus au clavier
Les menus, les méga menus, les panneaux latéraux et les fenêtres modales s'ouvrent, se déplacent et se ferment au clavier, et les animations respectent le réglage de réduction des animations du visiteur.
L'accessibilité, la sécurité et l'export des données ne sont jamais des fonctionnalités premium. Elles restent disponibles avec une licence expirée, car un site qui cesse d'être utilisable pose un problème d'assistance, jamais une décision de licence.
Comment nous le vérifions
Les promesses sur la vitesse et l'accessibilité sont faciles à formuler et faciles à vérifier. Nous vérifions les nôtres, et voici comment.
Les pages sont comparées à leurs maquettes dans un vrai navigateur
Chaque page de démo est rendue dans un navigateur et comparée au design d'origine : hauteur du document, largeurs de section, espacements calculés, et tout élément piloté par JavaScript, mesuré une fois son exécution terminée, jamais au premier affichage.
Ce site web est audité à trois largeurs d'écran
Chaque page présentée ici est vérifiée avec axe-core selon WCAG 2.1 aux niveaux A et AA, à 1440, 1024 et 390 pixels, ainsi qu'avec les contrôles qu'axe ne réalise pas : un seul h1, des niveaux de titres qui ne sautent jamais, les quatre repères de page, un lien d'évitement fonctionnel, aucun débordement horizontal, aucun texte sous 12 pixels, des liens qui se lisent comme du texte et des cibles tactiles d'au moins 24 pixels.
Ce dont Canvas a besoin pour fonctionner
WordPress
Canvas repose sur l'éditeur de blocs et nécessite donc WordPress avec l'Éditeur de site. Version 7.1 ou ultérieure.
PHP
PHP 7.4 ou version ultérieure. Une version récente de PHP est l'amélioration de vitesse la plus simple et la moins coûteuse que la plupart des sites puissent obtenir.
Testé jusqu'à
Canvas est testé avec WordPress 7.1, et une mise à jour suit chaque version de WordPress.
À propos des performances
Y compris celle qu'on nous demande le plus souvent, ce qui explique l'absence de notes sur cette page.
Avez-vous encore besoin d'une extension de cache ?
Probablement, et c’est la réponse honnête. Canvas contrôle ce que contrôlent un thème et WordPress : les ressources chargées par chaque page, le comportement des polices et des images, et la charge de travail de la base de données. Le cache de page, le cache d’objets et la diffusion en périphérie relèvent de votre hébergeur ou d’une extension de cache. Ce sont des tâches différentes : utiliser les deux est donc la configuration habituelle.
Activer ces options risque-t-il de casser mon site ?
Chaque option est réversible, et celles qui risquent le plus d'entrer en conflit avec une autre extension sont désactivées par défaut. Chaque option explique ce qu'elle fait et quand il vaut mieux ne pas y toucher, et le réglage réellement risqué le signale dans le panneau. Activez-les une à une et rechargez le site public après chacune.
Dois-je configurer le chargement des ressources bloc par bloc ?
Non, il n'y a rien à trouver ni à activer. C'est le fonctionnement de la bibliothèque de blocs. Chaque bloc déclare le CSS et le JavaScript dont il a besoin, et la page charge l'ensemble de ce qu'elle a réellement affiché.
Les démos sont-elles livrées optimisées ?
Un import de démo à l'échelle du site reprend les options du thème de la démo, y compris les options de performance, si bien qu'une démo démarre avec les réglages avec lesquels elle a été conçue et vérifiée. Vous pouvez modifier chacune d'elles ensuite.
Pourquoi cette page ne publie-t-elle pas de scores de vitesse ?
Parce qu'un score issu d'un test synthétique réalisé sur notre matériel ne vous dit rien sur votre hébergeur, vos extensions, vos images ou vos visiteurs. Ce que nous publions, c'est exactement ce que fait chaque optimisation : vous l'activez donc et mesurez votre propre site sur votre propre infrastructure.
Un site rapide que vous pouvez toujours modifier
Chaque formule est livrée avec la même bibliothèque de blocs, les mêmes 35 optimisations et le même chargement conditionnel des ressources. Il n'existe pas de niveau de performance.