web-dev-qa-db-fra.com

Optimisations courantes pour réduire la taille de page HTML ou XHTML?

Quelles sont les optimisations courantes effectuées pour réduire la taille de page HTML ou XHTML? Certains qui me viennent à l'esprit sont:

  • enlever les commentaires,
  • éliminer les espaces superflus,
  • déplacer des styles en ligne répétitifs dans une feuille de style CSS,
  • etc.

Quels sont les autres? Quelle offre est la plus rentable ou pourrait être effectuée automatiquement par un outil ou un module?

optimizationhtmlperformancexhtmlpage-size
15
Chris W. Rea

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

Quelqu'un va dire que le balisage devrait être gzippé, alors je pourrais aussi bien l'être.

Voici une longue explication de ce que Gzip contient des liens sur la façon de le configurer sur Apache et IIS .

Un article sur WebReference indique que vous obtiendrez les gains de performances suivants en utilisant le module Apache mod_gzip.

Les webmasters constatent généralement une augmentation de 150 à 160% des performances du serveur Web et une réduction de 70% à 80% de la bande passante HTML/XML/JavaScript utilisée, grâce à ce module. Globalement, les économies de bande passante sont d’environ 30 à 60%.

18
jessegavin

Cela n'en vaut probablement pas la peine.

J'ai joué avec la suppression des espaces en HTML un peu, et je n'ai constaté qu'une réduction de 10% de la taille de la charge utile après le gzipping.

De manière réaliste, la suppression des espaces et du saut de ligne est un travail que la compression ferait pour nous. Nous ajoutons simplement une touche d'efficacité humaine:

 Brut compressé 
 CSS non optimisé 2 299 octets 671 octets 
 CSS optimisé 1 758 octets 615 octets

