WP Deferred Javascript : chargez vos scripts en asynchrone

C'était une idée qui trottait dans la tête de Willy Bahuaud depuis quelques temps déjà : améliorer le temps de chargement de WordPress en chargeant tous les scripts de manière asynchrone, c'est à dire en même temps que le reste de votre page, sans la bloquer.

Ni une ni deux, nous nous sommes mis à codé un peu et voici le résultat: le plugin WP Deferred Javascript.

WP Deferred Javascript : un plugin qui vous veut du bien

A quoi sert le plugin ?

Notre plugin a un objectif simple : améliorer le temps de chargement des sites WordPress. Pour cela, il se concentre sur une chose : le chargement asynchrone des scripts, permettant un rendu plus rapide de la page sans que celle-ci ne soit bloquée par le chargement de ceux-ci.

Je ne vais pas aller dans le détail du code puisque Willy le fait très bien sur son site Wabeo : WordPress et les JavaScripts asynchrones.

En résumé, voici comment cela se passe :

• Le plugin stocke temporairement les scripts qui devraient être chargés dans le header et le footer.
• Il empêche WordPress de les charger
• Il les place tous dans le footer, dans le bon ordre des éventuelles dépendances
• Il les charge en asynchrone avec l'excellente libraire LABJS.

The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site's performance.

optimisation d'un thème WordPress

L'installation de WP Deferred Javascript

Le plugin est très simple : installez-le et activez-le, et le tout est joué. WordPress se chargera du reste pour vous.

Attention cependant, car WP Deferred Javascript ne fonctionne qu'avec les scripts correctement ajoutés, c'est à dire ceux avec la fonction enqueue de WordPress. S'ils sont ajoutés de manière brute dans le contenu, ils seront ignorés. Cela vous permettra donc de savoir si vos différents plugins et votre thème est correctement codé.

Théoriquement, tout plugin ou thème doit en effet insérer un script sous la forme suivante :

wp_register_script('monscript', 'url/monscript.js', array('scripts dont je dépend éventuellement'), 'version', false);
wp_enqueue_script('monscript'));}

Et pour les développeurs qui se posent la question, toutes les données insérées avec un localize_script sont correctement prises en comptes par le plugin WP Deferred Javascript.

Par contre, si votre thème a déjà été optimisé comme dans le tutoriel cité un peu plus haut, le plugin ne vous servira à rien (car vous auriez déjà un script unique, minifié et situé dans le footer de vos pages).

Téléchargement

Vous l'aurez donc compris : le plugin Wp Deferred Javascript, c'est :

• deux auteurs : Willy Bahuaud et Daniel Roch.
• une librairie de chargement asynchrone Open Source.
• un meilleur temps de chargement pour votre site WordPress.
• le meilleur moyen de savoir si votre thème et vos plugins sont bien codés.

WP Deferred Javascript