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?
optimization
html
performance
xhtml
page-size
Chris W. Rea
la source
la source
optimization
dans sujet et question!Réponses:
Google a décrit et expliqué ses recommandations pour réduire au minimum la taille de la charge utile . Ils comprennent les techniques suivantes:
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:
(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.
la source
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.
la source
mod_gzip
était pour Apache 1.3, qui a maintenant atteint la fin de sa vie (n'est plus pris en charge - il fonctionne toujours, bien sûr). L'équivalent pour la série Apache 2 estmod_deflate
.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.
(oui cela dit CSS mais les mêmes règles de base s'appliquent également au HTML)
Le problème est,
la 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.
la source
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 .
la source
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.
la source
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:
et
la source
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 .
la source
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 -
la source
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.)
meiert.com/en/blog/20080601/optional-tags-in-html-4/
code.google.com/speed/articles/optimizing-html.html
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/
la source
D'autres l'ont dit, mais ils n'ont pas assez enfoncé le clou: le gzipping.
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
la source