Tag : javascript

Optimiser l’ajout des javascripts des plugins dans votre wordpress

Souvent lorsque vous ajoutez des plugins dans votre wordpress vous allez automatiquement ajouter des bouts de codes JS sur toutes vos pages afin de faire fonctionner les dits plugins mais ces derniers ne sont pas forcément utilisés sur toutes vos pages. Ainsi vous surchargez bêtement vos pages et on le sait tous le temps de chargement d’une page est très important pour l’expérience utilisateur.

Par exemple si vous utilisez un plugin pour un formulaire de contact ce dernier ne sera nécessaire que sur la page contenant ce formulaire mais malheureusement le plugin va ajouter automatiquement le code javascript sur toutes les pages de votre blog wordpress… Afin de remédier à ce problème il faut ajouter un bout de code dans votre page functions.php de votre thème, celui-ci va annuler l’ajout automatique et faire l’insertion uniquement sur la page désirée, voici comment faire pour le plugin contact form 7 :

/* Ajout manuel des scripts contact form 7 */
    remove_action('wp_enqueue_scripts', 'wpcf7_enqueue_scripts' ); // Annule l'ajout automatique
    add_action('wp_enqueue_scripts','cf7_scripts'); // Ajoute les scripts sur la page désirée
 
function cf7_scripts() {
    if (is_page(array('1049'))) { // Ajouter les ID des pages sur lesquelles vous utilisez le plugin ?>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/jquery.form.js" type="text/javascript"></script>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/scripts.js" type="text/javascript"></script>
<?php } }

L’idée pour d’autres plugins est donc d’identifier le « handle » utilisé par le plugin dans les fichiers du plugin, pour contact form 7 c’est wpcf7 et ensuite d’ajouter ce code dans le fichier functions.php de votre thème.

Si vous souhaitez aussi n’ajouter la feuille de style associée que sur la bonne page c’est tout aussi simple il suffit d’utiliser la fonction wordpress wp_deregister_style comme ceci :

/* Ajout manuel des scripts contact form 7 */
    remove_action('wp_enqueue_scripts', 'wpcf7_enqueue_scripts' ); // Annule l'ajout automatique
    add_action('wp_enqueue_scripts','cf7_scripts'); // Ajoute les scripts sur la page désirée
 
function cf7_scripts() {
    if (is_page(array('1049'))) { // Ajouter les ID des pages sur lesquelles vous utilisez le plugin ?>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/jquery.form.js" type="text/javascript"></script>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/scripts.js" type="text/javascript"></script>
<?php }

else {
wp_deregister_style( 'contact-form-7' );
} }

Et voilà vous pouvez faire un peu d’optimisation maintenant!


C’est fou ce que l’on peut faire avec un navigateur

Cliquez sur ce lien et laissez faire, vous allez voir qu’avec un peu de code on peut faire beaucoup de chose avec votre navigateur Internet (ce qui n’est pas forcément pour nous rassurer).

Merci Damien


Votre serveur et votre site sont ils bien optimisés?

L’optimisation d’un site et d’un serveur est quelque chose de très spécifique, faisant même appel à des compétences bien particulières. Pour aider le quidam (moi donc) à savoir si le serveur sur lequel est installé son site est bien optimisé ou configuré, des outils sont disponibles gratuitement sur internet, certain sont plus ou moins pertinents, d’autres racontent n’importe quoi…

De mon expérience ces deux outils sont réellement efficaces :

-YSlow, addons à Firebug (extension Firefox) fourni par Yahoo et présenté sur cette page. Très complet et utile même si les solutions ne sont pas toutes évidentes…
-RPO qui est une solution payante bien fichue sur le papier (qui optimise, compresse et compile les javascripts, les CSS,… à la volée) et qui propose un audit de votre site sur la base de calculs et non pas de mesures. Certes cet audit a pour objectif de vous vendre la solution RPO mais si l’on fait abstraction des deux colonnes relatives à leur produit vous avez un bel audit gratuit de votre site et des actions à faire pour optimiser votre site.

Voici quelques données issues de l’audit de 2803.fr :

rpo

Average page load time (cold): 7,3 secondes
Page load (warm): 1.1 seconds
Page size: 679 KB
HTTP requests: 65

Ce que j’apprends avec ce rapport, c’est qu’en limitant le nombre de requêtes HTML (en passant à 26) je pourrais gagner 2,1 secondes de chargement soit 28%. Le bottle neck du site se situe au niveau des fichiers javascript qui sont appelés sur 2803 (12), minify pourrait être une solution à ce problème…

A vous de faire le test avec votre site et de voir où vous pouvez optimiser un peu…


Faite parler Twitter avec Twistori

Twistori est une application très bien faite en javascript qui va interroger summize le moteur de recherche pour Twitter. En fonction de 6 verbes : love, think, hate, believe, feel, wish vous allez faire défiler à l’écran des phrases issues de Twitter.

wistori

C’est sympa pour perdre 5 minutes mais pas très utile au final!


Super Mario en version 14kb

Voici un petit javascript très bien fichu qui va vous permettre d’intégrer le jeu super mario directement sur votre site ou blog (très bon pour augmenter le temps de présence sur le site). Ce jeu ne pèse que 14kb de quoi ravir ceux qui veulent à minima optimiser leur bande passante.

super mario

A vous de jouer, désolé pour ceux qui vont perdre leur vendredi à cause du jeu! La version sans musique est (plus discrète pour le bureau).


Un vrai festival d’effet javascript pour votre blog

Vous souhaitez mettre une petite touche de fantaisie dans votre blog voici Fireworks, une animation en javascript qui permet de faire le feu d’artifice du 14 juillet sur votre blog!

artifice

A tester sur le site du projet fireworks, tous les paramètres sont entièrement customisables (tailles, durée, zone de l’écran où se déroule l’action, nombre de couleurs) la performance de codage est intéressante mais l’usage de ce script reste à trouver…