CSS critique et WordPress

La rapidité impacte directement l’expérience de vos visiteurs. Un temps de chargement supérieur à 5 secondes c’est 50% de trafic en moins sur un ordinateur, avec un appareil mobile il suffit de 3 secondes pour que vos visiteurs aillent chercher l’information ailleurs.

Afin d’améliorer le temps d’affichage de vos pages, google recommande l’utilisation du CSS Critique ou Critical CSS en anglais.

Principe

Pour afficher rapidement une page il est recommandé de charger les ressources (CSS et Js) à la fin du document, si la technique est efficace elle génère des défauts d’ordre esthétique.

Lors du chargement de la page sans le CSS les différentes balises HTML se dispose en utilisant les propriétés organiques (en informatique rien n’est « naturel » on utilise donc le terme organique plus adapté) des balises soit inline soit block.

De ce fait les pages affichent les information dans un joyeux capharnaüm… Pendant quelques secondes le site affiche des informations en vrac avant de les formater lors de l’accès au CSS. Rapide certes mais inesthétique, pour éviter cette problématique, le CSS critique doit être chargé directement dans la balise <head> de la page, puis le CSS non critique est différé à la fin de la page.

Définir le CSS critique

Mettre en place le CSS critique peut ce faire de plusieurs façon, à vous de choisir la méthode qui correspond à vos compétences et dans une certaines mesures vos moyens.

Avant de commencer il est important de préciser le fait que vous n’aller pas choisir dans votre (ou vos) feuilles de styles les règles à placer dans le CSS critique. Nous allons voir les différents services disponible pour générer automatiquement les règles à définir comme critique.

A lire  Quand quelqu'un me demande à quoi sert WordPress

Critical path generator

Si votre site est déjà en ligne ce premier outils vous permettra de générer automatiquement le CSS critique en analysant les fichiers CSS de votre page.

Critical path generator
L’interface du service est simple coller l’url de la page à analyser et laissez le faire ^^

Une fois l’analyse effectué, vous pourrez télécharger les fichiers.

téléchargement des fichiers CSS minifié ou non
Choisissez maintenant les fichiers que vous souhaitez télécharger

Vous avez maintenant vos fichiers CSS répartie en deux fichiers, combinés et critiques. Voyons maintenant comment les utiliser concrètement.

Minification

La minification d’un fichier c’est tout simplement la suppression des caractères inutile au traitement du fichier, pour faire simple les espaces les retours à la ligne et tout autres caractères non significatif dans votre code.

l’opération rend le code difficilement lisible mais ce n’est pas le but, cela permet par contre de réduire la taille des fichiers et donc d’améliorer les temps de chargement.

Idéalement vous utiliserez le CSS minifié sur vos serveur de production et le non minifié sur vos serveurs développements.

Mise en place du CSS critique

Maintenant que nous avons récupéré nos fichiers, nous allons voir comment les intégrer à vos sites. Dans un premier temps nous allons voir la méthode sur un site lambda avant de voir comment l’utiliser sur un site WordPress.

Méthodologie

La technique est simple on place le CSS critique dans une balise <style> dans le <head>.

<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset=utf-8>
<title>CSS Critique</title>
<style>
//Code CSS critique à coller ici !
</style
</head>
<body>
///suite de la page non signifiant pour le moment.

Puis on place le CSS combiné et les fichiers Js juste avant la fermeture de la balise </body>.

//début de la page
	<link rel="stylesheet" type="text/css" href="css/style-combine.css">
	<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

Voilà vous avez maintenant une page qui respecte les recommandations de google pour un chargement optimal des ressources.

A lire  Mise en ligne de WordPress

 

Pour WordPress

Avec WP l’action est un peu plus complexe, si vous pouvez ajouter directement le CSS critique dans le header.php de votre thème vous serez obligé de modifier manuellement le fichier à chaque mise à jour de votre thème.

Cette solution n’est donc pas pérenne, afin d’éviter cela il vous faut utiliser un thème enfant. Et créer une fonction afin de placer le CSS critique dans le <head>.

hook wp_head

La fonction wp_head() génére les informations de la balise <head>, c’est une des fonctions primaire de WP, nous n’allons donc pas la changer mais lui ajouter du contenu via un HOOK (crochet en anglais).

Principe de fonctionnement d’un hook

Un hook permet de modifier ou d’ajouter des informations à une fonction existante.

function ma_fonction_de_base(){
echo "hey";
}
function ma_fonction_a_ajouter(){
echo " ça va ?";
}
//maintenant on ajoute la seconde fonction à la premiére
add_action('ma_fonction_de_base','ma_fonction_a_ajouter',1);

//appeler ma_fonction_de_base() retournera :
//hey ça va ?

Notre hook pour le CSS critique

function criticalcss(){
echo 'Coller ici le CSS critique minifié';
//faites attention ici j'utilise les apostrophes plutôt que les guillemets
//le CSS utilisant principalement des guillemets cela permet de ne pas
//provoquer d'erreur lors de l'impression de la chaîne de caractère.

add_action('wp_head','criticalcss',1)
//voilà votre CSS critique est maintenant imprimé dans le head de vos pages

Si votre thème est correctement rédigé le CSS ce charge déjà à la fin du document, mais si ce n’est pas le cas, des extensions comme autoptimize vous permettront de corriger cela.

© 2018 Occitaweb formation WordPress et média sociaux