Un Webmaster (très) éloigné me demande de diagnostiquer un site qu’il a créé et qui est trop lent : en effet le temps d’affichage est de 7 secondes ! A savoir que statistiquement, 40% des internautes quittent un site après une attente de 3 secondes. Sans oublier que je parle là d’une connexion ADSL : les utilisateurs de terminaux mobiles, la plupart en 3G, exploitent une bande passante 40% plus lente donc… Faites le calcul. Autre remarque ; Google search pénalise les sites Webs trop lents. Comment fait ’il pour savoir ? Grace aux données recueillis via son navigateur Web : Google Chrome.

Par soucis de confidentialité, je ne dévoilerais pas le site internet à diagnostiquer dans cet article ni le nom de son Webmaster, mais comme la configuration de mon site PCsoleil.fr est équivalente je vais en détailler toutes les techniques d’optimisation.

La configuration de mon site : CMS WordPress | Thème 3Clicks | Hébergeur OVH en mutualisé, offre 90 plan | Apache, PHP, base de donnée MySQL. C’est pas « du lourd » surtout que c’est du mutualisé (plusieurs sites web tournent sur le même serveur)… en même temps je ne paie mon hébergeur OVH que 4€45/par mois TTC. Malgré tout le temps de chargement est de 500 millisecondes à 1 seconde par page.

Vidage des fichiers JavaScript inutiles

Oui vous avez bien lu ! Attention je parle bien d’effacer le CONTENU de certains fichiers, par de les supprimer ceci pour éviter les erreurs sur les outils d’analyse SEO & d’optimisation comme Google page Speed. Certains fichiers JavaScript de WordPress, de mon thème et des extensions n’apportent rien ou si peu, comme les fichiers jquery.smoothscroll.js et jquery.magnific-popup.js. Comment les identifier ? Car il n’est pas question de lire tout le code de WordPress… Avec Google chrome developper tools (CTRL+Maj+I une fois sous Google Chome) puis clic sur onglet Networks:

Ensuite avec l’addons Flip the Script pour Google Chrome, je peux éditer virtuellement les fichiers JS & CSS sans toucher aux fichiers originaux via FTP. Si le vidage d’un fichier ne prête pas à conséquence (sur PC et mobiles) j’efface réellement son contenu via FTP:

MAJ: Malheureusement Flip the script n’est plus disponible sous Google Chrome en tout cas

J’ai trouvé un très intéressant plugin WordPress, payant certes, Gonzales plugin,  19$ à ce jour. Que fait’ il ? il empêche le chargement des CSS et JS inutiles à certaines pages (ex: script de formulaire chargé sur chaque page alors que celui-ci n’est pertinent qu’en page de contact).  Où sont ses réglages? Quand vous visitez votre site en tant qu’administrateur WordPress, vous avez sans doute remarqué la Dashboard: barre horizontale noire en haut de votre site; vous y verrez l’entrée Gonzales et le listing de tous les CSS et JS qui se chargent sur la page courante: à vous ensuite de cocher les entrées que vous jugez inutile

Suppression des Query Strings ( ?)

Ce sont des URLS contenus dans le code source des pages Web qui ont un n° de versions précédé du signe ? Ce n° de version n’est pas utile pour le visiteur et surtout, cette écriture peut empêcher la mise en cache. Il faut les retirer avec l’extension WordPress Remove query string from static resources qui est compatible avec WP Rocket.

Le style de police d’écran

Les Web Fonts sont disponibles depuis mon thème wordpress Jarida: Ce sont des polices de texte téléchargées en temps réel depuis la plateforme Google Web font. En utilisant la police Open san Regular, on gagne approximativement ½ seconde face à d’autres Webfonts plus exotiques… Sauf que j’ai décidé que les google fonts ne m’apportent rien en terme de design. Elles me coûtent 200ms de chargement. J’utilise donc la police Verdana, sans temps de chargement car intégrée à tous les navigateurs Web.

Système de cache, d’expiration, de minification, concaténation

Le but principal d’un système de cache fait pour WordPress est de générer des pages statiques HTML au lieu de faire appel à la base de donnée et au moteur PHP côté serveur. Auparavant j’utilisais l’extension WordPress W3 total cache. Mais comme il s’agit d’une usine à gaz j’ai opté pour une extension payante : WP rocket (à ce jour novembre 2016 29€). C’est vrai qu’il est payant.. Mais il s’occupe de beaucoup de choses :

  • Minification CSS, HTML et JavaScript automatiques: concrètement WP Rocket retire les espaces en trop, sauts de ligne et commentaire des fichiers en question.
  • Fusionner automatiquement feuilles de style et code JavaScript en un nombre réduit de fichiers
  • Générer le code qui permet la compression des données
  • Générer le code qui dit au navigateur de garder des ressources en cache (Browser caching), par exemple les images, au lieu de les télécharger à chaque visite du site (fonction Expirer headers ou Browser caching)
  • Interfaçage facile avec un service CDN (Content Delivery Network) Cf. chapitre CDN et Domain Sharing
  • Différer le chargement de fichiers CSS et JS en bas de page : Fonction que j’ai utilisée pour les extensions WordPress Easy Fancybox et Slider pro (Cf. chapitre Les extensions WordPress)
  • Pré-chargement DNS : Lorsqu’on tape le nom d’un site, il faut en moyenne 200 milli-secondes pour que le service DNS trouve l’@ IP du site correspondant. Mais sous WordPress il y a beaucoup d’appels de ce type : fonts.googleapis.com, fonts.gstatic.com, slideshare.net, public.slidesharecdn.com et j’en passe. Le pré-chargement DNS résout tous ces noms de domaine en arrière-plan, lors de l’ouverture de n’importe quelle page de PCsoleil.fr. Ainsi la navigation interne sur mon site gagne en rapidité.
  • Choix des pages à ne pas mettre en cache : Utile si j’avais un calendrier en ligne, type Event Calendar. Je n’utilise pas cette fonctionnalité.

 

