[Astuces] Minimiser le temps de chargement de vos pages web

Discussion dans 'Débuter en référencement' créé par millenium, 10 Février 2010.

  1. millenium
    millenium WRInaute discret
    Inscrit:
    29 Décembre 2004
    Messages:
    185
    J'aime reçus:
    0
    La dernière optimisation (avant la prochaine) relative au site fraîchement publié vient d'être faite et je pense que ça pourrait en intéresser plus d'un, il s'agit de minimiser un maximum le temps de chargement des pages web:

    • Optimisation des images
    • Compression gzip - deflate
    • Minify des css et des js - compression

    Optimisation des images
    J'ai opté pour cet outil très pratique:PngOptimizer
    Il diminue significativement le poids de vos images sans en altérer la qualité.
    Téléchargement: http://psydk.org/PngOptimizer.php

    Compression Gzip - deflate
    Etant sous Windows, j'ai rencontré quelques soucis pour activer le module Gzip (dll), j'ai donc opté pour le module deflate présent nativement sous Apache2, il suffit de l'activer...

    Et d'ajouter dans votre htaccess le code suivant:
    Code:
    # Compress output
    AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Pour tester si le module est actif et donc, la compression:
    http://www.gidnetwork.com/tools/gzip-test.php

    Minify des css et js
    J'ai opté pour Minify URI Builder
    Magnifique.
    Téléchargement: http://code.google.com/p/minify/

    Tester le temps de chargement de vos pages
    Avec Yslow de Yahoo qui s'intègre à firebug.
    http://developer.yahoo.com/yslow/

    Pour que le tout soit vraiment parfait, il faut encore jouer avec les modules mod_expires et mod_headers, je vous laisse fouiner, j'ai n'ai pas (encore) été jusque là.

    Wala, j'éspère que ce sera utile :)
     
  2. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    Bien (trop?) résumé, bien présenté, une reco' !

    J'ajoute : mettre les appels de scripts JavaScripts en fin de page !
    ... et limiter les requêtes HTTP (minimiser le nombre de requêtes vers des fichiers, donc fusionner les CSS et JavaScripts et créer des CSS Sprites avec les images).
     
  3. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 257
    J'aime reçus:
    1
    >> J'ajoute : mettre les appels de scripts JavaScripts en fin de page !

    dans ce cas là, deferer l'appel plutôt (defer=defer)
     
  4. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 391
    J'aime reçus:
    0
    Pas compris :-/
    En pratique, ça donne quoi ?
     
  5. milkiway
    milkiway WRInaute accro
    Inscrit:
    3 Février 2004
    Messages:
    4 237
    J'aime reçus:
    0
  6. dmathieu
    dmathieu WRInaute accro
    Inscrit:
    9 Janvier 2004
    Messages:
    5 626
    J'aime reçus:
    0
    J'utilise personnelement Google Closure : http://code.google.com/intl/fr/closure/ Pour les javascripts.
    Et YUI compressor : http://developer.yahoo.com/yui/compressor/ Pour les CSS.
    Avec une politique fortement inspirée de celle de GitHub : http://gist.github.com/238291

    Tous les javascripts (pareil pour les css) sont dans un répertoire /javascripts/ de mon application.
    Les javascripts à la base de ce dossier ne seront pas compressés.
    Tous les autres seront compressés à hauteur d'un fichier par répertoire.

    Ainsi si j'ai, en développement :
    Code:
    - javascripts
    |- jquery
    |-- jquery-version.js
    |- mon_application
    |-- fichier.js
    J'aurai, en production :
    Code:
    - javascripts
    |- bundle
    |-- jquery.js
    |-- mon_application.js
    Les fichiers sont compressés lorsque je déploie l'application (avec capistrano).

    Lorsque je lance mon application dans son environnement de développement, ce sont automatiquement les javascripts et css non compressés qui sont inclus (tous les fichiers sont inclus. Ainsi, même en développement, je suis sur de ne pas avoir de conflit).
    Lorsque je la lance en staging ou en production, c'est les versions minifiées qui sont inclues.

    Note : je ne bosse pas en PHP mais en ruby.
    Mais cette même technique (compression lors du déploiement) est tout à fait adaptable sur une application PHP ou tout autre langage.
     
  7. millenium
    millenium WRInaute discret
    Inscrit:
    29 Décembre 2004
    Messages:
    185
    J'aime reçus:
    0
    @dmathieu > instructif, je vais tester YUI compressor
     
  8. Zikou
    Zikou WRInaute discret
    Inscrit:
    11 Août 2008
    Messages:
    191
    J'aime reçus:
    0
    Bonjour,
    sympa le résumé :wink: il ne reste plus qu'a tester avec http://developer.yahoo.com/yslow/ pour voir le gain de performance
    e-kiwi : je n'ai pas compris non plus...........
     
  9. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    0
    Ce qui peut être mis dans le fichier .conf d'apache n'a rien à faire dans le .htaccess car celui ci est lu et interprété à chaque requête donc ça ralentit forcément :wink: (remarque: le rewriting peut également être localisé dans la section Virtual Host du fichier .conf d'apache) Pour des performances optimums, l'idéal est de ne pas avoir de fichier .htaccess (il y a des alternatives) Dans le cas ou vous pouvez vous passer du .htaccess, veillez à fixer AllowOverride à none dans votre conf apache pour lui signaler de ne pas chercher de fichier .htaccess. Si vous n'êtes pas convaincu, voici un extrait de la doc apache :

    Code:
    However, in general, use of .htaccess files should be avoided when possible. Any configuration that you would consider putting in a .htaccess file, can just as effectively be made in a <Directory> section in your main server configuration file.
    
    There are two main reasons to avoid the use of .htaccess files.
    
    The first of these is performance. When AllowOverride is set to allow the use of .htaccess files, Apache will look in every directory for .htaccess files. Thus, permitting .htaccess files causes a performance hit, whether or not you actually even use them! Also, the .htaccess file is loaded every time a document is requested.
    
    Further note that Apache must look for .htaccess files in all higher-level directories, in order to have a full complement of directives that it must apply. (See section on how directives are applied.) Thus, if a file is requested out of a directory /www/htdocs/example, Apache must look for the following files:
    
    /.htaccess
    /www/.htaccess
    /www/htdocs/.htaccess
    /www/htdocs/example/.htaccess
    
    And so, for each file access out of that directory, there are 4 additional file-system accesses, even if none of those files are present. (Note that this would only be the case if .htaccess files were enabled for /, which is not usually the case.)
    
    The second consideration is one of security. You are permitting users to modify server configuration, which may result in changes over which you have no control. Carefully consider whether you want to give your users this privilege. Note also that giving users less privileges than they need will lead to additional technical support requests. Make sure you clearly tell your users what level of privileges you have given them. Specifying exactly what you have set AllowOverride to, and pointing them to the relevant documentation, will save yourself a lot of confusion later.
    
    Note that it is completely equivalent to put a .htaccess file in a directory /www/htdocs/example containing a directive, and to put that same directive in a Directory section <Directory /www/htdocs/example> in your main server configuration
    Enfin, Il est possible d'activer la compression au niveau de PHP dans le php.ini avec les parametres zlib.output_compression à On et zlib.output_compression_level par exemple à -1; en complément , pour charger une page PHP d'un seul tenant, réglez le paramètre output_buffering à la taille maximum de vos pages PHP.

    Optimiser ses images, ses fichiers js et css c'est bien mais il ne faut pas négliger les temps de réponse du serveur WEB en évitant de lui faire faire des chose plus ou moins utiles :mrgreen:
     
  10. millenium
    millenium WRInaute discret
    Inscrit:
    29 Décembre 2004
    Messages:
    185
    J'aime reçus:
    0
    Merci pour ces précisions :)
     
  11. mipc
    mipc WRInaute accro
    Inscrit:
    11 Février 2009
    Messages:
    3 158
    J'aime reçus:
    0
    à se propos pagespeed est maintenant compatible avec le dernier firefox 3.6, pagespeed est maintenant en 1.6.
     
  12. millenium
    millenium WRInaute discret
    Inscrit:
    29 Décembre 2004
    Messages:
    185
    J'aime reçus:
    0
    Excellent, c'est tout frais alors, j'ai essayé de l'installer tout à l'heure,ça ne fonctionnait pas, tant mieux :)
     
  13. Sebast971
    Sebast971 WRInaute discret
    Inscrit:
    27 Novembre 2009
    Messages:
    170
    J'aime reçus:
    0
    Merci pour l'outil de compression d'image :)
     
  14. nza2k
    nza2k WRInaute impliqué
    Inscrit:
    16 Janvier 2004
    Messages:
    895
    J'aime reçus:
    1
    Merci à tous pour ces infos.

    En me renseignant sur les sprites css, je suis tombé sur cet excellent outil : http://spriteme.org/

    PS : moi non plus je n'ai pas compris "dans ce cas là, deferer l'appel plutôt (defer=defer)"
     
  15. pcamliti
    pcamliti WRInaute impliqué
    Inscrit:
    9 Mars 2007
    Messages:
    707
    J'aime reçus:
    1
    Est-ce que toutes ces méthodes fonctionnent avec tout les hébergeurs ?
    Car j'ai eu quelques petits bug pour les compressions dernièrement !
     
  16. dmathieu
    dmathieu WRInaute accro
    Inscrit:
    9 Janvier 2004
    Messages:
    5 626
    J'aime reçus:
    0
    Compresser les js et css chez l'hébergeur est une mauvaise idée. Cela réduit la bande passante mais augmente la quantité de CPU utiliséepour transférer les données à l'utilisateur.

    Il faut compresser les données lors du déploiement de l'application. Pas à chaque chargement de page.
     
  17. pcamliti
    pcamliti WRInaute impliqué
    Inscrit:
    9 Mars 2007
    Messages:
    707
    J'aime reçus:
    1
    Donc si je comprends bien l'on travail la décompression en client et non en serveur, est-ce cela ?
     
  18. Bigb06
    Bigb06 WRInaute impliqué
    Inscrit:
    21 Mars 2007
    Messages:
    842
    J'aime reçus:
    1
    Il faut faire le travail de minification/concaténation une seule fois lors du déploiement (c'est à dire lors de la copie des fichiers sur le serveur).
     
  19. Bigbangbel
    Bigbangbel WRInaute discret
    Inscrit:
    22 Janvier 2008
    Messages:
    153
    J'aime reçus:
    0
    defer...
    ex. de syntaxe <script defer> etc.
    Cet attribut indique que le script ne contient pas de "document.write", et donne une indication aux navigateurs qu'ils peuvent continuer le rendu de la page et différer l'exécution du script. Rem. Firefox (je ne sais pas quelle version) ne supporte pas cet attribut. Si un script peut être retardé dans son exécution, il peut également être déplacé en bas de page HTML.
     
  20. millenium
    millenium WRInaute discret
    Inscrit:
    29 Décembre 2004
    Messages:
    185
    J'aime reçus:
    0
    Excellent, j'apprends qqch là, merci!
     
  21. Gralon
    Gralon WRInaute impliqué
    Inscrit:
    2 Novembre 2002
    Messages:
    533
    J'aime reçus:
    0
    Alors ça, je vais tester car je ne savais tout simplement pas.
    Au vu du nombre de règles de rewriting que j'ai ça va être rigolo.

    par contre les process apache seront plus gourmands en mémoire non ?
     
  22. petitchevalroux
    petitchevalroux WRInaute discret
    Inscrit:
    31 Mai 2006
    Messages:
    164
    J'aime reçus:
    0
    Et on oublie aussi notre ami le 304 not modified, Expire .... Enfin bref le protocol HTTP ... :mrgreen:

    Sinon pour le defer ... j'avais fait quelques tests et ça changeait rien dans l'ordre de chargement du js du moins sous FF.
     
Chargement...
Similar Threads - [Astuces] Minimiser chargement Forum Date
[Astuces] Augmenter le nombre de followers Twitter 11 Mai 2013
Changement NDD - Minimiser perte référencement Débuter en référencement 16 Janvier 2015
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice