Des méthodes efficaces pour réduire la bande passante (et donc les temps de chargement des pages)?

Quelles sont les méthodes les plus efficaces pour réduire la quantité de bande passante dont un site Web a besoin pour afficher une page?

Mise en cache agressive? Vous réduisez JS / CSS? Gzip? CMS? Sprites?

Quelques méthodes de base facilement implémentables par n'importe quel site Web:

• Compressez votre HTML, CSS et Javascript avec deflateou gzipsi le navigateur qui a fait la demande la prend en charge.
• Réduisez votre javascript avec Google Closure Compiler
• Réduisez votre css avec YUI Compressor

Un peu plus impliqué:

• S'il est peu probable qu'une page ou une image change, dites au navigateur de la mettre en cache. La plupart des serveurs Web le font déjà pour les fichiers statiques, il vous suffit donc de l'ajouter à vos scripts dynamiques lorsque cela est possible.
• Fusionnez automatiquement vos fichiers CSS et JS en un seul . C'est avantageux car cela diminue les requêtes HTTP (qui ont des frais généraux et que certains navigateurs stupides - et j'entends par là Internet Explorer - limitent par défaut 2 requêtes à la fois par domaine).
• Déplacez vos fichiers statiques (CSS, JS, images, etc.) vers un nom de domaine distinct. Cela empêche l'envoi d'informations sur les cookies dans la demande HTTP.

• Utilisez des sprites générés automatiquement . Un sprite est une image unique contenant plusieurs icônes ou d'autres petites images; vous choisissez ensuite l'image à afficher avec la backgroundpropriété CSS . Exemple .

  L'avantage est que le client fait moins de requêtes HTTP (qui ont des frais généraux).

J'ai mis en gras "automatiquement" parce que si vous faites ces choses manuellement, cela n'en vaut vraiment pas la peine, et cela fait de la maintenance du code un cauchemar. Habituellement, cela signifie automatiquement écrire un script personnalisé, c'est pourquoi il est "un peu plus impliqué",

Google a décrit et expliqué ses recommandations pour réduire au minimum la taille de la charge utile . Ils comprennent les techniques suivantes:

1. Activer la compression
2. Supprimer le CSS inutilisé
3. Réduire JavaScript
4. Réduire CSS
5. Réduire le HTML
6. Différer le chargement de JavaScript
7. Optimiser les images
8. Servir des images à l'échelle
9. Servir des ressources à partir d'une URL cohérente

Ces suggestions font partie de leur projet de module complémentaire open source Firefox / Firebug appelé Page Speed . Similaire au plug- in YSlow de Yahoo ! . Le module complémentaire de vitesse de page réelle vérifiera pour beaucoup plus d'optimisations que cette liste explique en détail. Les instructions d'utilisation de Page Speed ​​sont également présentées.

Les meilleures pratiques de Yahoo! Pour accélérer votre site Web identifient un ensemble similaire de meilleures pratiques:

1. Minimiser les requêtes HTTP
2. Utiliser un réseau de diffusion de contenu
3. Ajouter un en-tête Expires ou Cache-Control
4. Composants Gzip
5. Mettez les feuilles de style en haut
6. Mettez les scripts au fond
7. Évitez les expressions CSS
8. Rendre JavaScript et CSS externes
9. Réduisez les recherches DNS
10. …

(La liste de Yahoo! Fait environ 35 articles, pas besoin de la citer dans son intégralité.)

Les deux YSlow (lien d'image) et Page Speed (lien d'image) vous permettra d'exécuter des tests sur vos pages, ce qui suggère des choses que vous pouvez faire et vous montrer ce que, de leurs recommandations, est déjà mis en œuvre.