J’ai désactivé la minification des fichiers CSS dans les options de WP Rocket, car ce process casse le design de PCsoleil.fr (des éléments comme le menu apparaissent un peu n’importe où, et sans design (genre une simple ligne de lien textuel style Web des années 2000)

Minification manuelle

Pour certains fichiers CSS & JS, j’utilise un service de minification en ligne: http://refresh-sf.com. Mais là aussi pas question de minifier tous les fichiers de WordPress: Je dois lister ceux qui composent au final mon site c-a-d ceux qu’on voit lorsque l’on regarde le code source de mes pages Web. 

Pour lister les fichiers « actifs », je me rend sur Pindgom tools , je renseigne l’URL de mon site et clic sur Test Now: Tous ces fichiers ont alors listés, avec leurs chemins: Je sais donc où ils sont sur mon espace FTP:

Et je peux même cliquer sur l’un deux pour en voir le contenu et voir si celui-ci et déjà minifié ou pas:

Le cas contraire, je copie-colle le contenu dans http://refresh-sf.com, Sauvegarde le code minifié et -via FTP- remplace le contenu du fichier correspondant. Je teste ensuite si l’affichage de mon site est OK sur mobile et PC, car j’ai eu plusieurs cas où minifier certains fichiers cassait le design ou des fonctionnalités le PCsoleil.fr.

Les extensions WordPress

Le minimum possible, j’ai même supprimé le Yoast SEO pack : Inutile si on prend de temps de faire des titres de page et des descriptions (extraits sous WordPress) correctes : Google search est désormais assez « intelligent » pour comprendre une page. De plus je ne crois plus au référencement artificiel détricoté mois après moi par Google.

Le slider en page d’acceuil : J’en cherchai un qui ne soit pas trop usine à gaz et j’ai choisi Slider pro avec son système de cache (chaque slider est mis en cache, donc chargé sous forme de fichiers HTML au lieu d’un appel base de donnée/interprétation PHP) et sa fonction lazyload (les images du slider ne sont téléchargés QUE lorsqu’elles apparaissent à l’écran). Le lazy load était pour moi important: Si les 25 images de mon slider étaient téléchargés à l’ouverture de PCsoleil.fr cela ralentirai considérablement sa rapidité.

J’ai différé le chargement des fichiers JavaScript de Slider pro et Easy fancybox dans le footer (bas de page) grâce à WP Rocket (Admin WordPress > Réglages > WP Rocket > Options avancées > Fichiers JS à inclure dans le footer). Pour les identifier j’ai procédé de la même manière que pour vider les fichiers JS inutiles : Avec Google Chrome developper Tool, onglet Networks.

KeyCDN, Cache des serveurs de KeyCDN et Browser cache

Les ressources mises en cache sur les serveurs de KeyCDN (JS, CSS et images) expirent au bout de 1440 minutes par défaut, soit 24H. Après ce délai, ces ressources sont mises à jour depuis mon serveur OVH, occasionnant un ralentissement. Ce serait idéal si j’écrivais tous les jours un article mais ce n’est pas le cas.

J’augmente alors ce délais pour le passer à 10080 minutes (soit 7 jours) depuis l’interface de KeyCDN > Zones. Mon unique « Zone » apparait; je clic sur Manage puis Edit:

Pour voir et changer les réglages avancés je clic sur Show advanced features:

Enfin, l’option Max Expires (in minutes) que je passe de 1440 mn (par défaut) à 10080 mn:

Dans les option avancées de ma Zone ALL, ont peut voir que KeyCDN donne une valeur d’expiration au Browser caching (cache du navigateur). Cette option s’appel Expire (in minutes), mais ça ne m’arrange pas car WP rocket s’en occupe déjà, et plus finement (Voyez votre fichier .htaccess une fois WP Rocket installé). 

Je désactive la prise en charge de ce type d’expiration par KeyCDN en donnant la valeur 0 à l’option Expire (in minutes) :

Le TTL (time to live) DNS

Le TTL du point de vue DNS, c’est le délai durant lequel la correspondance adresse IP/Nom De Domaine (NDD) est gardée dans le cache des navigateurs. Par défaut OVH (mon hébergeur) dit aux navigateurs de garder en mémoire cette correspondance durant 60 secondes; hors on a vu que la résolution DNS prend en moyenne 200 ms pour chaque résolution de nom (CF chapitre système de cache, compression et minification): il faut augmenter ce délai ridicule!

Pour ce faire il faut que j’aille dans mon interface d’administration OVH, menu Domaines > PCsoleil.fr > Zone DNS:

Je paramètre l’entrée pcsoleil.fr pour forcer sa correspondance IP / NDD durant 24H (86400 secondes) dans la mémoire des navigateurs Web:

Redimensionnement et compression des images

Le plugin Wordress Imagify est disponible. Plus besoin d’aller sur le site app.imagify.io pour optimiser ses photos on le fait directement depuis WordPress! Vous pouvez y aller sans crainte, imagify a été développé par les créateurs de WP rocket.