How to Increase Website Speed in HTML: 4 Recommended Steps

December 21, 2022

9371 Views 0

SaveSavedRemoved 79

Have you been wondering how to increase website speed in HTML? Are you worried about the loss of conversions and website traffic? Honestly, you must stop worrying and think about how to solve it as quickly as possible.

Not just humans, even the bots hates slow websites. When we talk about bots, it means search engine bots including Google, Yahoo & Bing.

As Google has started giving priority to mobile-first websites, making websites run faster is highly recommended.

A slow website doesn’t simply leave a bad impression on the visitor but also kills Google's ranking. You heard it right. Slow websites will be harder to rank on Google no matter how good and helpful the website is.

Is Website Speed Really Important?

Tell me something, when you visit a website for online shopping or to read an article, would you like to wait too many seconds to load the website? Can you wait that long? No, isn’t it?

Same way, internet users consider a website with good page speed and avoids slow websites. Moreover, there are high chance that the user who experienced a bad page speed will not come back again in the future.

You can test your website speed score by going to GTMetrix.com, Pingdom.com, or Webpagetest.org. The process is very simple, just enter your website URL and hit enter.

If your website is experiencing a bad page speed score, then follow the below steps straight away.

1. Enable Gzip Compression in HTML

If you are new to coding and technical stuff, then you really may not know what is Gzip compression and why is it needed.

When a visitor opens a website, the browser delivers the files requested. Whether it’s an HTML, CSS, or Javascript file, the browser takes time to deliver these files depending on the number of files and their size.

The more the size of the file, the more time browser takes the page to display on the screen.

So how is Gzip compression helpful to increase the HTML website speed?

Well, the Gzip compresses these files together and reduces the size instantly. This way, the browser takes less burden and loads up the website quickly! For more information on Gzip compression visit GTmetrix.

For WordPress websites, there are many plugins that do the job. But as you have a static HTML website, you will need to do it manually by adding some piece of code in your .htaccess file.

Note: Before you make any changes to your .htaccess file, please take a backup as it may ruin your entire website if anything goes wrong.

Now just add the below code to your .htaccess file carefully and save your file.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

That’s it, now try testing your website again, see if this gave a positive impact to your website speed.

For the one who doesn’t know how to access the .htaccess file, it’s location on the server which can be accessed through either FTP or Cpanel. If you don’t find it on server, then you can create one.

2. Compress & Reduce Image Size

Uploading the images as it is without compressing and resizing them is the worst thing ever.

Out of all the steps mentioned in this article, I would highly recommend compression of images be on top priority. More than 50% of websites have a 2 MB or higher page size which is due to images and file size. Simply compressing them can be a game-changer.

I’ve seen many websites on the internet which had a very bad website speed score and one of the main reasons was heavy images with large dimensions. Few of them were interior designers and real estate websites who never wish to compromise their picture quality. That’s why they’re facing difficulties to rank on search engines and losing the visitors who closed the website due to high loading time.

It’s an absolute fact that no one likes to compromise their quality. But fortunately, there are many freemium and premium online tools and plugins that are extremely helpful in reducing the image size by maintaining the picture quality.

I would recommend using TinyPNG, and TinyJPG to compress the images online. For WordPress websites, there are many plugins like WPSmush.

Along with compression, make sure you resize your images according to the width and height of your website’s page elements.

These 2 image optimization techniques are one of the most important steps to increase website speed in HTML.

3. Minify HTML, CSS & Js Files

Unlike websites that are built by a page builder, HTML static websites are built clean and contain a few files.

However, if GTmetrix has given you an F grade under Minify CSS or Javascript files, then you must definitely take this into consideration.

Try to keep your HTML, CSS & JavaScript files as small as possible. More the size of the file, the more time it takes the page to load.

In this process, the tool removes unnecessary formatting, whitespace, and repeated code. This way, your file size reduces drastically.

In most cases, enabling compression, and minification of these files along with compressed images increases HTML website speed drastically. So I am hoping that it will work for you as well.

So how do minify these text files to increase website speed in HTML?

You may minify your files by visiting minifier where you just need to copy the code and paste it into the text box. You can either copy-paste the file URL or the entire code manually.

Note: The process is simple but still, you must be careful by taking the backup of that file. If anything goes wrong, you can restore your files easily.

4. Leverage Browser Caching

When a visitor opens a web page, the browser loads multiple files including CSS, JavaScript, images, and many other resources and displays them on the screen.

The issue is, the browser takes time to download all the files depending on their sizes and display on the screen.

This is why browser caching is extremely necessary. As it can help by storing these files locally in the visitor’s browser that can be accessed in the future.

Recommended for you:

The benefit of leveraging browser caching is to save the resources in the browser cache and load them much faster when the same visitor visits again to the same website or web page.

This way, the browser will not have to take the time to load those resources again.

So let’s proceed further to leverage browser caching to Increase the HTML website speed. You just have to copy the code below and paste it into your .htaccess file.

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

After entering this code, save it and re-test your website. See if there’s a positive change in your score.

Note: There are a few 3rd party scripts (including Google Ads, Facebook, etc) which are hard to get leveraged, as they’re hosted somewhere else. You may ignore those websites and work on the script files which are hosted on your server.

Conclusion

Follow the above steps carefully, by taking a backup of your files. The above steps will definitely give you a positive result if done properly! However, reducing the page load time is a challenging task.

I myself took a couple of hours to work on the speed score and fortunately, achieve my goal with the load time within 2 seconds.

In some situations, the speed score and the page load time fluctuate due to server issues. You may re-test and check the score after a few minutes.

There are a few other factors as well that come into consideration when a website has a bad speed score. If in case you have tried all the above steps and still your website loads slowly, then consider looking into the below steps as well.

Go with a good Hosting Provider
Make Fewer HTTP requests
Enable CDN (Content Delivery Network)
Asynchronous Loading

If you’re not a technically sound guy, then you may feel free to get in contact with us. We will make sure the work is done effectively for just a few bucks.