Wide Magazine est un magazine lifestyle présentant des expériences sympas au centre-ville de Bucarest.
Bien que le magazine soit hébergé sur un VPS, la vitesse était lente. Le coût du VPS géré semblait déraisonnablement élevé.
La vitesse de chargement du site était de 6,99 secondes, les composants de la page totalisant 2,5 Mo et effectuant 113 requêtes au serveur.
La page d'accueil se chargeait :
- 30 fichiers JS – 883,2 Ko
- 11 fichiers CSS – 138,3 Ko
- 22 images CSS – 255,2 Ko
- 13 images – 1320,7 Ko
- 1 favicon – 16,9 Ko
Le score Google PageSpeed Insights était de 57/100, les recommandations étaient :
- activer la compression
- exploiter la mise en cache du navigateur
- optimiser les images
- réduit le temps de réponse du serveur
Rapport d'optimisation
Même le favicon contient trop de Ko. Nous avons fait un test, l'avons téléchargé et importé sur favicon.cc où nous en avons généré un nouveau. Nous avons obtenu un fichier de 1,6 K (bien que de moindre qualité).
Images
Les images ne sont pas optimisées et peuvent également être affichées progressivement au fur et à mesure que les visiteurs font défiler pour accélérer le chargement du contenu au-dessus de la ligne de flottaison (chargement paresseux).
Un autre problème avec l'affichage des images est qu'elles sont chargées dans leur taille d'origine (1024*682px) et que le navigateur les redimensionne à 676*450px.
Il est recommandé de télécharger les images directement dans une résolution de 676*450 px ou de définir une vignette dans cette taille particulière.
De cette façon, le navigateur fonctionne moins avec le redimensionnement des images + la taille de la page (Ko) diminue. Ces deux facteurs conduisent à l’amélioration de la vitesse de chargement.
Par exemple, nous avons pris une photo aléatoire de 163 Ko, nous l'avons redimensionnée à 676 * 450 px et après
Même laissé à 1024*682px et en l'optimisant simplement avec JPEGMini, nous avons obtenu un fichier de 90,3K, une amélioration notable par rapport aux 163K initiaux.
Fichiers JS
La prochaine chose que nous avons recherchée est le nombre et la taille globale des fichiers JS – 30 fichiers totalisant 883,2 Ko.
Et ici, nous avons également trouvé quelques problèmes.
JQuery était chargé deux fois – la version 1.9.1 (92,6 Ko) depuis code.jquery.com et la version 1.8.3 (93,6 Ko) chargée depuis le dossier WordPress local.
Même problème avec le code Google Analytics – une fois l'ancienne version, ga.js (39,8 Ko) et une fois la nouvelle version, Analytics.js (20,3 Ko).
Cela représente un supplément de 133,4K.
Il existe plusieurs fichiers JS chargés par 2 plugins qui font essentiellement la même chose, affichant des galeries de photos : NextGen Gallery et PrettyPhoto Media.
PrettyPhoto Media ne semble pas être utilisé, il peut donc être supprimé pour enregistrer environ 50 000 et 2 requêtes.
Plugins
2 plugins supplémentaires, jQuery Mega Menu et Useful Banner Manager, peuvent être supprimés. jQuery Mega Menu ne semble être utilisé nulle part. Useful Banner Manager est utilisé pour une seule bannière, qui pourrait être affichée par un simple code HTML inséré dans un widget de texte.
Le plugin ShareThis qui ajoute des boutons de partage aux publications utilise un JS de 125,1K. Il pourrait être remplacé par Jetpack qui utilise un JS de seulement 38,5K.
Facebook Like Box n'est pas implémenté de la manière la plus efficace, en utilisant un JS de 171,9K.
La méthode la plus simple et la plus efficace consiste à copier le code iframe de la page Facebook Developers Like Box et à le coller dans un widget de texte, éliminant ainsi le besoin de JS.
Le plugin Google Maps utilise quatre fichiers JS totalisant 60,7 Ko.
Tout comme avec la Like Box, Google Maps peut également être intégré à une iframe.
J'ai vérifié les 10 derniers posts et aucun n'a intégré de carte donc si ce n'est pas une fonctionnalité standard et qu'elle n'est utilisée que rarement, il est plus efficace de saisir manuellement les cartes avec des iframes dans les posts.
Ce que nous avons fait
- nous avons optimisé les images
- nous définissons le chargement progressif des images sur le site
- nous avons implémenté le cache de pages + le cache de base de données
- nous avons résolu le jQuery dupliqué
- nous avons résolu le Google Analytics JS dupliqué
- nous avons résolu la Facebook Like Box.
Le résultat
La page d'accueil compte désormais 62 composants totalisant 672,6 Ko – contre 113 éléments totalisant 2,5 Mo = une amélioration de 73 % .
La vitesse de chargement moyenne est désormais de 1,5 seconde – contre 6,99 secondes = amélioration de 78 % .
Si vous avez besoin d'un site Web WordPress plus rapide, n'hésitez pas à nous contacter et voyez ce que nous pouvons faire pour vous aider.
Laisser un commentaire