How to Improve Page Loading Speed of Static HTML Websites?

HTML is the base of internet and web servers send HTML pages to the browser frontend. Browsers like Chrome, interpret the HTML markup and display the page content in a readable manner. This concept is the same for those sites using PHP with content management systems like WordPress. However, creating a website is not sufficient in these days. You have to optimize your site for fast loading in order to get good search engine ranking and user experience. In this article, we will explore how to speed up your static HTML website and improve the possibilities of pushing your site to top in Google search results.

Before We Start – Static HTML Websites  

Remember, in this article we talk about static HTML websites that you create yourself. You can create HTML websites with your own design or use readymade frameworks like Bootstrap. In general, you can upload the HTML pages and other resources (images / CSS / JS) on your server and access the site from the browser. Other than domain name and hosting account, you do not need any other third-party tools for this purpose. Alternatively, you can use third-party tools like Mobirise to create static HTML pages and upload through FTP.

We are not discussing about the following cases:  

• Content management systems like WordPress – WordPress offers complete optimization suite for improving the loading speed of your website. Check out our article on optimizing page loading time of WordPress sites.
• Website builder tools like Weebly, Wix, etc. – these platforms are not open source solutions which essentially means you have limited options within the platform to optimize. You can use some of the options suggested in this article. However, you may not optimize stuffs like combining CSS/JS, removing render blocking resources, etc. as you can’t access the server.

Check Page Speed in Google PageSpeed Insights Tool

Now that the context is clear, we will move on further. The best way to start the optimization is to first understand the basic problems existing on your site. In order to find the speed related problems, go to Google PageSpeed Insight tools and check the score of your website. Do not worry much about the score at first, scroll down and check the opportunities section for improving the score.

Note that the opportunities shown in PageSpeed Insights tool will NOT directly impact the score. As a general rule, the score will be low when you have issues in above the fold (header section) section of your website. It includes render blocking resources, preloading fonts and images, cumulative layout shift with third-party code, etc. Therefore, you can combine the can combine the opportunities and the general rules to improve the page loading speed of your static HTML websites.

How to Improve Page Loading Speed of Static HTML Websites?

You can use the following features to improve the speed of your site.

1. Combining and Minifying CSS and JS Files

A static HTML website will have a CSS stylesheet as a minimum resource to define the style of elements on your HTML page. In addition, you can use additional JavaScript files for adding other functionalities like sliders on your site.

• The first thing you need is to remove the unnecessary spaces and comments in your CSS / JS / HTML files. This is called minification which reduces the file size and improve the page loading speed. Use these CSS, JS and HTML minification tools to remove unnecessary clutter from the files. Remember, the minified CSS and JS files will have extensions like .min.css and .min.js.
• Check with your hosting company and enable GZIP compression to compress your HTML content. This will reduce the file size served to the browser and drastically improve the page speed. You can verify whether your site is using GZIP compression using this tool and find the savings in size.
• Combining CSS and JS files will help you to reduce the number of HTTP requests to your server. Therefore, you can combine the CSS files instead of using styles in different stylesheets. However, this is not required if your hosting server supports HTTP/2 protocol that supports parallel HTTP requests. In addition, combining JS files may break the layout unless you know how to combine the code properly inside the file.

2. Removing Render Blocking Resources

Next step is to remove the render blocking resources from above the fold (header) section of your site. As a rule of thumb, make sure to link all JS files after the body section of your HTML page. This will help you to delay the scripts loading and avoid render blocking issues.

• Go to Google PageSpeed Insights tool and test your website for measuring page loading speed.
• If you have any warnings for render blocking resources, note down the file name.
• Move the file from your header section to footer area.

Remember, it is not possible in all situations to move the file to footer area. Check your site’s layout and functionalities are working fine when you rearrange the files. In addition, you may need to disable combining files to find which resource file is causing the trouble.   

3. Use Content Delivery Networks (CDN)

The above two options are more technical in nature which may be difficult for you. In order to avoid wasting time and breaking your site’s layout, the best possible solution is to use a content delivery network (CDN) like Cloudflare StackPath.

• You can combine and minify files using CDN network instead of doing it on your server.
• Increase the speed, especially if you are serving content for international users.
• Improve the security by blocking automated bots and with brute force and  DDoS protections.

The basic Cloudflare CDN is free which is sufficient for most of the static HTML websites. You can combine and minify files with single click and test how it impacts your page loading speed in Google PageSpeed Insights tool. If you are using frameworks like Bootstrap, make sure to include the CDN resource instead of servicing the source file from your server.

4. Avoid Third-party Codes

One of the most important factors in improving your page loading time is to limit the use of third-party codes on your site. The problem is that you can’t control the loading behavior of third-party codes. The dynamic loading behavior will impact the speed parameters like cumulative layout shift and largest contentful paint.

• Place the advertisements like Google AdSense below the visible area when the page loads. Unfortunately, this will affect your earnings directly by reducing the CTR and pageviews.
• Insert Google Analytics or any other tracking code after the body section.
• Avoid inserting codes in header for social sharing.
• If you are using Google fonts, make sure to use in a simplified manner with less font weights and font families. This will help you to reduce the number of files and get them quicker from Google’s server.

5. Preloading Fonts and Images

Another popular page speed problem is about preloading of fonts and images that you load on the header section. If you see warning messages in Google PageSpeed, add the following codes in your header section. Make sure to replace the file names with the ones what you see in Google PageSpeed Insights.

<link rel="preload" href="font-file " as="font" crossorigin="anonymous">
<link rel="preload" as="image" href="image-file">

This is very useful especially when using font awesome icons on your site.

6. Images – Compress and Use Next-Gen Format

The last option we explain here is to compress the images you use on your site. Since, static HTML websites do not have any in-built option to reduce the size of the images, you have to manually compress them before uploading on your server.

• Some web servers have an option to compress images when uploading. Check with your hosting company whether they offer any tool for this purpose.
• Otherwise, use image compression tools to reduce the size of your images without losing the quality.
• In addition, you can convert the image format to JPEG-2000 or JPEG XR. Generally, VPS servers have an option to server images in WebP format which you can confirm with your hosting company. In this case, you do not need any conversion as it will automatically happen from server side for each image. Using images in WebP, JPEG-2000 or JPEG XR will help you to fix serve images in next-gen format issue in Google PageSpeed Insights tool

7. Use Critical CSS

When you have same header section throughout the site, there is an easy way to improve the loading speed. Instead of loading the entire CSS file in the header, you can use CSS only for the visible header section when the page loads in a browser window. This is called critical CSS which you can generate from third-party tools.

• Go to critical CSS generator tool and provide your website URL.
• Generate critical CSS and copy the content.
• Page the copied styles between <style>…</style> tags inside the header section of your HTML site.
• You can defer the main stylesheet to footer section to avoid render blocking CSS issue.