Agilité, Développement Java, Nouvelles technologies et plus…
  • rss
  • Accueil
  • Management
  • Programmation agile
  • Technologie
  • Linux
  • Evénement
  • App Android
  • Contact
  • A propos de l'auteur
  • English
  • Francais

Les meilleurs outils gratuits pour tester et optimiser une application ou un site web

Fabian Piau | dimanche 15 novembre 2015 - 17:58
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 English version available

Voici quelques outils en ligne pour vous assurer que votre site web soit performant, ne contienne pas d’erreurs et soit optimisé pour le référencement. Ces trois caractéristiques sont très importantes car elles forment un cercle vertueux en se renforcant mutuellement. Aucune ne doit donc être négligée.


GTMetrix

Performance

Après avoir analysé votre site, GTMetrix vous donnera de précieux conseils pour améliorer sa performance.

  • Minimiser les ressources à charger pour diminuer le nombre de requêtes HTTP (utilisation de sprites, fusion des fichiers)
  • Réduire la taille de vos ressources. Il existe de très bons compresseurs en ligne pour les images (TinyPNG), les fichiers CSS et Javascript.
  • Spécifier les dimensions des images, le navigateur n’a plus besoin de faire ce calcul
  • Utiliser le cache du navigateur


SEO SiteCheckup

Référencement et SEO

Vous pouvez vérifier votre référencement avec SEO SiteCheckup. Cet outil vous donnera de précieuses informations afin d’améliorer la visibilité de votre site sur Internet.

  • Utilisation des balises et attributs HTML standards (title, description, h1, h2, alt…)
  • Présence du plan du site (fichier sitemap)
  • Détection des liens cassés
  • Détection de l’activité sociale liée à votre site, votre présence sur les réseaux sociaux


Outils W3C

Validation technique

Vous devez aussi vous assurer que votre site est valide d’un point de vue technique. Je vous conseille les outils officiels fournis par le World Wide Web Consortium (W3C). Chaque outil est spécifique pour un usage particulier. Par exemple, vous trouverez un outil pour valider:

  • Les fichiers HTML
  • Les fichiers CSS
  • Les liens
  • Votre flux RSS

Il n’est pas nécessaire de valider chacune de vos pages, une par une. La validation de la page d’accueil est en général suffisante, les autres pages en découlant.


Mail tester

Email

Votre application envoie des emails? Avec Mail tester, vous pouvez tester la pertinence et le format de vos emails. Cet outil vous permettra de savoir si votre courrier est considéré comme indésirable par les clients de messagerie et vous donnera également des astuces pour éviter une telle situation.

  • Le contenu doit s’adapter à la taille de l’écran (design responsive)
  • Un format texte alternatif doit être présent pour les clients email qui ne peuvent lire du HTML
  • La configuration de l’authentification de vos emails doit être valide (SPF, DKIM)

Outils W3C


Pour vous donner une idée des résultats de votre site par rapport aux autres, la plupart des outils énoncés dans l’article vous attribueront une note, à vous de jouer pour augmenter votre score!

Articles similaires

Maven sitePlus loin avec le Maven Site wordpress-hackerConseils pour sécuriser votre site WordPress WatiNWatiN, un outil pour tester les applications web printerOptimiser votre site web pour l’impression en 5 minutes
Commentaires
1 Commentaire »
Catégories
Technologie
Tags
cache, online tool, performance, seo, web
Flux rss des commentaires Flux rss des commentaires

Booster votre blog WordPress: W3 Total Cache + CloudFlare

Fabian Piau | dimanche 28 décembre 2014 - 18:00
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Pocket

 English version available

Un blogueur WordPress a une fâcheuse tendance à installer de nombreux plugins sur son blog pour ajouter des fonctionnalités et de l’interactivité. Lisez l’article Extensions WordPress de CarmaBlog pour vous en convaincre. Au fil du temps, le blog devient de plus en plus lent et long à charger. Je suis arrivé à un point où je pense qu’il fallait faire quelque chose…

