How to load HTML pages fast?

Points to Consider

  • Reduce page weight: Reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.
  • Minimize the number of files: Reducing the number of files referenced in a web page lowers the number of HTTP connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received. Too much time spent querying the last modified time of the referenced files can delay the initial display of the web page, since the browser must check the modification time for each of these files, before rendering the page. However, fewer HTTP requests and single image caching can help reduce page-load time.
  • Use a Content Delivery Network (CDN): CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase.
  • Reduce domain lookups: Since each separate domain costs time in a DNS lookup, the page load time will grow along with the number of separate domains appearing in CSS link(s) and JavaScript and image src(es). So we should have the minimum necessary number of different domains on web pages.
  • Cache reused content: Content needs to be cached with appropriate expiration times.
  • Optimally order the components of the page: Download page content first, along with any CSS or JavaScript that may be required for its initial display, so that the user gets the quickest apparent response during the page loading.
  • Reduce the number of inline scripts: Inline scripts can be expensive for page loading since the parser must assume that an inline script could modify the page structure while parsing is in progress.
  • Use modern CSS and valid markup: Use of modern CSS reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text — that “cost” much more than the equivalent text-and-CSS. Using valid markup has other advantages. First, browsers will have no need to perform error-correction when parsing the HTML. Moreover, valid markup allows for the free use of other tools that can pre-process web pages.
  • Choose your user-agent requirements wisely
  • Chunk content
  • Minify and compress SVG assets and images
  • Specify sizes for images and tables
  • Use lazy loading for images
  • Use async and defer for loading of scripts

--

--

--

Developer with 3 yrs of industrial experience in developing scalable web applications.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Quick Start Node JS with Debugging

5 Reasons You Should Learn JavaScript in 2021

Typewriter

TypeItJS — The most versatile typing utility on the planet (probably in the universe)

How to Rename Linked Helper list

Gutenberg Tutorials: #1 How to Build a Simple Gutenberg Block with Webpack

5 Tips for Component Based Development

Angular Structure

Campfire Update Volume 8 #camping read here: https://t.co/GdRs9rI3hg

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.

More from Medium

Journey of DLithe Bootcamp .NET Full Stack Week 2(Jan31-Feb5)

Creating a Link-Sharing Site Part 1

Building responsive web apps in less than a week using Postman!

Build your First Chrome Extension