logo
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 BOT hates slow websites. When I talk about BOT, it means the 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 that 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 avoid slow websites. Moreover, there is 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, and see if this gave a positive impact on your website speed.
For the one who doesn’t know how to access the .htaccess file, its 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/plugins that are extremely helpful in reducing the image size by maintaining the picture quality.
I would recommend using TinyPNG, 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. The 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 to 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.
The benefit of leverage 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 in 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) that are hard to get leverage, 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 3 s.
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 in just a few bucks!
