Ce qu'OLObuild fait tout seul
Certaines optimisations sont toujours actives et n'ont pas d'interrupteur.
- Seulement le nécessaire. Les feuilles de style et les scripts d'OLObuild ne se chargent que dans les pages faites avec OLObuild, et les scripts d'une tile, par exemple ceux de la carte, seulement si la tile est dans la page.
- Des polices depuis ton serveur. Les Google Fonts utilisées par le site sont téléchargées une fois et servies par le site, sans appel à Google à chaque visite. Si le téléchargement échoue, la page utilise les polices système.
- Contenu à la demande. À partir de la quatrième tile, le contenu est monté quand il est sur le point d'entrer à l'écran. Les 3 premières tiles, les formulaires, les cartes et les menus sont toujours prêts.
- Images en chargement différé. Les images se chargent quand elles sont sur le point de devenir visibles.
- Vidéos légères. La tile Vidéo, avec Lazy Load (Facade) activé par défaut, affiche la couverture et ne charge le lecteur YouTube ou Vimeo qu'au clic.
- Animations sans surcharge. Les animations d'entrée démarrent quand l'élément entre à l'écran. Les personnes qui ont demandé à leur système de réduire les mouvements voient les éléments tout de suite, sans animation.
Les réglages Performance & Cache
Ils se trouvent dans Système › Configuration › Performances & Services › Performance & Cache, et depuis l'onglet Performance du tableau de bord.
- Defer JavaScript — Les scripts d'OLObuild se téléchargent sans bloquer la page et démarrent quand elle est prête. (par défaut : activé)
- Cache CSS dans des fichiers statiques — Place le style de chaque modèle dans un fichier que le navigateur conserve, au lieu de le réécrire dans la page. (par défaut : activé)
- Minifier le CSS — Retire les espaces et les commentaires des feuilles de style d'OLObuild. (par défaut : activé)
- Préchargement des polices personnalisées — Lance tout de suite le téléchargement des polices du texte et des titres, à la graisse utilisée : le texte s'affiche avec sa police, sans changer d'aspect un instant après. (par défaut : activé)
- fetchpriority hero image — La première image de la première section se charge tout de suite et avec une priorité élevée. Les autres restent en chargement différé. (par défaut : activé)
- Lazy load des vidéos auto-hébergées — Les vidéos téléversées sur le site, en lecture automatique et sans son, démarrent quand elles entrent à l'écran. (par défaut : activé)
- Full-page cache — Enregistre les pages déjà prêtes et les sert aux visiteurs sans les reconstruire. Lis le chapitre 3 avant de l'activer. (par défaut : désactivé)
- UIkit subset — Réduit la feuille de style UIkit aux parties que les pages utilisent vraiment. Il apprend en visitant les pages et se corrige tout seul. (par défaut : désactivé)
- CSS par tile — Charge le style de certaines familles de tiles uniquement là où elles sont nécessaires, comme les cartes, les galeries et les menus. (par défaut : désactivé)
- Cache du navigateur pour les médias (.htaccess) — Indique au navigateur de conserver longtemps les images, les polices, le CSS et le JS. Fonctionne sur les serveurs Apache et LiteSpeed. (par défaut : désactivé)
- DNS prefetch & preconnect automatiques — Prépare à l'avance la connexion à YouTube et Vimeo dans les pages qui les contiennent. Les domaines saisis dans Domaines personnalisés sont toujours inclus. (par défaut : activé)
- Nettoyage du head — Retire les scripts et les styles de WordPress que beaucoup de sites n'utilisent pas : jQuery Migrate, emoji, styles des blocs et du thème classique. (par défaut : désactivé)
- Critical CSS — Écrit dans la page le style des premières sections (2, dans Sections above-the-fold) et charge le reste juste après. Il est refait après le nombre de jours de Durée du cache et quand tu enregistres le modèle. Régénérer le critical CSS le reconstruit tout de suite. (par défaut : désactivé)
Attention. Supprimer le Block CSS retire aussi les styles globaux de WordPress. Avec un thème de blocs, après l'avoir activé, vérifie que le site a toujours ses couleurs et ses polices.
En haut de l'onglet, État du cache compte les pages dans le cache de page complète, les fichiers de style et les pages avec Critical CSS, et indique quand le cache a été vidé pour la dernière fois. Tout vider les supprime tous ensemble, avec le subset UIkit et les données temporaires d'OLObuild.
Le cache de page complète
Le cache de page complète enregistre chaque page déjà prête et la sert aux visiteurs sans la reconstruire. C'est le réglage qui compte le plus sur un site très fréquenté.
- Il ne s'applique pas aux utilisateurs connectés, au panier et au checkout de WooCommerce, aux sitemaps ni aux adresses dont les paramètres ne sont pas ceux de suivi.
- Le cache garde des versions séparées pour ordinateur et téléphone, et par langue.
- Chaque page reste en cache pendant 8 heures.
- Il se vide tout seul quand tu enregistres dans le builder ou dans WordPress, quand tu changes les menus, le thème, l'en-tête ou le pied de page actifs, les couleurs et les polices globales, les règles d'attribution ou les réglages Performance, et à chaque mise à jour d'OLObuild.
Attention. Ne l'active pas si le site utilise déjà un plugin de cache comme LiteSpeed Cache ou WP Rocket. Dans ce cas, OLObuild ne l'installe pas, et à côté de l'interrupteur l'onglet explique pourquoi.
Caches externes et nettoyage
OLObuild ne pilote pas les caches externes. Si le site utilise LiteSpeed Cache, WP Rocket, le cache de l'hébergeur ou Cloudflare, vide-le toi-même après avoir changé les couleurs, les polices, l'en-tête ou le pied de page : sinon les visiteurs risquent de voir encore la version précédente.
Système › Outils › Cache d'OLObuild › Supprimer les fichiers et les données supprime les fichiers de style générés, le cache de page complète et les données temporaires d'OLObuild, qui se recréent à la visite suivante. C'est utile quand une page affiche un ancien style. Cela revient à Tout vider dans l'onglet Performance.
Une page rapide, en pratique
- Des images à la bonne taille. Téléverse des images pas plus larges que l'espace qu'elles occupent, 2000 pixels pour une photo pleine largeur, au format WebP ou JPEG compressé.
- La première image tout de suite. Avec fetchpriority hero image activé, comme par défaut, la première image de la première section se charge toute seule avec une priorité élevée. Si la photo principale se trouve plus bas, dans sa tile Image ouvre Avancé › SEO & Accessibilité et choisis Eager dans Chargement de l'image et High dans Fetch Priority.
- Peu de polices. 2 familles suffisent, avec 3 ou 4 graisses en tout. Chaque graisse en plus est un fichier de plus à télécharger.
- Des vidéos avec couverture. Utilise la tile Vidéo avec Lazy Load (Facade) activé, plutôt que de coller le code de YouTube dans une tile HTML.
- Des effets là où ils servent. Les arrière-plans animés, la parallaxe et les vidéos d'arrière-plan pèsent plus qu'une photo. Utilise-les là où ils racontent quelque chose.
Mesurer
Mesure la page avec PageSpeed Insights de Google ou avec Lighthouse, dans les outils de développement de Chrome. Fais le test dans une fenêtre de navigation privée : connecté, tu vois la page sans cache de page complète, plus lente que celle des visiteurs.
Répète la mesure 2 ou 3 fois et regarde surtout le chargement du plus grand élément (LCP) et la stabilité de la mise en page (CLS). Le score change d'un test à l'autre, et d'un téléphone à l'autre.