Manofmany.com est un magazine de style australien dédié aux hommes.
Chaque jour, l'équipe publie des trucs sympas en matière de style, de gadgets, de technologie, etc.
Après une discussion avec eux sur Google+, nous leur avons remis ce simple rapport d'optimisation.
Temps de chargement
Différents outils affichent différentes données :
- Barre d'outils Chrome SEO – 7,43 secondes
- Outils Pingdom – 12.62 décembre
- GTMetrix – 9,86 secondes
- Webpagetest.org – 24,14 secondes
Taille des pages
Différents outils affichent différentes données :
- YSlow : 3096,5 octets
- Outils Pingdom : 4,0 Mo
- GTMetrix : 3,88 Mo
- Webpagetesst.org : 3,816 Ko
Je vais utiliser un seul outil plus loin, YSlow.
Composants
Trop de requêtes http : 51. 51 ce n'est pas énorme mais cela peut être amélioré.
Javascript
Il y a 15 fichiers js, d'une taille totale de 627,1 Ko :
- https://apis.google.com/js/plusone.js – 22,9 k
- http://platform.twitter.com/widgets.js – 80,7 ko
- http://www.google-analytics.com/ga.js – 37,3 ko
- http://edge.quantserve.com/quant.js – 5,8 ko
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 ko
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 ko
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1 ko
- http://s3.buysellads.com/ac/bsa.js – 16,1 k
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1 k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 ko
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 ko
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 ko
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 ko
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 ko
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 ko
JQuery.js pourrait être chargé depuis la bibliothèque Google pour une meilleure vitesse.
Le plus gros problème concerne les fichiers JS des réseaux sociaux ; ils n'utilisent certainement pas le meilleur plugin pour le partage sur les réseaux sociaux. Cela pourrait être fait avec un seul JS de 38,5 ko ou même sans script.
Cela va réduire 249,6 Ko et laisser le numéro JS à 11. C'est une amélioration considérable de la taille de la page.
CSS
Il y a 12 fichiers CSS d'une taille totale de 63,7 Ko.
La taille n'est pas grande mais le nombre est plutôt élevé.
3 fichiers peuvent être combinés en un seul : le thème styles.css et les plugins Easy Columns et Contact Form.
Le reste sont des polices chargées à partir de la bibliothèque Google, la question ici est donc : avez-vous vraiment besoin de 9 polices ?
Habituellement, vous devez utiliser 2 polices : une pour les titres et une pour le corps du texte.
PT Sans et Open Sans ne sont pas si différents, vous pouvez donc n'utiliser qu'un seul des 2.
Lora et PT Serif – comme ci-dessus, utilisez-en une seule ou utilisez simplement Georgia (c'est une belle police sécurisée pour le Web).
Nixie One – Je ne le vois pas utilisé sur le site.
Pour les polices rarement utilisées, cela n'a pas de sens de les charger à chaque fois, utilisez simplement les polices système : Georgia, Arial, Courier.
Cela va améliorer les demandes de 12 à seulement 3-4, les améliorations de taille ne sont pas si importantes mais cela s'additionne.
Images
C'est le plus gros problème du site avec le plus grand impact sur la vitesse : 18 images, taille totale de 2597,5 K.
C'est énorme; ils doivent optimiser les images avant de les télécharger.
La plus grande image sur le site a 420 Ko et un simple smush. Elle montre qu'elle peut être améliorée de 27,6 %, soit 104 Ko ici.
Si nous pouvons tout améliorer de 25 %, cela représente une perte de poids de plus de 600 000 $.
Solutions :
1. Optimisation des images
Utilisez Photoshop et Enregistrer pour le Web à 60 % et progressif vérifié. Si vos visiteurs utilisent Chrome, Firefox ou IE9, les jpg progressifs se chargent très rapidement. Pour le reste, ce sera un peu plus lent que les jpg normaux.
Sinon, économisez simplement pour le Web à 60 % -80 % et contrôle optimisé. Cela enregistre les jpg normaux.
Après cela, procédez au téléchargement des images sur WordPress.
Pas de Photoshop ?
Utilisez jpegmini.com pour optimiser les images avant de les télécharger ou utilisez simplement un plugin WP pour le faire automatiquement lors du téléchargement.
2. Servir des images
Diffusez du contenu statique à partir d'un domaine sans cookies et parallélisez les téléchargements sur tous les noms d'hôtes.
Ces 2 choses peuvent être réalisées en chargeant des images à partir d'un sous-domaine sans cookie, quelque chose comme images.manofmany.com.
Désormais, le navigateur peut télécharger plusieurs éléments à la fois, améliorant ainsi la vitesse du site Web.
Chargement paresseux
Cela signifie que les images seront chargées une par une et visibles par les utilisateurs uniquement lorsque cela est nécessaire.
Ils sont chargés lorsqu'ils sont visibles uniquement dans la fenêtre du navigateur.
En chargeant uniquement les images au-dessus de la ligne de flottaison, le gain de vitesse est significatif.
D'autres choses que vous pouvez faire
– mise en cache du navigateur
– combiner js (si possible)
– ajouter un en-tête d'expiration
– compresser avec gzip
– utiliser des etags
– Profiler les plugins pour voir ce qui affecte le temps de chargement et les remplacer par de meilleurs plugins
– Utiliser le code dans function.php au lieu de plugins pour des choses simples comme chargement de Google Fonts
– résolvez les erreurs 404
– minimisez les redirections
– chargez javascript en bas de la page
– vous pouvez utiliser seulement 5 articles par page au lieu de 10
– vous pouvez utiliser des images plus petites comme des vignettes mais cela signifie interférer avec la conception
Conclusion
La plupart du temps, ce sont des choses simples qui peuvent avoir un impact énorme.
Pour une optimisation plus avancée, nous devrions examiner le thème et les plugins et vérifier s'il y a des problèmes de performances.
Laisser un commentaire