HTML, or hypertext markup language, is the backbone of every website. It allows to format webpages with headings, subheadings, lists, and other useful features. With the most recent updates in HTML5, one can also create attractive graphics.
HTML can be easily read by web crawlers, so search engines can be updated with your website’s content. When dealing with HTML, one should strive to write in a manner that is both concise and effective. Moreover, when it comes to referencing other resources within HTML document there are a few best practices everyone should follow.
a. CSS File Placement
It is always recommended to put CSS at the top of your HTML document’s header section in order to ensure progressive rendering.
This strategy will not improve the loading speeds of your website, but it will keep your visitors from waiting on blank screens.
2. Minify the Stylesheets
To maintain readable code, it's always recommended to write comments and use indentation:
But to the browse, this doesn’t matter at all. It is always recommended to minify your CSS through automated tools.
It will save bytes from the file size, which results in faster downloads, parsing, and execution. Use of pre-processors like Sass, Less, and Stylus, it's possible to configure compiled CSS output in a minified way.
3. Using Single CSS File
Another best practice of styles is to separate them and keep them into modular components.
However, an HTTP request is required for every file and browsers can only download a limited number resources parallelly. So, combine all CSS files into one. Having a smaller number of file will result in a smaller number of requests and a faster loading page.
4. Optimize Loop Logic
5. Avoid Unnecessary DOM Manipulation
One of the best optimization is the caching of frequently accessed DOM elements. For example, instead of querying DOM every iteration of a loop, query it once and save the result in a variable, using that every iteration of the loop instead.
Just like CSS, to maintain readable code, it's a good idea to write comments and use indentation.
7. Minimalize Repaints and Reflows
Repaints and reflows are caused when
there is any process of re-rendering the DOM when a particular property or element is changed.
Repaints are activated when the appearance of an element is changed without changing its layout. For example change of styles like changing a background-color.
Reflows are caused by changing the page layout, such as change the width of an element.
There is no doubt that excessive reflows and repaints should be avoided, like instead of doing the below thing:
Try to implement this:
When you set style.width, the browser will recalculate layout. Generally, changing styles of many elements only results in one reflow, as the browser will not think about it until it needs to update the screen. However, in the first example, we ask for offsetWidth, which is the layout-width of the element, so the browser needs to recalculate layout.
If you need to read layout data from the page, do it all together before setting anything that changes layout, as mentioned in the second example.
We hope that after reading this blog, you will implement all these tips in your project.
Want to learn more or any suggestions for us?
Don't forget to share with your friends and write your queries in the comments section below.