Explication détaillée d'exemples d'optimisation de pages HTML

1. Réduisez le nombre de requêtes HTTP.

(1) Fusionner les fichiers JS et les fichiers CSS.

(2) Fusionnez les images de cadre et les images relativement moins modifiées en une seule, et complétez le rendu via la découpe d'arrière-plan CSS.

(3) Utilisez raisonnablement le cache local pour mettre en cache JS/CSS/IMAGE.

2. Réduisez la taille du fichier demandé et réduisez la bande passante réseau occupée par les données demandées.

(1) Compresser la taille JS : supprimez les sauts de ligne vides, les commentaires et l'obscurcissement dans JS, et remplacez les variables longues par des variables courtes.

(2) Compresser la taille CSS : supprimez les commentaires CSS et utilisez autant que possible des abréviations.

(3) Utilisez (X)HTML+CSS pour créer la structure du site Web et fournir la réutilisabilité CSS afin de réduire la taille du fichier (X)HTML.

(4) Utilisez GZIP côté serveur pour compresser les fichiers JS/CSS afin de réduire la taille des fichiers transférés.

3. Contrôlez le cache client via le contrôle de version.

Comment mettre à jour ces fichiers mis en cache à temps ? Grâce à une configuration simple, vous pouvez indiquer au navigateur à temps en modifiant la version JS que ces fichiers doivent être demandés à nouveau et ne continuent pas à utiliser les données dans le cache du navigateur. Il existe plusieurs solutions :

(1) Changer manuellement les noms de fichiers de ces JS.

(2) Changez manuellement les chemins de ces JS.

(3) Déplacez le chemin JS via la réécriture d'URL.

(4) Informez la page via une configuration JS sur un serveur à haute réponse quels fichiers JS doivent être liés à cette page.

(5) La grande version reste inchangée, la petite version est continuellement ajoutée et sera mise à jour uniformément après une certaine période de temps pour utiliser efficacement le cache.

4. Aidez la page à perdre du poids.

5. Supprimez certains contenus inutiles sur la page.

Fait principalement référence aux espaces redondants, aux tabulations, aux lignes vides, aux guillemets doubles, aux guillemets simples, aux commentaires, etc.

6. Supprimez les instructions vides dans le code de la page Web.

Par exemple :

<span style=&#39;font-family:宋体&#39;>你好<span lang=EN-US><o:p></o:p></span></span>

Évidemment, les phrases après "Bonjour" n'ont aucun effet, on peut les supprimer.

7. Supprimez les attributs par défaut du HTML.

Le langage HTML possède de nombreux attributs par défaut, tels que l'alignement, les polices, les couleurs, etc., mais les logiciels de production de pages Web ajouteront ces codes inutiles. Par exemple : l'attribut align est par défaut l'alignement à gauche, nous n'avons donc pas besoin d'écrire "align=left" lors de l'alignement à gauche.

8. Optimiser le CSS.

Par exemple : utilisez du CSS abrégé.

Ou :

<p class="decorated">1</p>
    <p class="decorated">2</p>
    <p class="decorated">3</p>
    <p class="decorated">4</p>

Vous pouvez utiliser p pour inclure :

  <p class="decorated">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>

9. La visibilité est plus rapide que l'affichage.

10. Gardez la casse cohérente pour la même URL.

Le tampon d’Internet Explorer traite également différemment les chaînes majuscules et minuscules. Par conséquent, en tant que développeur Web, vous devez vous rappeler de conserver la casse de la chaîne URL du même lien cohérente à différents endroits. Sinon, différentes sauvegardes de fichiers du même emplacement seront stockées dans la mémoire tampon du navigateur, ce qui augmentera également le nombre de demandes de téléchargement de contenu à partir du même emplacement.

11. Que la marque ait un début et une fin.

12. Ne placez pas tout le contenu de la page dans un tableau.

Étant donné que le tableau ne sera pas affiché tant que tout le contenu qu'il contient n'est pas ajouté, si certains contenus sont inaccessibles, cela retardera la vitesse d'accès de la page entière. La bonne approche consiste à diviser le contenu en plusieurs tableaux ayant le même format, plutôt que de tous les regrouper dans un seul tableau.

13. Utilisez iframe pour imbriquer une autre page.

Si vous devez insérer du code publicitaire et que vous ne souhaitez pas affecter la vitesse, l'utilisation d'iframe est la plus appropriée. L'affichage de la page ne sera pas affecté par le retard du code publicitaire.

14. Déplacez JavaScript à la fin du fichier HTML.

Car JavaScript bloquera l'affichage des pages suivantes lors du traitement, et bloquera également les requêtes HTML.

15. La connaissance des liens amicaux.

(1) Créez uniquement des liens texte. Créer des liens texte ne retardera pas la vitesse de la page Web.

(2) Placez tous les liens dans une zone de pagination distincte, puis créez un lien vers la page de la page d'accueil.

(3) Si le lien convivial doit apparaître sur la page d'accueil, alors merci de mettre le tableau entier là où se trouve le lien en bas de la page, car la page est affichée ligne par ligne de haut en bas.

(4) Téléchargez d'abord l'image du logo du lien convivial, puis téléchargez-la sur votre propre espace Web.

16. Optimisation des images.

(1) Réduisez le nombre de photos : supprimez les photos inutiles.

(2) Réduire la qualité de l'image : Pour les images au format JPG, les images réduites de 5 % ne semblent pas avoir beaucoup changé, mais la taille du fichier change de manière significative.

(3) Utilisez le format approprié : JPG est généralement utilisé pour afficher des œuvres photographiques de paysages, de personnes et de photos artistiques, et est parfois utilisé dans les captures d'écran d'ordinateur. Le GIF fournit moins de couleurs et peut être utilisé dans certaines situations ; lorsque des exigences de couleur sont requises. Des endroits discrets, tels que des logos de sites Web, des boutons, des émoticônes, etc. ; le format PNG peut fournir un arrière-plan transparent et est généralement utilisé sur les pages Web qui nécessitent un affichage d'arrière-plan transparent ou ont des exigences de qualité d'image plus élevées.

17. Ajoutez une barre oblique après l'URL.

Lorsque le serveur reçoit une telle adresse, il faut du temps pour déterminer le type de fichier de cette adresse. Si 220 est un répertoire, autant ajouter une barre oblique supplémentaire après l'URL, afin que le serveur sache d'un coup d'œil qu'il souhaite accéder à l'index ou au fichier par défaut du répertoire, gagnant ainsi du temps.

18. Marquez la hauteur et la largeur.

S'il n'y a pas de paramètre, le navigateur calculera la taille lors du téléchargement de l'image. S'il y a beaucoup d'images, le navigateur devra constamment ajuster la page, ce qui affecte non seulement la vitesse, mais également la taille. expérience de navigation. Lorsque le navigateur connaît la hauteur et la largeur, même si l'image ne peut pas être affichée, il fera de la place à l'image sur la page et continuera à charger le contenu suivant. En conséquence, le chargement est plus rapide et l’expérience de navigation est meilleure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!