HTML optimization techniques you must know

To improve the performance of web pages, many developers start from multiple aspects such as JavaScript, image optimization, server configuration, file compression or adjusting CSS.

It's clear that HTML has reached a bottleneck, even though it is the core language required to develop Web interfaces. The load of HTML pages is also getting heavier. Most pages require an average of 40K of space. Some large websites may contain thousands of HTML elements, so the page size will be larger.

How to effectively reduce the complexity of HTML code and the number of page elements? This article mainly solves this problem and introduces from multiple aspects how to write concise and clear HTML code, which can make the page load faster and run well on multiple devices.

The following principles need to be followed during the design and development process:

• Structural separation: Use HTML to add structure, not style content;
  Keep it clean: Add code validation tools to your workflow; use tools or style guides to maintain code structure and format. Learn a new language: Get the element structure and semantic markup right.
  Ensure accessibility: Use ARIA attributes and Fallback attributes, etc. Test: Make the website run well on multiple devices, use emulators and performance tools.

The relationship between HTML, CSS and JavaScript

HTML is a markup language used to coordinate the structure and content of web pages. HTML cannot be used to modify style content, nor can text content be entered in the head tag, which makes the code lengthy and complicated. Instead, it is more appropriate to use CSS to modify layout elements and appearance. The default appearance of HTML elements is defined by the browser's default style sheet. For example, in Chrome, the h1 tag element will be rendered as 32px Times bold.

Three general design rules:

• Use HTML to construct the page structure, CSS to modify the page presentation, and JavaScript to implement page functions. CSS ZenGarden is a great example of behavior separation.
  Use less HTML code if you can use CSS or JavaScript to achieve it.
  Store CSS and JavaScript files separately from HTML. This can help with caching and debugging.

The document structure can also be optimized as follows:

1. Use HTML5 document type. The following is an empty file:

2. Reference the CSS file at the beginning of the document as follows:

With both methods, the browser will prepare the CSS information before parsing the HTML code. Therefore, it helps improve page loading performance.

Entering JavaScript code before the body closing tag at the bottom of the page will help speed up page loading because the browser will load the page before parsing the JavaScript code. Using JavaScript will have a positive impact on page elements.

Using the Defer and async attributes, script elements with the async attribute are not guaranteed to be executed in order.

Handlers can be added in JavaScript code. Never add it to HTML inline code, such as the following code, which is prone to errors and difficult to maintain:

index.html:

The following is better:

index.html:

js/local.js:

verify

One way to optimize web pages is to enable browsers to handle illegal HTML code. Legal HTML code is easy to debug, takes up less memory, consumes less resources, is easy to parse and render, and runs faster. Illegal HTML code makes it extremely difficult to implement responsive design.

When using templates, legal HTML code is extremely important. It often happens that a template runs well alone, but when integrated with other modules, various errors are reported. Therefore, the quality of HTML code must be guaranteed. The following measures can be taken:

• Add validation to your workflow: Use validation plugins like HTMLHint or SublineLinter to help you detect coding errors.
  Use the HTML5 document type to ensure that the HTML hierarchy is easy to maintain and avoid element nesting in the left-open state.
  Make sure to add the closing tag for each element.
  Delete unnecessary code; there is no need to add end tags for self-closing elements; Boolean attributes do not need to be assigned values, if they exist, they are True;

Code format

Format consistency makes HTML code easy to read, understand, optimize, and debug.

Semantic markup

Semantics refers to things that are related in meaning, and HTML can be seen in the semantics of the page content: the naming of elements and attributes to some extent expresses the role and function of the content. HTML5 introduces new semantic elements such as <header>, <footer>, and <nav>.

Choosing the right elements to write your code ensures that it is easy to read:

• Use <h1> (<h2>, <h3>…) to indicate a title, and <ul> or <ol> to implement a list;
  Note that the <h1> tag should be added before using the <article> tag;
  Choose appropriate HTML5 semantic elements such as <header>, <footer>, <nav>, <aside>;
  Use <p> to describe the body text. HTML5 semantic elements can form content, but the reverse is not true.
  Use <em> and <strong> tags instead of <i> and <b> tags.
  Use the <label> element, input type, placeholder, and other attributes to enforce validation.
  Mixing text with elements as children of another element can lead to layout errors.

For example:

It would be better to write it another way:

1: <div>
2: <label for="name">Name:</label><input type="text" id="name">
3: </div>

layout

To improve the performance of HTML code, follow the principle that HTML code should be designed for functionality rather than style.

• Use the <p> element to decorate text, not layout; by default, <p> automatically provides margins, and other styles are also provided by the browser by default.
  Avoid using <br> to break lines. Use block elements or CSS display properties instead.
  Avoid using <hr> to add horizontal rules. Use CSS border-bottom instead.
  Don't use div tags unless it's a critical moment.
  Try to use as few tables as possible for layout.
  You can use Flex Box more
  Use CSS to adjust margins etc.

CSS

Although this article is about optimizing HTML, here are some basic skills for using CSS:

• Avoid inline CSS
  Use the ID class at most once. When multiple elements are involved, you can use Class to implement it.

The above are the tips for optimizing HTML code introduced in this article. A high-quality and high-performance website often depends on the handling of details.