Aghiuta.com est un blog de veille médiatique et politique écrit par Florin Popescu. Voici notre optimisation WordPress que nous avons effectuée pour ce blog.
Avant l'optimisation
La vitesse de chargement de la première page était de 4,3 secondes.
La page d'accueil contient 86 requêtes et 1,3 Mo.
- 14 javascripts – 505,6 ko
- Feuille de style de 20 sites – 41,1 k
- 23 fichiers – 601 ko
JS
Facebook Connect JS a 174,4 Ko et est chargé en 0,69 seconde. La Facebook Like Box peut être insérée en tant que widget de texte en copiant le code iframe de la Facebook Developers Like Box , ce qui supprime le fichier JS.
Le thème Gonzo comprend un fichier script.js qui contient 101,3 Ko. Il comprend plusieurs scripts tels que :
- vidéos en forme
- curseur flexible
- jquery assouplissement
- onglets de tabulation
- étirement du dos
- jolie lightbox photo
- élastislide
Backstretch est utilisé pour la grande image d'arrière-plan, mais au moins quatre des autres ne sont pas utilisés : flexslider, Prettyphoto, elastislide, tabber tabs.
Fitvids rend les vidéos intégrées réactives, c'est donc probablement nécessaire.
jQuery Easing produit un effet sur le clic (la diapositive du formulaire de recherche).
De plus, jQuery Easing (8,1 Ko) est à nouveau chargé par le plugin LayerSlider (26 Ko) qui n'est utilisé nulle part.
J'ai supprimé les scripts inutilisés et la taille du fichier est passée de 101,3 Ko à seulement 29 Ko.
Boutons de partage de fichiers JS
Le plugin qui met les boutons de partage sur le site a un impact assez important sur le temps de chargement :
- Plus 1 – 25,8K
- API Google – 84,2 Ko
- Twitter – 84,5K
- Barre sociale – 1,8K
Tout cela peut être résolu en utilisant un autre plugin ( Jetpack ) qui charge un seul fichier JS de 35 Ko pour tous les boutons.
jQuery peut être chargé depuis la bibliothèque Google au lieu de le charger depuis le serveur.
Le JS Addfreestats donne une erreur 404. Nous vous recommandons d'utiliser Google Analytics.
CSS
Il y a trop de fichiers CSS (20), certains chargés avec @import ce qui n'est pas la meilleure option pour les performances.
Nous avons combiné ce qui était possible (parfois la combinaison de fichiers js ou css génère des erreurs) et nous n'avons plus que 7 fichiers CSS.
Images
Les images peuvent être mieux optimisées pour le web (même qualité mais moins de Ko) et je pense qu'on peut économiser au moins 5% de chaque image.
Sur la première page, les vignettes mesurent 166 x 166 px mais les images chargées sont plus grandes, 300 x 300 px.
Les images doivent être chargées à 166x166px.
WordPress crée trop de vignettes :
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
Le site n'a besoin que de :
- 166×166 – vignettes de la première page
- 50×50 – vignettes pour la barre latérale
- 134 × 77 – vignettes des articles associés
- 290 × 166 – vignette pour les archives de catégorie
Les dimensions restantes sont inutiles et occupent de l'espace sur le serveur. Nous pouvons les supprimer et éliminer le code inutile du thème qui demande à WordPress de créer ces pouces.
Nous avons implémenté Lazy Load afin que seules les images en haut de la page (au-dessus de la ligne de flottaison) soient chargées, ce qui donne une amélioration majeure de la vitesse perçue.
Après optimisation
Après avoir supprimé le code inutile des fichiers JS, combiné les fichiers CSS, configuré correctement et mis en œuvre le cache de pages et le cache de base de données, le site Web effectue désormais 48 requêtes et en compte 634,5K.
Vitesse de chargement de la première page : 1,47 secondes.
Nous avons obtenu une amélioration des performances d'environ 60%.
Nous pouvons optimiser davantage, mais cela impliquerait de supprimer certains éléments qui fournissent des fonctionnalités spécifiques souhaitées par le propriétaire, nous nous sommes donc arrêtés ici.
Laisser un commentaire