Le site GTmetrix permet de calculer la performance de n’importe quel site en lui assignant une note globale et surtout il fournit un rapport détaillé pour vous aider à optimiser et améliorer votre note. Le but est d’obtenir un score honorable, je dirais vers les 75-85% ce qui correspond à des notes entre B et C. Pour CarmaBlog, le résultat était peu glorieux avec un résultat proche des 60% et donc du D, le temps de chargement de la page d’accueil (soit 3 articles) autour des 6-7 secondes était franchement tout juste passable.


Un plugin de gestion de cache: W3 Total Cache

En cette fin d’année, j’ai donc décidé de m’attaquer directement au problème en installant un plugin WordPress pour ajouter la gestion de cache. Pour ceux qui ne connaissent pas, un cache est un endroit (généralement de l’espace disque directement sur le serveur) où l’on stocke les pages déjà pré-calculées. Le serveur affiche directement cette page plutôt que de recalculer l’original ce qui améliore sensiblement les performances. Si vous modifiez la page, il faut alors penser à purger le cache pour que les modifications soient visibles. Pour être honnête, j’étais un peu récalcitrant au début de peur de casser mon site, mais son faible résultat sous GTmetrix m’a un peu poussé.

Mon choix s’est finalement porté sur le plugin W3 Total Cache très populaire. Mon choix est un peu arbitraire, en fait je me suis basé seulement sur le nombre d’utilisateurs et les avis favorables. Pour ce genre de plugin, la configuration est très importante et c’est sans doute la partie la plus délicate. Il faut y aller pas à pas et prendre son mal en patience… Le meilleur moyen de tout casser et d’activer toutes les optimisations en même temps et ensuite de voir le résultat (mais si vous avez l’amour du risque, c’est aussi une bonne option…).

Logo W3 Total Cache

Finalement, j’ai pu activer la majorité des optimisations. Je me suis tout de même rendu compte que la minimisation des fichiers JS faisait littéralement planter le navigateur sur certains articles (je l’ai donc naturellement désactivée). Aussi, pour une raison inconnue, le cache des pages en utilisant l’option « Disk:enhanced » engendrait des problèmes d’encoding (ah! ces fameux caractères français!) alors que « Disk:Basics » non, j’ai donc opté pour la seconde option, même si elle est moins efficace.

En fouillant la configuration, je me suis rendu compte que W3 Total Cache supportait lui-même des extensions, notamment une extension pour Feedburner et une extension pour WordPress SEO. Comme je les utilise tous les deux, cela tombait bien.


Des optimisations manuelles sur les images

Une fois la gestion de cache mise en place et correctement configurée, j’ai pu noter une progression des performances significatives, mais pas transcendantes. Le site GTmetrix donne aussi de nombreux indicateurs pour améliorer les performances, voici les deux actions manuelles que j’ai réalisées:

  • Optimisation des images. GTmetrix vous fournit les images optimisées que vous pouvez télécharger et utiliser pour remplacer vos anciennes images, vous gagnez facilement 50% de taille sans perte de qualité… Bluffant! Imaginez le gain apporté sur quelques images de 200-300 ko. Aussi, je vous conseille de bookmarker le site TinyPNG, une aide précieuse pour faire maigrir vos prochaines images. Cette optimisation est particulièrement importante pour les images communes, celles situées dans le header, footer ou autres sidebars… et qui seront forcément chargées lorsque l’on navigue sur votre site.
  • Ajout des dimensions sur les images. Les attributs width et height sur les balises img. On n’y pense pas forcément, mais cela évite au navigateur de faire le calcul à votre place et donc cela augmente les performances. De plus, la place occupée par les images est déjà définie ce qui évite de faire « bouger » la page ou la scrollbar (si vous n’avez pas compris, voyez cela comme un point positif).

Ce sont les deux grandes optimisations que j’ai dû faire manuellement, W3 Total Cache gère le reste lui-même de manière automatique.


Un CDN gratuit: CloudFlare

Seconde étape, je vois la possibilité de coupler CloudFlare à W3 Total Cache grâce à une extension interne. Je vais voir du côté de CloudFlare. En fait, j’en avais déjà entendu parler, mais sans plus.

Logo CloudFlare

