How to author fast-loading HTML pages ?
Generally, we have seen most of the time when the web page is loading at a slow speed due to spending time downloading the cookies & assets such as images, stylesheets, and scripts, etc, which in turn reduces the overall user experience along with the traffic in the site. This problem can be resolved by optimizing the web page that not only provide efficient performance but also helps to make the site responsive, along with reducing the load on the web servers and Internet connection. Thus, optimizing the website can help in Search Engine Optimization (SEO) that will improve the ranking (visibility) of a website in search engines. This optimizing technique can help for the large, complex & voluminous site.
We will discuss all the aspects for optimizing the site & understand them through the examples.
Keep the size small: Keeping the small page size can help to reduce the page weight that including eliminating the unnecessary whitespace, extra comments, usage of the external script instead of inline CSS files.
Writing messy code (adding many whitespaces, comments, or unnecessary elements) makes your web page performance slower. It adds extra weight to the pages and therefore they become heavier and make the website slower to load. Some tools can help you to get rid of such extraneous code, such as HTML Tidy, or check out Google’s recommended tools.
We can avoid using inline HTML attributes, which can easily be replaced by CSS properties such as:
align: This attribute has been replaced by a combination of CSS properties- text-align, float, and vertical-align.
This can be replaced by the following code:
bgcolor and background: Instead of using these attributes to apply background color and images, use the CSS properties- background-image and background-color.
The preferred code:
height and width: The same result can be achieved by using CSS properties that go by the same names.
The preferred code:
border: Apply border using CSS property- border, rather than using this HTML attribute.
The preferred code:
Minimizing the number of files: More files means more HTTP connections are required to download a web page, therefore, it will take more time to load. For instance, if you are using too many images on your web page, every image file will need one connection to the server. That is why too many files not only increase the load size but also can choke the server by sending more than the allowed HTTP requests.
Reducing the number of images is not always possible. In that case, you can use CSS image sprites that combine multiple images into a single image file, and that reduces the number of HTTP requests. You can use it when you are using different parts of a single image just by adjusting the dimensions and positions. In the case of every background image, this trick will not work.
Example: Different parts of this single image can be used in different places. Suppose you want to use only the first symbol somewhere.
We can use the single as in the following example
Reducing domain lookups: Each separate server domain costs time in DNS lookups. The more URLs we add to our HTML file, the more additional DNA lookups will be required. We can check this using the Pingdom website speed test tool. These DNS lookups add more time to the load time as nothing else can be loaded until the DNS lookups are finished.
Remember, DNS only queries a particular domain once. So, only the unique DNS lookup times are added to the load time.
Note: When you run your website through Pingdom more than once, it caches the DNS as it already knows the IP information. So, when you test your website for the second time, you find your website faster than before.
Minifying and compressing the size of images and SVG assets: Most of the SVG drawing applications produce SVGs containing lots of unnecessary metadata. They can be removed by configuring the server and applying gzip compression. Creating a cleaner resulting SVG code also helps the page to load faster.
A High-resolution image takes a lot of time to load. Resize the images before using them on your webpage. You can use any image manipulation tool for that, such as Photoshop, GIMP, CorelDRAW, etc. Online image resizing websites are effective as well.
Script defer: When we add the <script defer>, the browser will download the scripts included in the page but execute it only after the HTML parsing is completed. defer attribute ensures to execute the scripts in the same order that they appear in the document.
Script async: The async attribute is used to tell the browser that the script file can be executed asynchronously. It means that the parser does not have to stop as soon as it reaches the script tag to fetch and execute. After downloading the script, the browser can execute the script but fetching can be parallelly done with the document parsing. Once the downloading is completed, the parser is paused for the script to be executed. Async scripts are executed as soon as the script is loaded, so unlike defer, the order of the scripts may not be the same.
You can use defer when your scripts are dependent on each other and the order of the execution is important to you. For independent scripts, the async attribute can be used.
Note: If you are writing your scripts right before the body tag then you don’t have to use async or defer as there is not much parsing left to be blocked. However, for whatever reason, your scripts are placed elsewhere, you can use these attributes.