(oui cela dit CSS mais les mêmes règles de base s'appliquent aussi au HTML)

Le problème est,

  1. GZIP effectue 90% du travail à votre place. Il s'agit donc d'une micro-optimisation délirante. Je veux dire, peut-être si vous êtes Google ou Yahoo.
  2. Cette réduction de taille supplémentaire de 10% vient au coût plutôt élevé d'un code HTML complètement illisible dans "Afficher le code source"
10
Jeff Atwood

ok, un petit problème: conservez les noms de balises et leurs attributs en minuscules et cohérents (comme l’exige le mandat standard). Cela augmentera le taux de compression d'un pourcentage ou deux.

6
Thomas Bonini

Si vous êtes un site extrêmement volumineux, vous pouvez envisager d'utiliser un identifiant d'entité et des noms de classe très courts, car ils réduisent la taille de la page HTML et de la page CSS utilisée pour le styliser.

Faites également attention à la composition du site trop structurée; il est facile d’ajouter des sections div et span quand elles ne sont pas vraiment nécessaires. Vous pouvez également envisager des stratégies telles que la pagination pour des ensembles de résultats volumineux et des résultats similaires.

En réalité, ces optimisations ont des retombées extrêmement limitées (et, pour la stratégie de pagination, les inconvénients potentiels du référencement), en valent la peine pour les sites qui ne font pas partie de la même catégorie de trafic que Google. Il suffit de suivre recommandation de jessegavin pour activer la compression GZip/Deflate et en finir.

4
JasonBirch

Combinez les fichiers CSS, images et javascripts courants dans un seul fichier. Cela ne réduit pas la taille du fichier mais le nombre de requêtes http. Pour les fichiers plus petits, la surcharge http dépasse de loin le temps de téléchargement. Il est facile d'écrire un script pour combiner des fichiers css et javascript afin de pouvoir les gérer plus facilement pendant le développement, mais les déployer dans un seul fichier.

Voir http://css-tricks.com/css-sprites pour plus d'informations sur la combinaison d'images.

Consultez également le Closure Compiler de Google. Je ne l'ai pas utilisé, mais il prétend rendre le téléchargement javascript plus rapide.

3
mcrumley

Comme d'autres l'ont dit, le plus gros avantage provient du gzipping.

Assurez-vous que vous utilisez les éléments HTML appropriés. Au lieu de <div class="page-title">Hello World</div>, utilisez <h1>Hello World</h1>.

Et le plus évident: n'utilisez pas de tableaux pour la mise en page! Utilisez un système de grille simple comme 960.gs (ou lancez votre propre version allégée). Il peut y avoir une grande différence entre la taille HTML, en particulier avec les tableaux imbriqués. Comparer:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

et

<div class="colSmall">...</div>
<div class="colLarge">...</div>
3
DisgruntledGoat

Si vous utilisez un site Web ASP.NET, faites attention à ViewState . Il peut générer de très grands champs cachés dans la page, en le surchargeant souvent même si cela n’est pas nécessaire (je me suis déjà rendu compte que ViewState est plus lourd que le reste de la page).
C’est particulièrement vrai si vous utilisez AJAX, car ViewState sera envoyé à chaque demande, ce qui ralentira votre site Web et augmentera le volume de trafic.

La solution est dans le code .net si.

2
Julien N

D’autres l’ont dit, mais ils n’ont pas assez insisté: le gzipping.

  1. Pratiquement aucun effort ni inconvénient.
  2. Dans mon expérience limitée, réduit la taille de HTML entre 60% et 90%.

Tous les autres ajustements que vous pouvez apporter à HTML nécessitent plus d’effort/de maintenance, et n’ont pratiquement aucun effet par rapport à un simple gzipping ou un oubli. Ils ne valent tout simplement pas la peine, à moins que vous ne soyez Google. Vous n'êtes pas Google.

(Comme d’autres l’ont mentionné, plus votre code HTML est cohérent, plus gzipping produira d’effets car, selon ma compréhension limitée, gzipping recherche des chaînes identiques dans votre fichier et remplace chaque instance répétée par un petit code faisant référence à la chaîne. Ainsi, des pratiques de création telles que conserver vos attributs dans le même ordre et conserver tous vos boîtiers au même, peuvent aider gzipping à faire son travail.)

Oh, et si vous réduisez automatiquement votre code HTML à un moment donné de votre processus de construction/service, cela ne nécessite pas beaucoup plus d’effort/de maintenance. Certains minificateurs HTML sont énumérés ici:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

Il existe de nombreux outils d'analyse et d'optimisation de la performance Web gratuits . Vous pouvez compiler votre propre liste de contrôle à partir des rapports qu’elles génèrent.

Voici quelques points paraphrasés d'une évaluation de performances Zoompf -

  • Évitez le contenu généré dynamiquement (image). Pensez plutôt à dessiner ou à redimensionner une image hors connexion en tant que fichier image statique.
  • Évitez d'utiliser des balises d'image sans dimensions.
  • Google Analytics (& Ads) prend en charge le chargement asynchrone de son fichier JavaScript. Si vous les utilisez, vous pouvez choisir de les charger de manière asynchrone.
1
mvark

Une stratégie souvent négligée consiste à supprimer tout le code HTML inutile de la page.

Pour un projet donné, vous devrez choisir la stratégie à utiliser en fonction de la version (X) HTML que vous utilisez et de la manière dont le site Web va être utilisé.

(Apparemment, je ne peux pas poster plus d'un lien hypertexte par réponse car je suis un nouvel utilisateur, il faudra donc copier et coller ces URL ... J'espère que c'est casher.)

  • En HTML4 et HTML5, pour de nombreux éléments, la balise de fermeture n'est pas requise. La balise d'ouverture de l'élément body n'est également pas requise. Voir:

meiert.com/fr/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

  • Le protocole (http :) partie de l'URL HTTP peut être omis.

meiert.com/fr/blog/20090218/performance-and-rfc-2396/

  • Avec des balises telles que <br>, vous pouvez simplement omettre la barre oblique utilisée dans la syntaxe XHTML (<br />), sauf si vous devez réellement utiliser XHTML.

  • Voici quelques exemples de petites structures de document HTML:

meiert.com/fr/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

1
dzollman