Bonne nouvelle, ils ont une offre gratuite et il n’y a pas de pub ni de limitations particulières (pour un blog perso comme le mien en tout cas). Mais en fait c’est quoi? CloudFlare agit comme une interface entre le visiteur et votre hébergeur (1and1 dans mon cas) et fait office de CDN (Content Delivery Network). C’est un peu du chinois même pour moi, mais ça a l’air d’influer grandement sur les perfs et GTMetrix me conseillait l’utilisation d’un CDN alors… Par contre, je vois qu’il y a de la reconfiguration DNS à faire, brrr ça fait peur. Je ne suis pas un pro en réseau, mais le DNS (Domain Name System) est un peu comme un annuaire téléphonique, à partir du domaine, il définit l’adresse IP du serveur à contacter. Changer de DNS, c’est un peu comme changer d’adresse et si le déménagement se passe mal, vous n’êtes plus accessible. Après réflexion, je me lance, quitte à tout casser, autant le faire pendant la période de fête où le trafic sur mon site sera sûrement plus faible.

Je crée donc mon compte CloudFlare, j’ajoute le site CarmaBlog, je laisse la configuration par défaut pour la plupart des options. Je choisis une sécurité assez basse (de toute façon, ça pourra difficilement être pire qu’avant), je choisis CDN seulement pour le profil de performance, car W3 Total Cache s’occupe des optimisations, je n’ai pas envie de tester un autre profil et voir arriver des conflits (restons raisonnable). L’assistant de configuration est très bien fait et s’adresse à des novices. Puis, arrive cette fameuse configuration DNS, CloudFlare me demande de mettre à jour mes paramètres DNS côté 1and1… Oups, les choses sérieuses commencent!

C’est la phase délicate, car c’est là où on peut rendre son site parfaitement indisponible. Je me connecte fébrilement à mon compte client 1and1, sélectionne la gestion des domaines, tout un tas de messages du style « Etes-vous conscient de ce que vous faites? », je ne suis pas persuadé moi-même, mais je mets « oui » quand même et je renseigne les champs pour pointer vers les deux nouveaux DNS de CloudFlare. Le changement DNS peut prendre entre 1h et 48h, c’est de la configuration réseau, c’est au-delà de mes compétences, je confirme donc mon choix. Dans la foulée, j’active l’extension interne CloudFlare de W3 Total Cache et je renseigne les champs pour faire le lien avec mon compte… Il est déjà tard, je me couche.

Le lendemain matin, premier réflexe, je vais sur le blog. Ouf, il est toujours disponible. Je note déjà une certaine vitesse (peut-être psychologique, nous verrons dans la conclusion…). Je me connecte sur mon compte CloudFlare… Victoire! CarmaBlog est bien configuré, la reconfiguration DNS s’est bien déroulée, maintenant tout le trafic passe par CloudFlare. CloudFlare fournit un tableau de bord en indiquant les visites, les menaces (oui!), la bande passante économisée, etc. Je me pose alors la question si le fait de passer par un fournisseur tiers est un choix judicieux? Que se passera-t-il si le DNS CloudFlare tombe? Mais après réflexion, un serveur DNS tombe rarement et s’il tombe, il y a toujours le 2ème de secours pour prendre la relève. Et le problème était déjà le même avec 1and1, donc il ne devrait pas y avoir de soucis! Dans le pire des cas, je peux toujours revenir à la configuration précédente et repasser par le DNS de 1and1 en moins de 24h.


Conclusion

Je me balade un peu sur le blog pour être sûr que tout fonctionne, j’active la navigation privée pour mettre toutes les chances de côté et être certain que le navigateur n’utilise pas des données cachées. Tout fonctionne, c’est rapide et fluide, vraiment une bonne nouvelle. Je soumets à nouveau le site sur GTmetrix, et là… Je gagne nettement en performance. Je passe la barre des 80% et je me vois attribuer la note B. La note A est accessible à partir de 90%, mais c’est un score difficilement atteignable si votre blog a pas mal de plugins activés et utilise un thème assez complexe.

