Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to author fast-loading HTML pages?
We can optimize our web application in various ways, and cause our web page to load faster, and in a more efficient way, which not only will reduce the load on the web servers, but also increase the SEO rankings of the website.
Let’s discuss the different ways through which we can optimize the web page, and understand them with the help of examples.
Approach 1: Minimize the File Size as Much as Possible
File size should be minimized as much as possible. This can be achieved by trimming unnecessary whitespaces from within the file, removing unnecessary comments, and/or replacing all the inline stylings and scriptings with external stylesheet files and scripts. There are many online tools that help you achieve this minimization, for example, HTML Tidy, etc.
Let’s discuss the approach with an example, below −
Bad Practice
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to author fast-loading HTML pages?</title>
</head>
<body>
<!-- comment here -->
<h3>
How to author fast-loading HTML pages?
</h3>
</body>
</html>
Good Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
Approach 2: Reduce the Number of External Files Used
Using external files in our web application implies creating as many external HTTP connections, and thus waiting for their respective request-response cycle to complete to see their results.
Reducing such connections will help us reduce the wait time for the page to load, and will also reduce the overall waterfall time for the HTTP requests. One of the ways we can achieve this is by using only a single external image instead of using multiple images and then consuming that image for all our different image requirements. We can adjust that single image and position it accordingly so that only the required part of the image is visible, and the rest of it is hidden.
Approach 3: Lazy Load Your Image Assets
Images are loaded synchronously by default in a web browser. This causes the image to fetch first, even if it is not visible on the screen. We can avoid this by loading our images lazily, meaning, to only load our images only when they are visible in the viewport. We can achieve this by using the “loading” attribute of the “img” HTML tag, and assigning it to “lazy”.
Bad Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.tutorialspoint.com/static/images/logo-color.png" /> </body> </html>
Good Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.tutorialspoint.com/static/images/logo-color.png" loading="lazy" /> </body> </html>
Approach 4: Defer or Async Load Your External Scripts
By default, the external scripts are loaded in a blocking way, meaning they block the further execution of the code until the external scripts are loaded and fetched. We can avoid this by loading them asynchronously, that is, loading them parallelly, and do not block the further execution of the code, or loading them in a deferred manner, that is, loading them only after the web page has finished loading. We can use the “async” and “defer” attributes to achieve the same.
Bad Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> <script src="test.js"></script> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
Good Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> <script src="test.js" defer></script> </head> <body> <h3>How to author fast-loading HTML pages?</h3> </body> </html>
Approach 5: Explicitly Set the Sizes of Images and Tables
Explicitly setting the size of images and tables helps the browser to fast-load them without needing any reflow of the content. We can achieve this by using the “height” and “width” attributes in images and the “table-layout” attribute in the case of tables.
Bad Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.tutorialspoint.com/static/images/logo-color.png" /> </body> </html>
Good Practice
Example
<!DOCTYPE html> <html lang="en"> <head> <title>How to author fast-loading HTML pages?</title> </head> <body> <h3>How to author fast-loading HTML pages?</h3> <img src="https://www.tutorialspoint.com/static/images/logo-color.png" /> </body> </html>
Approach 6: Use a CDN if Possible
CDN stands for Content Delivery Network and is a useful asset to serve the resources in an efficient manner. They are present in various geographic locations worldwide and can help in reducing the physical distance between the servers and the client. The reduction in distance implies faster loading of the resources and a reduction in page load time.
Conclusion
In this article, we learned that we can author fast-loading HTML pages using different approaches. In the first approach, we learned that we should minimize the file size by removing the unnecessary whitespaces; in the second approach, we learned we should reduce the dependency on external file resources in our web application; in the third approach, we learned we should lazy-load our image assets so they won’t get loaded unless in the viewport; in the fourth approach, we learned to async or defer the loading of external scripts; in the fifth approach, we learned to set the sizes of images and tables; and finally we learned to use CDN wherever possible to load external scripts.
116 Views
