WORDPRESS et l’optimisation du code CSS

Quand nous parlons de surfing sur Internet, vous ne pensez certainement pas à la vitesse de chargement du site Web sur lequel vous naviguez et encore moins de son code CSS

Si votre connexion Internet est suffisamment puissante, vous n’avez certainement que deux conclusions sur chaque site concernant la vitesse: le site est ou n’est pas assez rapide.

Et c’est ainsi que la plupart des internautes verront votre site WordPress .

Même s’il est attrayant pour un visiteur spécifique, si le blog ne se charge pas assez rapidement, vous perdrez 80% des visiteurs

Et c’est pourquoi vous devez faire tout ce qui est en votre pouvoir pour rendre votre site WordPress aussi rapide que possible.

Un des nombreux paramètre à prendre en compte pour gagner en vitesse de chargement est l’optimisation du code CSS

Il est impératif de nettoyer régulièrement votre base de données pendant vos différentes actions d’optimisation du CSS et ou javaScript.

 

1- Déplacement des feuilles de style CSS

Concentrons nous, sur l’optimisation du code  et plus particulièrement de ces fichiers statiques. Généralement ils sont  sous forme de feuilles de style (fichiers CSS) et de scripts (fichiers JS).

  • La toute première optimisation consiste à s’assurer que les feuilles de style sont dans la section <head> de la structure de votre page, alors que tous les scripts sont déplacés juste au-dessus de la balise de fermeture </body> de votre page.

Les feuilles de style sont plus petites que les scripts, une fois chargées dans la balise <head> avant que le navigateur affiche le corps de page, tous les éléments qui sont visibles dans la page auront un style approprié.

La fonction des scripts entre en jeu une fois le contenu de la page chargé, de façon à ce que les scripts soient placés en bas, cette méthode garantit que les visiteurs de votre site ne voient pas une page figée en attendant qu’elle se charge.

 

2- Optimisation du code CSS avec la Minification

Le processus de suppression des parties d’un fichier qui n’est pas nécessaires à son exécution s’appel La minification . Par exemple, dans vos feuilles de style CSS ou scripts, les éléments suivants ne sont pas nécessaires à l’exécution:

1- Les espaces pour l’indentation
2- Les commentaires
3- La fonction longue et noms de variables
4- Le code inutilisé

La minification aide largement en réduisant la taille de vos fichiers statiques. Vous pouvez réduire vos fichiers en utilisant un service comme Minify ou en installant l’une des extension de minification pour WordPress.

3-Mini JavaScript et CSS en ligne pour consolider le code

L’alignement du code JavaScript et CSS  consiste à ajouter du JavaScript et du CSS aux fichiers HTML de votre site web.

Cela permet d’améliorer sensiblement la vitesse de chargement des pages, en réduisant le nombre des fichiers que votre site doit charger pour afficher certaines de ses pages.

Mais vous devrez être prudent pour utiliser cette technique, parce-qu’elle  présente quelques inconvénients potentiels.

Pour commencer: si vous ajoutez trop de JavaScript et de CSS à vos fichiers HTML, vous risquez d’en augmenter la taille.

Dans cette perspective, vous risquez de perdre quasiment toute la vitesse que vous avez acquise, puisque vous ne ferez que de remplacer plusieurs fichiers par un seul, beaucoup plus volumineux.

Et c’est peut-être le plus important, parce-que: le JavaScript et le CSS en ligne ne peuvent pas être mis en cache.

La mise en cache est une autre méthode très puissante également pour améliorer les performances d’un site.

Il est très possible que l’avantages des styles et des scripts mis en ligne ne compensent pas la perte de la capacité de mise en cache de votre page.

En tenant compte de ces 2 éléments, vous devrez examiner attentivement si les scripts JavaScript et/ou CSS en ligne sont adaptés à votre thème.

Comme alternative, vous pouvez également envisager d’utiliser des scripts JavaScript et CSS en mode externes.

Comments are closed.