How to load HTML pages fast?

Abhay Jain
2 min readDec 7, 2020

--

An optimized web page not only provides for a more responsive site for your visitors but also reduces the load on your web servers and Internet connection.

Optimizing page load performance is not just for the content that will be viewed by narrowband dial-up or mobile device visitors. It is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.

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

--

--

Abhay Jain

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