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

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 19)
  • Auteur
    Messages
  • #526687
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    Bonjour,

    – Version de WordPress : 3.5.2
    – Version de PHP/MySQL : 5.5.0 / 5.5.30
    – Thème utilisé : Famiret Magazine
    – Extensions en place : Un certain nombre, récemment ajouté : wordpress SEO.
    – Nom de l’hebergeur : Onetsolution
    – Adresse du site : http://vibzone.fr/

    Problème(s) rencontré(s) :

    Encore moi … ça devrait être la dernière fois cette fois-ci je pense 🙂
    Je suis actuellement en train d’optimiser la vitesse de chargement de mon site grâce au diagnostic de GTMetric. J’ai a peu près appliquer toutes les recommandations, mais le plus dur reste à faire. En effet, en ce qui concerne le javascript, mon site se tape un F (24/100). Pas super, mais ça ne m’étonne pas vu le nombre de plugins que j’utilise. J’ai donc vu qu’on pouvait différer l’analyse du Javascript sur le site. J’ai compris le principe, mais je ne sais pas du tout comme appliqué ça à un site wordpress. Le seul plug-ins qui se consacre à cette tâche fait dysfonctionner mon slider. J’espèrais trouver mes réponses sur Google mais sur WordPress ce n’est pas un sujet très développé, à moins d’avoir mal mené mes recherches.Je voudrais donc savoir comment s’y prend t-on manuellement pour différer l’analyse du Javascript sur mon site !

    J’ai aussi appliqué les recommandations “Leverage browser caching” en incluant des lignes dans le .htaccess et j’ai activé la Gzip compression via un plug-in (j’ai testé et la compression fonctionne bien). Mais les résultats ne sont pas super (C). Vaudrait-il mieux que j’applique les modifications directement sur les fichiers plutôt qu’avec un plug-in? Voici ce que j’ai mis pour le cache dans le htcaccess

    ## EXPIRES CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg “access 1 year”
    ExpiresByType image/jpeg “access 1 year”
    ExpiresByType image/gif “access 1 year”
    ExpiresByType image/png “access 1 year”
    ExpiresByType text/css “access 1 month”
    ExpiresByType application/pdf “access 1 month”
    ExpiresByType text/x-javascript “access 1 month”
    ExpiresByType application/x-shockwave-flash “access 1 month”
    ExpiresByType image/x-icon “access 1 year”
    ExpiresDefault “access 2 days”
    </IfModule>
    ## EXPIRES CACHING ##

    Auriez vous une idée? Merci d’avance !

    #904310
    luciole135
    Participant
    Maître WordPress
    13737 contributions

    Si vous utilisez un plugin de cache, en général, ils permettent d’utiliser gzip

    #904311
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    En gros il faudrait mieux que je retire le code pour le cache dans le htaccess et retirer le plugin Gzip pour mettre carrément un plugin destiné à la gestion du cache?

    Et en ce qui concerne le javascript?

    #904312
    luciole135
    Participant
    Maître WordPress
    13737 contributions

    Non, le plugin de cache n’est pas nécessaire, ni d’ailleurs un plugin pour mettre gzip, j’ai gzip sans plugin, je l’explique ici : http://additifstabac.free.fr/index.php/activer-la-compression-gzip-facilement-sans-aucun-plugin-sur-wordpress/

    #904313
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    D’accord, oui je suis tombé sur ton blog en faisant mes recherches je vais appliquer le Gzip sans plugin.
    Il me reste le problème le plus importante à résoudre, pour différer l’analyse du javascript. Pourriez vous m’aider?

    #904314
    luciole135
    Participant
    Maître WordPress
    13737 contributions

    Le point 8 vous indique comment faire : http://www.emarketinglicious.fr/blogging/8-conseils-accelerer-site-wordpress

    vous devez chercher dans les fichiers php de vos plugins et thème “wp_enqueue-script”. Vous pouvez ouvrir tous les fichiers avec notepad++ puis cherchez dans tous les fichiers ouvert (il y a un bouton pour cela) et puis faire la modif indiquée dans le tuto.

    #904315
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    Merci, c’est exactement ce que je cherchais 🙂 Par contre il a certains trucs que je voudrais éclaircir.

    Remarquez la présence d’un paramètre false en fin de ligne. Le basculer sur true indiquera à WordPress qu’il faut le charger dans le pied de page et non pas dans l’en-tête du site.

    Cela veut dire que le simple fait de les passer sur True les dirige dans le footer? Ou je dois couper/coller la ligne de code dans le footer également?
    En tout cas merci, le tuto est tout indiqué à ma situation.

    #904316
    luciole135
    Participant
    Maître WordPress
    13737 contributions
    #904317
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions

    ç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.

    #904318
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    luciole135 : donc je dois simplement basculer les lignes en true, c’est ça?

    CAMEO172 : Merci de partager ton expérience 🙂
    Pour ce qui est des fichiers styles CSS j’avais déjà fais ça auparavant mais comme j’ai rajouté des plug-ins, ça me fait penser qu’il faut que je remette le nez dedans.
    GZIP : fait! Je ne comprends pas ce qu’est un CDN par contre?
    C’est intéressant que tu en viennes aux sprite car je suis également tombé sur cette recommendation (qui a une assez haute importance). Je vois le principe mais je ne vois absolument pas du tout comment procéder pour installer ça.

    L’un des gros problèmes venait de mes images que je mettais n’importe comment. Depuis que je l’ai est redimensionnée pour une taille qui convient à être affiché sur l’index, il y a déjà un changement très notable au niveau de la rapidité de chargement. Je vais m’attarder sur les points que tu as éclaircis

    #904319
    CAMEO172
    Participant
    Maître WordPress
    1395 contributions
    Muzayan wrote:
    luciole135 : donc je dois simplement basculer les lignes en true, c’est ça?

    CAMEO172 : Merci de partager ton expérience 🙂
    Pour ce qui est des fichiers styles CSS j’avais déjà fais ça auparavant mais comme j’ai rajouté des plug-ins, ça me fait penser qu’il faut que je remette le nez dedans.
    GZIP : fait! Je ne comprends pas ce qu’est un CDN par contre?
    C’est intéressant que tu en viennes aux sprite car je suis également tombé sur cette recommendation (qui a une assez haute importance). Je vois le principe mais je ne vois absolument pas du tout comment procéder pour installer ça.

    L’un des gros problèmes venait de mes images que je mettais n’importe comment. Depuis que je l’ai est redimensionnée pour une taille qui convient à être affiché sur l’index, il y a déjà un changement très notable au niveau de la rapidité de chargement. Je vais m’attarder sur les points que tu as éclaircis

    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.

    #904320
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    Je vais me renseigner en ce qui concerne le CDN! En ce qui concerne le sprite, comment pointe-t-on sur l’image voulu et comment on réinterprète ça dans le css?

    J’ai essayé de placer certains codes javascripts dans le footer mais aucun changement, par exemple :

    // Enqueue Sidebar Login JS
    		wp_enqueue_script( ‘sidebar-login’, plugins_url( ‘assets/js/sidebar-login’ . $suffix . ‘.js’, __FILE__ ), array( ‘jquery’, ‘jquery-blockui’ ), $this->version, $js_in_footer, true );
    
    // Quotes collections
    add_action( ‘wp_enqueue_scripts’, ‘quotescollection_css_head’, true );

    Je ne suis pas sur d’avoir bien procédé.
    Sinon, la majorité du javascript provient de http://ajax.googleapis.com. Comment je peux procéder pour charger ça dans le footer?

    #904321
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions

    Up

    #904322
    luciole135
    Participant
    Maître WordPress
    13737 contributions
    Muzayan wrote:
    Sinon, la majorité du javascript provient de http://ajax.googleapis.com. Comment je peux procéder pour charger ça dans le footer?

    Tout dépend comment il est appelé !

    #904323
    Muzayan
    Membre
    Chevalier WordPress
    113 contributions
15 sujets de 1 à 15 (sur un total de 19)
  • Vous devez être connecté pour répondre à ce sujet.