Après toutes ces optimisations, je suis passé d’une page à charger de 1.2 mo à 800 ko (cela dépend bien évidemment des images des articles, mais j’ai fait la comparaison sur la même page pour me donner une bonne idée), cela fait un gain de 33%. Le nombre de requêtes quant à lui est passé de plus de 100 à environ 65 (grâce à la combinaison des fichiers CSS et JS entre autres). J’avais déjà noté un temps de chargement plus rapide avec W3 Total Cache, mais avec CloudFlare en plus, je suis passé en dessous de la barre des 3 secondes contre 6-7 secondes auparavant (soit un peu plus de 50% de gain).

Le combo W3 Total Cache + CloudFlare marche vraiment du tonnerre! Cet article est davantage un retour d’expérience qu’un tutoriel, mais vous trouverez toutes les ressources nécessaires sur internet si vous décidez vous aussi de vous lancer.

Foncez!

Non seulement mon hébergeur doit être soulagé, car une bonne partie de la bande passante est déportée vers les serveurs de CloudFlare (architecture bien plus puissante), mais mes visiteurs aussi, car la page s’affiche bien plus rapidement. Aujourd’hui, la seule question que je me pose c’est: pourquoi ne l’ai-je pas fait plus tôt?

Articles similaires

Mobile devicesUne version mobile de votre Blog WordPress WordPressExtensions WordPress de CarmaBlog Clean browser cacheLes fichiers CSS et Javascript jouent à cache-cache avec les navigateurs client wordpress-hackerConseils pour sécuriser votre site WordPress
Commentaires
4 Commentaires »
Catégories
Technologie
Tags
cache, cloudflare, dns, performance, w3 total cache, wordpress
Flux rss des commentaires Flux rss des commentaires
Page 1 sur 212
Télécharger l'app CarmaBlog

Flux RSS

  • Flux RSS RSS - Articles
  • Flux RSS RSS - Commentaires

Articles les plus vus

  • Changer la langue de Firefox - 116 375 vues
  • Réaliser un sondage en ligne avec Google Forms / Drive / Docs - 64 403 vues
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - 56 248 vues
  • Personnaliser Gnome 3 (Shell) - 30 809 vues
  • La signification d’URL, URI et URN - 18 408 vues
  • Java EE & CDI vs. Spring - 15 986 vues
  • Open Street Map, une meilleure carte que Google Maps? - 15 801 vues
  • Comparaison NoSQL: Couchbase et MongoDB - 14 693 vues
  • API, REST, JSON, XML, HTTP, URI… Vous parlez quelle langue en fait? - 13 731 vues
  • Une première approche du Camel d’Apache - 13 597 vues

Commentaires récents

  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsOui, dans Google Forms, vous pouvez empêcher les p…
  • BENECH Fabien sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsBonjour, J'ai crée 1 questionnaire via Forms,…
  • SANKARA TIDIANE sur Formation en ligne gratuite sur MongoDBJ'aimerai suivre
  • Pauline sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsMerci Fabian, mais le but étant que nos clients pu…
  • Fabian Piau sur FAQ – Sondage en ligne avec Google Forms / Drive / DocsProbablement mais ces options sont en général paya…

Articles récents

  • Comment écrire un article de blog? En tout cas à ma façon! - Il y a 2 ans et 5 mois
  • Attaques de robots: vous n’êtes pas seul… - Il y a 4 ans et 1 mois
  • Flagger – Monitorer vos déploiements Canary avec Grafana - Il y a 4 ans et 10 mois
  • Flagger – Déploiements Canary sur Kubernetes - Il y a 5 ans et 2 jours
  • Flagger – Premiers pas avec Istio et Kubernetes - Il y a 5 ans et 2 semaines
  • CoderDojo Expedia à Londres - Il y a 5 ans et 10 mois
  • Etre bénévole à Devoxx4Kids - Il y a 6 ans et 2 semaines
  • Une migration Java 11 réussie - Il y a 6 ans et 4 mois
  • Conseils pour sécuriser votre site WordPress - Il y a 6 ans et 7 mois
  • Devoxx UK 2018 – Jour 2 - Il y a 6 ans et 11 mois
  • Devoxx UK 2018 – Jour 1 - Il y a 7 ans et 12 heures
  • Wise, Revolut et Monzo, une petite révolution dans le monde des expatriés et voyageurs - Il y a 7 ans et 3 mois
  • Autocomplétion pour Git - Il y a 8 ans et 1 jour
  • Swagger, la documentation API automatisée - Il y a 8 ans et 2 mois
  • Architecture Microservices – Les bonnes pratiques - Il y a 8 ans et 7 mois
