HTML weight loss Streamline HTML tags to create web pages

HTML weight loss Streamline HTML tags to create web pages

HTML 4

HTML (not XHTML), MIME type is text/html, some tags are allowed to be omitted. With HTML 4 DTD, you can omit the following tags (the so-called avoidable elements are marked with strikethrough):

 </area>
 </base>
 <body>
 </body>
 </br>
 </col>
 </colgroup>
 </dd>
 </dt>
 <head>
 </head>
 </hr>
 <html>
 </html>
 </img>
 </input>
 </li>
 </link>
 </meta>
 </option>
 </p>
 </param>
 <tbody>
 </tbody>
 </td>
 </tfoot>
 </th>
 </thead>
 </tr>

For example, if your code is

 <li>List item</li>

It can be written as

 <li>List item

For example, paragraphs should be

 </p>

At the end, you can just write

 <p>My paragraph

You can even remove html, head, and body (make sure you are comfortable with this before making it your coding standard).

Omitting the tags will keep the HTML valid while reducing the file size. For typical pages, this can save 5-20%.

HTML 5

The ongoing development of HTML 5 provides some methods to reduce file size.

For example, the page document type declaration

 <!DOCTYPE html>

contrast

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Obviously HTML 5's DTD is shorter.

When specifying the encoding for a page, HTML 5 is easier to use and shorter:

 <meta charset="utf-8">

replace

 <meta http-equiv="content-type" content="text/html; charset=utf-8">

Normally, browsers process HTML correctly.

Additionally, in today's HTML 5, you can remove the type attribute that declares the MIME type, such as

 type="text/css"
or
 type="text/javascript"

You can use

 <script>
Alternative
 <script type="text/javascript">
use
 <style>
Alternative
 <style type="text/css">

In all types of pages (even XHTML) you can omit

 type="text/css"

HTML 5 makes this easier.

Using all of the above techniques together can save 10%-20% (or even more) of your file size, depending on your coding style and the amount of text in your page. The code will be cleaner and visitors will get to your site content faster. We used many of these techniques in the Privacy Center project, saving 20% ​​of the original file size.

<<:  JavaScript to implement a simple clock

>>:  DELL R730 server configuration RAID and installation server system and domain control detailed graphic tutorial

Recommend

Gojs implements ant line animation effect

Table of contents 1. Gojs Implementation 1. Drawi...

MySQL log settings and viewing methods

MySQL has the following logs: Error log: -log-err...

Detailed explanation of WeChat Mini Program official face verification

The mini program collected user personal informat...

Examples of two ways to implement a horizontal scroll bar

Preface: During the project development, we encou...

How to use cutecom for serial communication in Ubuntu virtual machine

Using cutecom for serial communication in Ubuntu ...

js to achieve star flash effects

This article example shares the specific code of ...

The actual process of implementing the guessing number game in WeChat applet

Table of contents Function Introduction Rendering...

Example of how to implement MySQL cascading replication

The so-called cascading replication is that the m...

Solution to MySQL connection exception and error 10061

MySQL is a relational database management system ...

Steps for restoring a single MySQL table

When I was taking a break, a phone call completel...

How to set up Spring Boot using Docker layered packaging

The Spring Boot project uses docker containers, j...

W3C Tutorial (11): W3C DOM Activities

The Document Object Model (DOM) is a platform, a ...

Detailed explanation of global parameter persistence in MySQL 8 new features

Table of contents Preface Global parameter persis...