How to Optimize Website Loading Speed for Better User Experience
Have you ever had a situation where you wait more than 3 seconds for a web page to load? Of course, it was a stupid question. But honestly, how often do you wait those three seconds for a page to load? I never wait longer than 3 seconds and close pages. This is how the modern Internet works - if you want to share information with the world, you must make sure that the user receives it quickly with minimal waiting.
Today we will talk about how to do it. How to make sure that your valuable material on the site does not have to wait for users, so that the page loads quickly, because it largely depends on whether you get a page view by a user or not, get a client (if it is a business landing, for example) or not. Here are the steps I suggest taking:
Step 1: Compress images
Images are one of the most significant contributors to website loading speed. By compressing images, you can significantly reduce their file size without compromising image quality. This means your pages will load faster while still displaying high-quality images.
Everything is quite simple here. Before uploading an image to a hosting, use one of the online image compression tools. For example, TinyPNG. I always use this particular tool - everything is simple and fast, and most importantly, I see how much the image has been compressed and how much hosting space I will save.
TinyPNG - Interface
According to statistics, it is because of images that a page can make friends for a very long time, so pay special attention to this, because in fact this one step is already 40% of success in optimizing page load.
Step 2: Minimize HTTP Requests
HTTP requests are made every time a web page loads. The more requests a page needs to make, the longer it will take to load. Minimizing HTTP requests by reducing the number of files loaded can help to speed up your website. To understand if this problem affects your site, I advise you to use the Website Grader tool or another similar tool that you find more convenient.
Website Grader - Interface
In general, you can get information about HTTP requests from the Google Chrome Developer Tools. You can also see exactly which HTTP requests you are sending and analyze what you can get rid of to speed up your page loading.
HTTP Requests - Google Chrome Developer Panel
However, be careful and do not rush to delete lines of code, because when you delete some lines of code, the page may not display correctly at all. In fact, one can talk endlessly about the analysis of HTTP requests. This is a very large topic that deserves a separate article. This information is enough to optimize the page loading, but anyway, I advise you to read this article for even more understanding.
Step 3: Use a Content Delivery Network (CDN)
A CDN, or content delivery network, is a worldwide network that caches static material (such as pictures, CSS, and videos) for a website all over the globe. CDN reduces website load time by fetching static material from the nearest CDN server.
For example, someone accessing a web server in the United States from Thailand must wait for each request to go to and from the US. Although each request may only take a few hundred milliseconds, a site that makes hundreds of requests will cause the entire load time to grow. A CDN-enabled website, on the other hand, may route some requests to a server closer to the visitor.
One of the most popular CDN services is Bunny CDN. It is designed to help websites and applications deliver content quickly and efficiently to users around the world. Bunny CDN offers a range of features such as real-time analytics, custom SSL certificates, and image optimization. With its global network of servers, Bunny CDN can help to reduce the load time of your website or application and improve the user experience for your visitors.
Bunny CDN - Prices
It is a cost-effective solution with flexible pricing plans that can be customized to meet your specific needs. Bunny CDN also offers a 14-day free trial, so you can test its services before making a commitment. Overall, Bunny CDN is a great option for businesses looking to improve their website or application's performance and user experience.
If I were you, I would use CDN services only if you already have a ready-made and working business, if you have a landing page that attracts a lot of customers. If you have a simple blog, then using such services will be too expensive, in my opinion. But, of course, it's up to you to decide.
Step 4: Optimize code
One of the most popular CDN services is Bunny CDN. It is designed to help websites and applications deliver content quickly and efficiently to users around the world. Bunny CDN offers a range of features such as real-time analytics, custom SSL certificates, and image optimization. With its global network of servers, Bunny CDN can help to reduce the load time of your website or application and improve the user experience for your visitors.
Also refer to one single CSS and JS files, remove all unnecessary lines from these two files. For example, I still have a lot of CSS styles that I no longer use, and I constantly forget to remove these lines. In a word, get rid of the garbage and keep only two files - one for CSS styles and the other for JS scripts. If you have a separate CSS file for the navbar then this is a problem that needs to be fixed.
Also get rid of third party scripts that are not running on your web server. These include, for example, various platforms that integrate a subscription modal window into your web page and store your subscriber database on their own, as One Signal does. According to this logic, Google scripts for metrics and analytics of site visitors can also be included here, however, all such ones are an exception to this rule, because you cannot do without them.
One Signal - Third-Party JS Scripts Integration
Use Caching
Caching is the process of temporarily storing frequently accessed data or resources in a local location, such as a computer's hard drive or a server's memory. By storing data in a cache, subsequent requests for the same data can be served faster and with less strain on the original source, since the data can be retrieved from the cache instead of having to be fetched again from the original source. Caching is commonly used in web browsers to speed up page loading times by storing website data, such as images and scripts, in the browser's cache.
Cache Manager - Hostinger cPanel
Enabling caching depends on the type of server and platform you are using to host your website. Here are some general steps to enable caching:
📌 Check if your server has caching enabled: Some servers have caching enabled by default, while others may require you to enable it manually. Check with your hosting provider or server administrator to see if caching is already enabled.
📌 Install a caching plugin: If you are using a content management system (CMS) like WordPress or Drupal, you can install a caching plugin to help with caching. There are many free and paid caching plugins available, such as WP Super Cache or W3 Total Cache.
📌 Configure your caching plugin: Once you have installed a caching plugin, you will need to configure it to optimize caching for your website. The settings will vary depending on the plugin, but generally, you can choose which types of content to cache, set the cache expiration time, and specify which pages should not be cached.
📌 Use a content delivery network (CDN): A CDN can help distribute your website content across multiple servers, reducing the load on your server and improving caching. Many CDNs also offer caching services, which can help speed up your website.
📌 Test your website: After enabling caching, it's important to test your website to ensure that everything is working correctly. Use tools like Google Page Speed Insights or GTmetrix to check your website's performance and identify any issues that need to be addressed.
I have always used and will continue to use Hostinger services. In the hosting control panel, you can enable caching with one click.
Enable Gzip compression
Enabling Gzip compression is a way to reduce the file size of your website's resources, such as HTML, CSS, and JavaScript, before they are sent to the user's browser. This can significantly improve the website's loading speed and user experience.
To enable Gzip compression on your website, you can follow these steps:
📌 Check if your server already has Gzip enabled by using an online tool like Giftofspeed. If it is already enabled, you can skip the rest of the steps.
My Giftofspeed Report
📌 If Gzip is not enabled, you can enable it by adding the following code to your .htaccess file (if you don't know what it is, check out the resource here):
<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>
This code tells your server to compress the specified file types and send them to the user's browser in Gzip format.
Test if Gzip compression is working by using an online tool like GTmetrix or Google PageSpeed Insights. These tools will show you if Gzip compression is enabled and how much it is reducing the file size of your website's resources.
GTmetrix Report Example
In general, I highly recommend the GTmetrix tool. At its core, it is just a visual part of the developer panel from Google Chrome.
Conclusion
Website loading speed is a critical factor in providing a better user experience. By following the tips above, you can optimize your website's loading speed and provide a better user experience. Remember that even small improvements can have a significant impact on website loading speed, which can translate into increased engagement and revenue for your business.