Accueil / Mes interventions / Un site qui rame sous WordPress

Un site qui rame sous WordPress

EDIT 20 Aout 2016: Changement de thème WordPress

EDIT 28 Septembre 2016: Passage au https

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
Suppression des Query Strings
Le style de police d’écran
Système de cache, d’expiration, de minification, concaténation
Minification manuelle
Les extensions WordPress
KeyCDN: Cache des serveurs de KeyCDN et Browser cache
Le TTL (time to live) DNS
Redimensionnement & compression des images
Passage au https
Ce que je n'ai pas (encore) fait

 

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:

CTRL+MAJ+I sous google chrome pour ouvrir le developper tool

CTRL+MAJ+I sous google chrome pour ouvrir le developper tool

 

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:

Google-chrome-developper-tools-addon-flip-the-script

 

Edit du 17/03/2016: 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

PS 08/11/2016: WP Asset Cleanup est une alternative gratuite (pour l'instant!) à Gonzales plugin

how-gonzales-wordpress-plugin-looks

Vue du plugin Gonzales lorsqu'on visite le site une fois connecté en tant qu'admin WordPress

 

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. Edit 08/11/2016: WP Rocket est désormais incompatible avec WordPress remove query string.. Plus d'infos ici. Mais de mon côte sur mon site, ces 2 plugins activés, je ne rencontre aucun soucis.. A vous de voir et de bien tester votre site!

Code source PCsoleil.fr avec les query string

Code source PCsoleil.fr avec les query string

Code source PCsoleil.fr sans query string

Code source PCsoleil.fr sans query string

 

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 : https://www.keycdn.com/blog/speed-up-wordpress/#gzip (une sorte de zippage avant envoi vers le navigateur)
  • 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) : https://www.keycdn.com/blog/speed-up-wordpress/#gzip
  • 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é.

EDIT 08 Juin 2016: 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:

Pigdom tools: listing des fichiers composant PCsoleil.fr

Pigdom tools: listing des fichiers composant PCsoleil.fr

 

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:

Ouverture d'un fichier JS listé sur pingdom Tools

Ouverture d'un fichier JS listé sur pingdom Tools

 

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: http://www.webrankinfo.com/dossiers/conseils/comment-eviter-penguin.

MAJ du 04 03 2016: Une extension WordPress gratuite pour mesurer l'impact des extensions sur la vitesse de chargement: https://fr.wordpress.org/plugins/p3-profiler/.

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é.

Popup sur les photos : Easy Fancybox : Futile mais très léger pour afficher les photos dans des lightbox.

NB: 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.

EDIT 20 Mai 2016: Pour la compatibilité AMP (mon article ici) j'ai rajouté entre-temps d'autres plugins: AMP par auttomatic, Custom AMP de Lamvt, et Schema App Structured Data. Pas d'impact sur le chargement.

 

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:

KeyCDN-acces-Zones-listing

 

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

KeyCDN-Zones-show-advanced-features

 

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

KeyCDN-temps-de-cache-des-serveurs-CDN-1-semaine

 

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) :

KeyCDN-expire-in-browser-by-origin-server

 

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:

TTL-acces-listing-OVH

 

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:

TTL-modif-pcsoleil-86400-s-24H

 

 

Redimensionnement et compression des images :

Edit 12 03 2016: Désormais le plugin Wordress Imagify est disponible: https://wordpress.org/plugins/imagify/ . Plus besoin d'aller sur le site app.imagify.io pour optimiser ses photos on le fait directement depuis WordPress!

Venons en à la partie compression: pour ça j’utilise ce service en ligne gratuit (pour un certain volume/jour): https://app.imagify.io. Je souhaite que les images affichées dans les lightbox fassent au maximum 1680 pixels de large: en plus du redimensionnement je coche Resize images et rentre seulement la largeur voulue (En version logiciel j'aime bien RIOT):

 Vous pouvez y aller sans crainte, imagify a été développé par les créateurs de WP rocket

Vous pouvez y aller sans crainte, imagify a été développé par les créateurs de WP rocket

 

 

