Optimisation du site avec GTMetrix et « Defer parsing of JavaScript » (Créer un compte)

ça m’a pris un peu de temps, j’ai un peu beaucoup mis les mains dans le cambouis, mais, à mon humble avis, le top est l’installation de W3 Total Cache.

Ainsi, j’ai minifié et combiné mes Javascripts et mis en entête ceux le demandant et sinon en pied de page les autre, tout ça via le panel de W3.

J’ai aussi ainsi combiné mes CSS des différents plugins (moins de requêtes, meilleur mise en cache)

J’ai également activé mon Gzip ainsi (j’avais des soucis à la main, sans jamais trop comprendre pourquoi).

J’ai même crée un CDN local pour mettre à part mes images/css/script.. c’est pas hyper dur à régler même si la maintenance est un peu compliquée à mon goût.

Le pas le plus important fut en créant mes sprites..là j’ai changé de monde et même si j’en ai un peu chié, je ne le regrette pas.

Le defer est toujours le point le plus négatif de ma page d’accueil mais avec un score de 86 à Page Speed Grade. Mais faut bien lancé les scripts essentiel en entête, sinon ma page foire.

Globalement, j’ai réussi à être à 98% (PSG) et 94% (Yslow) sur cette page d’accueil. Et encore Yslow ne détecte pas mon CDN car il est interne à mon hébergement et non référencé par Yslow.

je suis un peu moins fort dans mes pages de billets en raison des +1 et j’aime qui sont chiants mais j’ai quand même 94% (PSG) et 77% (Yslow). Sans la partie réseau sociaux, je serais au niveau de la page d’accueil, les baisse de point étant uniquement sur ces parties.

pour finir mon retour sur W3 total Cache, j’ai désactivé le cache des pages côté serveur car sur ce point ça merdait.. et ça ne me semble pas vraiment intéressant.J’ai juste gardé le cache côté navigateur.

Les sprites, c’est très simple : au lieu d’avoir, par exemple, 10 petites images, on en a qu’une seule avec les 10 images à l’intérieur. Puis avec du CSS, on va pointer sur la partie qui nous intéresse.
Toujours pour mon cas personnel, j’affiche en bas de page des drapeaux de pays qui représentent une certaine catégorie de billets.
Il y avait donc autant de drapeaux que de catégorie. J’ai aujourd’hui 41 drapeaux qui s’affiche.

Chaque image fait peut-être 2 ko.. on se dit que même 41 c’est pas énorme : c’est grosso modo 80 ko
J’ai mis tous les drapeaux (y compris ceux qui ne sont pas encore utilisé mais je prépare les futurs billets) dans une seule image. Cette grosse image pleines de drapeaux fait 110 ko.

On constate donc que je télécharge 30 ko de trop pour afficher la même chose. C’est vrai.
Sauf que mon gros fichier drapeau fait une seule requête au serveur là où les 41 drapeaux en fait, ben 41 ! Le téléchargement de 30 ko supplémentaire est assez négligeable mais les 40 requêtes économisées est un gain énorme pour le serveur; c’est autant d’aller/retour en moins entre le navigateur et le serveur.
Et, si jamais je rajoute 10 drapeaux, alors je n’aurai pas téléchargé plus de ko et je serais toujours à une seule requête niveau serveur !

J’ai ensuite appliqué ce même principe pour quelques autres images sur le site où à chaque fois j’ai soulagé le serveur en nombre de requêtes sans trop rajouté de Ko.
J’aurai même pu faire un seul sprite de tout ça mais j’ai préféré compartimenter pour gérer plus simplement les éventuelles évolutions futures.

Pour le CSS et construire l’image de toutes les petites images, il y a des sites dédiés qui aide bien et qui font tout automatiquement.

ls CDN c’est autre chose. Si j’ai bien compris, au maximum il y a 5 requêtes échangés par domaine entre un serveur et un navigateur. Avec un CDN, on externalise les requêtes propres aux images/css/script : on a ainsi toujours nos 5 requêtes avec le domaine principal mais 5 autres requêtes avec le CDN, en parallèle.

Ainsi, le dialogue entre le domaine principal et le serveur est minimisé et on affiche rapidement la page tandis que l’envoi des images est fait en parallèle, sans devoir attendre que d’autres requêtes soit bien finis. Globalement, on gagne un peu de temps..c’est pas énorme mais ça existe. Par contre, c’est un peu lourd à mettre en place donc faut peser le pour du contre.

Assez prudent, je gère toujours mes images/css/script sur le CDN et sur le domaine principal et au besoin je peux donc revenir en arrière assez rapidement si j’en ai marre.