Optimisations courantes pour réduire la taille des pages HTML ou XHTML?

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

• supprimer des commentaires,
• suppression des espaces étrangers,
• déplacer des styles en ligne répétitifs vers une feuille de style CSS,
• etc.

Quels sont les autres? Quelle offre offre le meilleur rapport qualité-prix ou pourrait être effectuée automatiquement par un outil ou un module?

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 beaucoup plus d'optimisations que cette liste ne l'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.

Quelqu'un va dire que le balisage devrait être Gzippé, donc je pourrais aussi bien être celui-là.

Voici une longue explication de ce qu'est Gzip avec des liens sur la façon de le configurer sur Apache et IIS .

Un article sur WebReference indique que vous trouverez les gains de performances suivants lors de l'utilisation du 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%

Cela n'en vaut probablement pas la peine.

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

En réalité, la suppression des espaces et des sauts de ligne fait un travail que la compression ferait pour nous. Nous ajoutons juste une touche d'efficacité assistée par l'homme:

                  Raw compressé
CSS non optimisé 2 299 octets 671 octets
CSS optimisé 1758 octets 615 octets

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

Le problème est,

1. GZIP fait 90% du travail pour vous, c'est donc une micro-optimisation folle. Je veux dire, peut-être si vous êtes Google ou Yahoo.
2. Cette réduction de taille supplémentaire de 10% se fait au prix plutôt élevé d'un HTML complètement illisible dans "view source"

ok, un petit: gardez les noms et les attributs des balises en minuscules et cohérents (comme les mandats standard, soit dit en passant). Cela augmentera le taux de compression d'un pourcentage ou deux.

Si vous êtes un site à très haut volume, vous pouvez envisager d'utiliser un identifiant d'entité et des noms de classe super courts, car ils réduisent la taille de la page HTML et de la page CSS utilisées 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 jeux de résultats volumineux et des sorties similaires.

En réalité, ces optimisations ont un retour sur investissement extrêmement limité (et pour la stratégie de pagination, les inconvénients potentiels du référencement) pour en valoir la peine pour les sites qui ne sont pas dans la même catégorie de trafic que Google. Suivez simplement la recommandation de jessegavin pour activer la compression GZip / Deflate et terminez-la .

Combinez css, images et javascripts courants dans un seul fichier. Cela ne réduit pas la taille du fichier mais cela réduira 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 que vous puissiez 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 compilateur de fermeture de Google. Je ne l'ai pas utilisé, mais il prétend rendre le téléchargement javascript et s'exécuter plus rapidement.

Comme d'autres l'ont dit, le plus gros avantage vient 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 roulez votre propre version légère). Il peut y avoir une grande différence entre la taille HTML, en particulier avec les tables imbriquées. 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>

Si vous utilisez un site Web ASP.NET, faites attention à ViewState . Il peut générer de très gros champs cachés dans la page, le surchargeant souvent alors qu'il n'est pas nécessaire (il m'est déjà venu à l'esprit que le ViewState est plus lourd que le reste de la page).
Cela est particulièrement vrai si vous utilisez AJAX, car le ViewState sera envoyé dans les deux sens à chaque demande, ce qui ralentit votre site Web et augmente le volume de trafic.

La solution est cependant dans le code .net .

Il existe un tas d' outils gratuits d'analyse et d'optimisation des performances Web . Vous pouvez compiler votre propre grande liste de contrôle à partir des rapports qu'ils génèrent.

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

• Évitez le contenu généré dynamiquement (image). Envisagez plutôt de dessiner ou de redimensionner une image hors ligne 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. Dans le cas où vous les utilisez, vous pouvez choisir de les charger de manière asynchrone.

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

Pour tout projet donné, vous devrez décider laquelle de ces stratégies utiliser en fonction de la version (X) HTML que vous utilisez et de la façon dont le site Web sera utilisé.

(Apparemment, je ne peux pas poster plus d'un lien hypertexte par réponse puisque je suis un nouvel utilisateur, donc ces URL devront être copiées et collées ... 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/en/blog/20080601/optional-tags-in-html-4/

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

• Le protocole (http :) une partie des URL HTTP peut être omis.

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

• Avec des balises comme <br>, vous pouvez simplement laisser de côté la barre oblique utilisée dans la syntaxe XHTML (<br />) à moins que vous n'ayez réellement besoin d'utiliser XHTML.

• Voici quelques exemples de petites structures de documents HTML:

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

html5doctor.com/html-5-boilerplates/

D'autres l'ont dit, mais ils n'ont pas assez enfoncé le clou: le gzipping.

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

Tous les autres ajustements que vous pouvez apporter au HTML nécessitent plus d'efforts / de maintenance et n'ont pratiquement aucun effet par rapport au simple gzipping et à l'oubli. Ils ne valent tout simplement pas le temps, sauf si vous êtes Google. Vous n'êtes pas Google.

(Comme d'autres l'ont mentionné, plus votre code HTML est cohérent, plus l'effet gzipping aura, 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 Ainsi, les pratiques de création telles que le maintien de vos attributs dans le même ordre et le maintien de la même casse peuvent aider gzipping à faire son travail.)

Oh - et si vous réduisez automatiquement votre code HTML à un moment donné de votre processus de création / diffusion, cela ne nécessite pas beaucoup plus d'efforts / de maintenance. Certains minificateurs HTML sont répertoriés ici:

/programming/728260/html-minification