Ensuite sous WordPress en rubrique Media>Ajouter...Cependant WordPress redimensionne les images de façon trop réduite en regard des dimensions de mon site. Rendez-vous donc dans le tableau de bord de WordPress>Réglages>Média. Je demande un retaillage automatique des images uploadées qui puisse convenir au canevas de PCsoleil.fr:

Wordpress-reglage-taille-images-petit-moyen-grand-format

 

 

EDIT 20 Aout 2016, changement de thème WordPress: ça y est Thème WordPress changé pour Jarida (auparavant thème 3clicks): Énormément de code inutile en moins, compatibilité même avec Internet explorer 9. Pour dire; je n'ai même plus besoin de minifier le code via WP Rocket! Tous les scripts js et css de Jarida sont utiles, ce qui fait que depuis le plugin Gonzales, je ne désactive plus que les scripts tiers (les plugins) comme contact form7 sur les pages qui n'ont pas de formulaire de contact! (Ou encore les codes de Easy Fancybox sur celles qui n'ont pas de photos).

jarida-nouveau-theme-wordpress-optimise-pour-performance-pcsoleil

Edit 20 Sept 2016, passage au https: désormais OVH permet de passer gratuitement son site en https. Il n'y a pas de gain de vitesse pour mon site car le HTTP/2 n'est pas encore implémenté sur les hébergements mutualisés OVH.. Mais:

  • Ça va venir car le gain de vitesse d'affichage en http/2 est conséquent: mon site sera prêt (ou sinon je migre vers SiteGround ou O2Switch...)
  • Google donne un boost SEO sur les sites sécurisés
  • Mon formulaire de contact: l'@ mail et le message des visiteurs ne transitent pas en clair sur le Web

Comment faire? Déjà les bases de mon site PCsoleil informatique: WordPress, Hébergement mutualisé OVH 90 plan, Serveur CDN KeyCDN

Plugin WordPress: J'installe Really Simple SSL , cet addons modifie à la volée les requêtes http en https, ainsi nul besoin de modifier les liens des pages, articles et menus. Un problème? on désactive le plugin.

Interface OVH: Rien à faire pour l'instant côté interface client de OVH, le certificat SSL est préinstallé

Serveur CDN KeyCDN: Là c'est plus compliqué.. Depuis l'interface admin de KeyCDN je crée une Zone liée à la nouvelle url de mon site:

keycdn-creation-zone-https

Puis je me clic sur "Manage>Edit" et rend visibles les options avancées de cette nouvelle zone en cliquant sur "Show advanced Features", j'active alors le le certificat Let's Encrypt depuis le menu SSL:

keycdn-zone-certificat-lets-encrypt

Toujours sur KeyCDN mais depuis le menu ZoneAliases, je paramètre un enregistrement DNS avec un beau nommage (cdn.pcsoleil.fr) liée à ma nouvelle zone:

keycdn-creation-zonealias-liee-a-zonne-httpspcsoleil

Mais ce n'est pas KeyCDN qui va pouvoir créer et propager l'enregistrement cdn.pcsoleil.fr: Ça se passe depuis l'interface d'admin de OVH, depuis le menu Domaine> Nom de mon site> Zone DNS, je crée un CNAME. La cible du sous-domaine créé est le nom de ma zone KeyCDN.  (attention au point à taper à la fin du nom de cible, sinon OVH considèrera le nom de domaine comme un sous domaine de votre site et rajoutera  à la suite nom-de-votre-site.fr):

ovh-interface-creation-zone-dns-liee-a-keycdn-1

Du coup voilà à quoi ça doit ressembler depuis le menu Domaine>Nom-du-site>Zone DNS:

ovh-interface-creation-zone-dns-liee-a-keycdn

Ce que je n'ai pas fait (mais que je mettrais en place un jour):

En hébergeur je suis sur OVH, mais à terme je vais changer soit pour SiteGround soit O2Switch: les caractéristiques sont top: Pas de disque dur mais des SSD comme type de stockage, Essai de 30 jours, satisfait ou remboursé, SSL inclus. Et pour ce qui est de SiteGround qui est ma préférence: compatible Http 2.0, Conseillé par les créateurs de WP Rocket . Par contre au lieu de 4€ par mois avec OVH il faudra compter à la louche 10€ TTC.