web-dev-qa-db-fra.com

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 bande passante nécessaire à un site Web pour restituer une page?

Mise en cache agressive? Réduire JS/CSS? Gzip? CMS? Sprites?

bandwidthcompression
12
Mark Henderson

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

  • Compressez votre HTML, CSS et Javascript avec deflate ou gzip si le navigateur qui a fait la demande le prend en charge.
  • Réduisez votre javascript avec Google Closure Compiler
  • Minify your css with Compresseur YUI

Un peu plus impliqué:

  • Si une page ou une image est peu susceptible de changer, indiquez 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 dans la mesure du possible.
  • Fusionner vos fichiers CSS et JS en un seul automatiquement . Ceci est avantageux car cela réduit les requêtes HTTP (qui ont un surcoût et que certains navigateurs stupides - et par là je veux dire 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 les informations de cookie d'être envoyées dans la requête HTTP.

  • Utilisez les images-objets générées automatiquement . Un Sprite est une image unique contenant plusieurs icônes ou autres petites images. vous choisissez ensuite quelle image afficher avec la propriété CSS background. Exemple .

    L'avantage est que le client fait moins de requêtes HTTP (avec surcharge).

J'ai mis en gras "automatiquement" parce que si vous faites ces choses manuellement, alors ça ne vaut absolument pas la peine, et la maintenance du code est un cauchemar. Habituellement, le faire automatiquement signifie écrire un script personnalisé. C’est pourquoi il s’agit d’un "peu plus compliqué",

10
Thomas Bonini

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

  1. Activer la compression
  2. Supprimer les CSS non utilisées
  3. Minify JavaScript
  4. Minify CSS
  5. Minify HTML
  6. Reporter 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 complémentaire open-source Firefox/Firebug appelé Page Speed . Semblable au plugin YSlow de Yahoo !. Le module complémentaire Vitesse de la page vérifiera beaucoup plus d’optimisations que ce que la liste n’explique en détail. Les instructions d'utilisation de la vitesse de page sont également présentées.

Yahoo! Meilleures pratiques pour accélérer votre site Web identifie un ensemble similaire de meilleures pratiques:

  1. Réduire 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. Placez les feuilles de style en haut
  6. Mettez les scripts en bas
  7. Évitez les expressions CSS
  8. Rendre JavaScript et CSS externe
  9. Réduire les recherches DNS
  10. …

(La liste de Yahoo! Compte environ 35 éléments, inutile de la citer en entier.)

Les deux YSlow (lien vers l'image) et vitesse de la page (lien vers l'image) vous permettront d'exécuter des tests sur vos pages, en suggérant des choses que vous pouvez faire et en vous montrant quoi. recommandations, est déjà mis en œuvre.

5
Bryson