Étapes de mise en œuvre de l'optimisation et de la compression des pages Web HTML

想要对自己的HTML网页实现优化压缩的话需要检查5个方面，分别是，将table改为div布局，缩减精简div、span、ul li等系列标签，删除多余空格，表格类型布局时候适当使用table替代div布局，html网页GZIP压缩，将table改为div布局 。下面给大家详细的介绍一下

尽量将table标签布局html重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的html网页，所以搜索引擎索引权重也优于table布局的html网页。

缩减精简div、span、ul li等系列标签  

布局DIV+CSS网页时候，我们有时候可以节约一些DIV布局代码，减少代码量。

如下案例代码：

<div class="div"> 
　　<ul> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　<li>DIV</li> 
　　</ul> 
</div> 
可以改为：
<ul class="div"> 
　　<li>DIV</li> 
　　<li>DIVC/li> 
　　<li>DIV</li> 
</ul>

这样可以节约一对div标签，从而减少html代码量，起到压缩html作用。这样直接对ul命名css样式类，可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格   -   TOP

删除多余空格换行，可以有效地压缩html代码占用字节，一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如：

2664b5c137162ed32cb2c4b60e3a831f 

　　ca532c8fbc0323c93614f1e58a1d475316b28748ea4df4d9c2150843fecfba68 

16b28748ea4df4d9c2150843fecfba68 

可以删除空格与换行后：

2664b5c137162ed32cb2c4b60e3a831fca532c8fbc0323c93614f1e58a1d475316b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68

Cela peut enregistrer les octets occupés par les espaces et les nouvelles lignes.

Notez que la version de publication Web peut utiliser DW pour supprimer les espaces redondants et les lignes vides. Si vous souhaitez modifier à nouveau, accédez au logiciel DW pour formater le code.

4. Utilisez le tableau de manière appropriée au lieu de la disposition div lors de la présentation du type de tableau - TOP

S'il s'agit d'une disposition de liste de données de tableau, nous le ferions Il est préférable de choisir une table. Parce que l'utilisation d'une table pour la mise en page de table est meilleure que la mise en page div, l'utilisation de la mise en page de table enregistre le code des balises html et enregistre les styles CSS que la mise en page div.

Tableau comme indiqué ci-dessousType de données, il est recommandé d'utiliser la balise TABLE + la mise en page de style CSS

Tableau de mise en page des balises de table de compression de code Web HTML

Semblable à cette liste Pour les tableaux de table, il est recommandé d'utiliser la disposition des balises de table

5. Compression GZIP de la page Web - TOP

Il est recommandé de définissez la fonction de compression Gzip de la page Web sur votre propre serveur.

1. Quels sont les avantages d’ouvrir GZIP ?

Réponse : Une fois Gzip activé, les données envoyées au navigateur de l'utilisateur seront compressées, ce qui réduira la quantité de données transmises via le réseau et augmentera la vitesse de navigation.

2. Comment activer la fonction de compression Gzip d'IIS :

Réponse : Tout d'abord, si vous devez compresser des fichiers statiques (HTML), vous devez créer un répertoire sur le disque dur et donnez-lui les autorisations "IUSR_ Write pour l'utilisateur "nom de la machine". Si vous compressez des fichiers dynamiques (PHP, asp, aspx), ce n'est pas nécessaire, car ses pages sont générées dynamiquement à chaque fois et seront abandonnées après compression. Ensuite, dans le gestionnaire IIS, faites un clic droit sur "Site Web" - Propriétés, pas un certain site ci-dessous, mais l'ensemble du site Web. Entrez dans l'onglet "Services" et sélectionnez Activer la compression de contenu dynamique et la compression de contenu statique. Sélectionnez ensuite l'extension de serveur sous le site Web et créez une nouvelle extension de serveur. Le nom n'a pas d'importance, le chemin pour ajouter le fichier ci-dessous est : c:windowssystem32inetsrvgzip.dll, puis activez cette extension. À l'heure actuelle, le contenu statique peut être compressé, mais pour le contenu dynamique, les fichiers aspx ne se situent pas dans la plage de compression. Parce que le fichier compressible par défaut n'a pas cette extension. Et vous ne trouvez pas d'endroit pour ajouter des extensions dans l'interface de gestion. Pour le moment, vous ne pouvez modifier que son fichier de configuration. Il existe un fichier MetaBase.xml sous c:windowssystem32inetsrv. Vous pouvez l'ouvrir avec le Bloc-notes et trouver IIsCompressionScheme. Il y a trois sections portant le même nom, à savoir deflate, gzip et Parameters. deux sections sont fondamentalement les mêmes. Paramètres, ajoutez une ligne aspx sous les paramètres HcScriptFileExtensions dans ces deux paragraphes. Si vous avez d'autres programmes dynamiques à compresser, ajoutez-les également ici. Remplacez HcDynamicCompressionLevel par 9 (0-10, 9 est le plus rentable). Ensuite, vous devez redémarrer le service IIS pour bénéficier de la vitesse après compression.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Explication détaillée de la différence entre html et xhtml

Comment utiliser l'effet de rotation d'image CSS

Comment optimiser les pages Web HTML

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!