Offre moi un café

Langue

  • Français
  • English

Suivez-moi!

Suivez-moi sur Linkedin
Suivez-moi sur Twitter
Suivez-moi sur Stackoverflow
Suivez-moi sur Github
Suivez-moi sur Rss
Link to my Contact

Abonnement email

Saisissez votre adresse email pour être informé des nouveaux articles.

Étiquettes

.net agile agilité android bash blog bonnes pratiques cache cloud conférence css devoxx docker développeur eclipse extreme programming firefox flagger google helm hibernate informatique intégration continue istio java jug kubernetes londres mobilité informatique métier outil panorama partage performance plugin programmeur script société spring sécurité tdd test ubuntu windows wordpress

Liens

  • Blog Ippon Technologies
  • Blog Publicis Sapient
  • Blog Zenika
  • Classpert
  • CommitStrip
  • Coursera
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • OCTO talks !
  • The Twelve-Factor App

Catégories

  • Evénement (15)
  • Linux (3)
  • Management (8)
  • Programmation agile (29)
  • Technologie (45)

Archives

  • décembre 2022 (1)
  • avril 2021 (1)
  • juin 2020 (1)
  • mai 2020 (2)
  • juillet 2019 (1)
  • mai 2019 (1)
  • décembre 2018 (1)
  • octobre 2018 (1)
  • juin 2018 (1)
  • mai 2018 (1)
  • janvier 2018 (1)
  • mai 2017 (1)
  • mars 2017 (1)
  • octobre 2016 (1)
  • avril 2016 (2)
  • mars 2016 (1)
  • novembre 2015 (1)
  • mai 2015 (1)
  • février 2015 (1)
  • décembre 2014 (1)
  • novembre 2014 (1)
  • septembre 2014 (2)
  • août 2014 (1)
  • juillet 2014 (2)
  • juin 2014 (1)
  • avril 2014 (1)
  • mars 2014 (1)
  • février 2014 (2)
  • janvier 2014 (1)
  • décembre 2013 (1)
  • novembre 2013 (1)
  • octobre 2013 (3)
  • septembre 2013 (5)
  • juillet 2013 (1)
  • juin 2013 (1)
  • mai 2013 (1)
  • avril 2013 (1)
  • mars 2013 (2)
  • février 2013 (1)
  • janvier 2013 (2)
  • décembre 2012 (2)
  • octobre 2012 (1)
  • septembre 2012 (1)
  • juillet 2012 (1)
  • mai 2012 (1)
  • avril 2012 (1)
  • mars 2012 (1)
  • février 2012 (1)
  • janvier 2012 (2)
  • décembre 2011 (1)
  • novembre 2011 (2)
  • octobre 2011 (2)
  • septembre 2011 (1)
  • juillet 2011 (1)
  • juin 2011 (2)
  • avril 2011 (1)
  • mars 2011 (1)
  • février 2011 (1)
  • janvier 2011 (2)
  • novembre 2010 (2)
  • septembre 2010 (1)
  • août 2010 (1)
  • juillet 2010 (1)
  • juin 2010 (1)
  • mai 2010 (1)
  • avril 2010 (1)
  • mars 2010 (1)
  • février 2010 (1)
  • décembre 2009 (1)
  • novembre 2009 (1)
  • octobre 2009 (2)
  • septembre 2009 (2)
  • août 2009 (3)
  • juillet 2009 (1)
  • juin 2009 (2)
Suivez-moi sur Twitter
Suivez-moi sur Linkedin
Suivez-moi sur Stackoverflow
Suivez-moi sur Rss
Link to my Contact
Suivez-moi sur Github
 
Fabian Piau | © 2009 - 2025
Tous droits réservés | Haut ↑