(lien utile : https://fr.docs.wp-rocket.me/category/1438-core-web-vitals)

• Poids CSS / JS

• Opti IMG : taille + poids + Lazyload

• Tri plugins inutilisés

• Taille DOM / Lazy loading html

• Cache

• Compression page : GZIP / Brotli

CSS

• Eliminer le CSS inutilisé (voir plugin Lévi)

• Minifier

• Concaténer

• Préload en local si librairie externe (ex : bootstrap, fonts, CDN..) + desenqueue les liens externes mis en local

• Fonts en WOFF2 et en local sur le serveur (bien supporté et plus rapide, mais attention car probleme si font en local lors de typo en cyrilique selon langue etc)

• Définir le CSS critique (nécessaire dans la ligne de flottaison) à mettre en inline dans le HTML

• Base de donnée

JS

• Defer le JS bloquant autant que possible (exécuté après le document ready)

• Report de certains JS non essentiel au chargement de page (ex: captcha) qui se chargera lors de la première interaction avec le site (avec parcimonie car risque de lag lors de la première interaction si trop de script reporté) + preload DNS du domaine si utilisé sur toutes les pages (ex: analytics) ne pas preload sur tout le site un script qui n'est utilisé que sur une page

• Minifier

• Concaténer

• Voir au cas par cas pour le JS car risque que le site plante

Script permettant de trouver les scripts (y compris inline) dans la console:

var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++){
	if(scripts[i].src) console.log(i, scripts[i].src)
	else console.log(i,scripts[i].innerHTML)
}

IMG

• Lazy load (que ce qui est hors de la ligne de flottaison, eviter le logo ou l'image d'entete d'un post, utiliser une class du style 'no-lazyload' pour cibler tout ce qu'on veut exclure du lazy)

• Toujours définir Width et Height en inline sur les IMG (prévient le navigateur de la taille à allouer

Base de donnée

• Nettoyer les révisions si trop nombreuses

• Nettoyer la table wp option si elle garde des datas de plugins ou thèmes désinstallés

IMPORTANT Penser à etirer du cache les cookies (plus nécessaire depuis le passe en JS des plugins) :

Optis côté serveur :

• Static caching

• Varnish / Litespeed

• Memcache

• Gzip

• Pagespeed Module ?

• Minification avec offuscation

JS :

• Minification + compression (si pas côté serveur) ⇒ https://github.com/matthiasmullie/minify, https://github.com/tedivm/JShrink, https://developers.google.com/closure/compiler, https://github.com/mrclay/minify

• push / preload JS critique

• service worker

CSS :

• Minification + compression (si pas côté serveur) ⇒ https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port, https://github.com/matthiasmullie/minify, https://github.com/mrclay/minify

• push / preload ou CSS critique inline + lazy load le reste

• dequeue css non utilisé

Média :

• lazy load

• tjs spécifier height + width

• webp

Cache :

• purge après modif (+ Varnish/Litespeed + Cloudflare)

• Cache-control + Etag pour static

• longue valeur de max-age

• versionning ou fingerprinting pour actu cache

Font :

• Privilégier system font

• preload + font-display: optional

Opti Serveur

Opti plugin : https://gitlab.n10.xyz/northstarnetwork/wordpress/plugins/nsn-cwv-opti