Have you tested the speed of your website lately? The page speed is an important factor that determines the profitability and traffic of your website. This blog provides some important guidelines to improve your website speed in 2020 and beyond.
Most websites run with terrible loading times.
According to Google, if your website creeps up 2 seconds late, it leads to an awful increase of 32% in bounce rate. Page loading time is vital for revenue-generating websites — ecommerce, social media, and business sites.
While in the world of fantasy, the tortoise might beat the rabbit, that’s not the case on the web. Speed matters more than ever. KISSmetrics has done a survey that revealed that the page abandonment rate increases steadily as the loading time increases.
By the time your website has clocked 5 seconds with nothing to show, more than 25% of your potential audience have already left.
Why does speed matter?
Page speed is a highly discussed and debated topic.
A key reason for websites to be fast is to improve their visitor experience. Secondly, it’s extremely important for profitable conversion rates. Some web-based businesses could go out of business only due to slow loading.
There are many tools to check the speed of your website. Unfortunately, not all of them give conclusive results. Some tools you could use are GTMetrix, Pingdom Tools, and ThinkWithGoogle.
Websites that are particularly affected by the speed issue are ecommerce sites which need to cater to a crowd of shoppers effectively. Frustrated visitors could quickly leave the website leading to heavy losses.
If you are relying on online advertising to bring customers and leads, slow landing pages will fail your campaigns.
Google Ads and Facebook Ads consider page speed as a major factor of landing page experience. Google has explicitly mentioned in its Google Ads landing page experience help page that lower page loading time and embracing of AMP (formerly Accelerated Mobile Pages) are highly desired for better quality scores and higher ad positions.
Of course, the higher ad position with a better quality score comes at a lower cost of advertising as well (lower cost per click).
It’s obvious that better page loading time has a lot of advantages in terms of user experience, better ad performance, lower costs, higher traffic, and more revenue. Yet, the web is rife with sluggish, awkwardly designed pages which need to be forcefully pulled from their servers.
Here, we analyze key ways of improving your website’s speed and performance in order to improve your bottom line.
Why is your website slow?
Let’s see why your website may be plagued by such deplorable loading times. You had given thought while purchasing that unlimited hosting plan from GoDaddy and installing the well-known content management system WordPress, hadn’t you?
Why is your site still slow?
There could be a long list of reasons for this. Here are some important ones.
1. The web hosting plan
Did you think that the entry-level hosting plan from a web host such as GoDaddy or Bluehost will help with your speed?
I had the same misconception back in the day when I was lured by the “unlimited” hosting packages from a flurry of hosting companies. Many online reviews also were promoting them strongly, incentivized by affiliate commissions.
A key thing you need to understand is most of the low-cost web hosts provide shared hosting platforms, where a server is shared by many websites. It’s only useful for very basic websites for hobbyists or students. Also, if you are on a budget and don’t mind poor traffic and recurrent downtimes, you could use shared hosting.
In shared hosting, your website’s public IP address could be shared by a hundred other websites. All of them could vie for the server resources and could slow down your site.
In terms of security and overall search ranking, it may not be a good idea because you don’t know what kind of websites you share your resources with. There could be some spammy websites which bring down the overall reputation of the shared IP pool.
2. The web server
Did you know that your web server could influence your site’s loading time?
Before porting ZoomOwl to its current Nginx web server, I was using Apache, the age-old web server. Unfortunately, Apache doesn’t come with the speed benefits of a new-age web server such as Nginx or Lighttpd. Check out the study below.
So, if you are still stuck with Apache, that may be causing your website to be sluggish.
3. Your CMS
Don’t be complacent thinking that you have WordPress — arguably the most popular website building platform out there with 51% market share. Popularity doesn’t always mean speed. In several tests, WordPress fared much worse than several other recent content management systems (CMSes). A study by Yottaa shows WordPress performing the worst when it comes to site speed.
It doesn’t necessarily mean that WordPress is the slowest website building platform. It only means that most WordPress sites need some optimization and cutting down on the clutter.
4. Configuration issues
Sometimes the speed is due to poor configuration of your CMS or web server. This was particularly the case with ZoomOwl during the early days. I had no idea how the web server worked, and I configured it haphazardly leading to not taking advantage of the features offered by the web server or the CMS.
I had to go through a lot of optimization techniques later to make it faster and more secure. The same could be the case with your website.
5. Page size
In any page speed testing platform, you can see the size of your page. Anything above 1MB is undesirable. For a really fast-loading website, you might have to bring the web page size down to below 1MB.
But most websites are unable to do that due to the sheer volume of content they have to show.
Take a look at this article for instance. It has many images and a lot of text content.
A large image even with a lot of optimization could be more than 100 KB in size. That could easily add to the page size and slow down the website.
6. Non-rendered content
Sometimes, your website loads content that it doesn’t actually display on the page. This is especially true with a poorly managed WordPress installation with a large number of unnecessary plugins and data that are never rendered on the page.
The non-rendered content could include images, scripts, stylesheets, etc.
It’s advisable to optimize your site so that it stocks only the essential elements.
7. No CDN
Content delivery networks (CDNs) have become pretty universal. Many entry-level websites still operate and do good business without ever adopting a CDN. But the true speed and availability is possible only with a good CDN like Stackpath or Cloudflare.
How to speed up your website
Now, let’s see how you can speed up that corpulent sloth of a website. I have listed a number of techniques here for you.
There is, however, a delay always present in your website due to the physical location of your server.
For instance, ZoomOwl’s VPS is in North America. So, a request that comes from Perth, Australia, which is farthest away from my server, would take a few more seconds to fulfill. Any request from within the US would be fulfilled in around a second.
This delay exists because data has to flow from one continent to another. This is the bottleneck when it comes to any normal web hosting. However much we optimize the website, we cannot overcome this location delay.
The only way to fix the location delay is to have a local server, which can be done with a CDN. So, it is safe to assume that the CDN is the ultimate weapon when it comes to having a fast website.
Having said that, check out the important steps to get a faster website below.
1. Embrace faster, business-focused web hosting
As mentioned earlier, shared hosting is only for hobbyists and not serious businesses.
In order to improve your loading times and to have better control over your web server, you should invest in a virtual private server (VPS) or a dedicated server. The dedicated server is required only for large businesses with very high traffic.
VPS may be provided by the same hosting companies that give you the entry level shared hosting. The web is full of reviews of VPS hosting platforms and you can’t go wrong with many of them. You could also go ahead with a managed hosting service like Kinsta or Cloudways if you don’t want to dirty your hands with technical stuff.
What we use for ZoomOwl is the Vultr VPS server [Note: this and some other links here are affiliate links that will give me a small commission if you sign up], which gives us an impressive backend hardware capable of deploying any web server or operating system or CMS we want.
The only issue with VPS is that it needs you to have a little bit more technical knowledge than in the case of shared hosting.
But once your CMS is installed, you don’t have to worry about the server backend. It will continue to run smoothly. Also, I am on one of Vultr’s medium plans with a 2 virtual CPU server with 80GB of storage. I do get my own dedicated IPv4 and IPv6 addresses. I pay a monthly fee of $20 for this package. Vultr package details are below.
You have to take regular backups in the form of server snapshots.
So, an important point to note is that if you are serious about your business, do not go with shared hosting. It not only loads your site slower, but tends to give a lot of downtime (seriously, a lot).
2. Server optimizations
You have to find out which web server you are using from your hosting partner. If you are using Apache, it’s wise to change to Nginx or Lighttpd, depending on your application needs.
During the time when I was trying to shift from Apache web server to Nginx, I learnt how to perform various server optimizations. I didn’t become an expert, obviously! But I managed to do a lot of things to change the way Nginx responded to requests. Here are some of the things that I took care of.
I am using a LEMP setup (Linux – Nginx – MySQL – PHP). And I ensure that all of these are in their latest versions. I have installed WordPress on this LEMP setup. The Linux in ZoomOwl’s case is Ubuntu, while you could also use CentOS or any other distribution.
The instructions to install WordPress on LEMP and set it up are available in my hosting backend. Most VPS providers allow you to set up WordPress or an array of application choices at a click.
2.1. Nginx web server optimizations
A few optimizations that I did on Nginx are below. These are recommended by Nginx itself. You might have to gain some server optimization knowledge or work with a web developer to achieve these.
- Adjust the worker_processes to 2 (since I have 2 virtual CPUs). Adjust this to the number of CPUs (virtual or otherwise) on your hosting plan.
- Increase worker_connections to 2048, which is 1024 per vCPU I have. For Nginx, the maximum number of worker_connections is 1024 per CPU. So, since I have 2 vCPUs, I selected 2048 here. Depending on the number of CPUs you have, you could select the worker_connections accordingly.
- Enable GZIP. Enabling GZIP compression at the web server side itself allows you to be fast from the ground up.
- Enable caching for all cacheable files — these are the static files. Anything with extensions like PNG, PDF, JPG, JPEG, GIF, CSS, etc., are cacheable.
- You could also optionally disable the server access logs. This is not a recommended solution since the web server logs will no longer be available. But your server will have some resources freed up to speed up your site.
- In addition, if you are using a secure certificate such as SSL or TLS, you should also use HTTP/2 or SPDY to speed up secure connections.
2.2. Apache web server optimizations
Although Nginx zipped past Apache in 2019 in market share, the age-old Apache is still a widely used web server. You may have it on your hosting backend. If so, you could go ahead with the following key optimizations for making Apache faster.
- Use mod_gzip compression. Mod_gzip is an Apache module that lets you take advantage of the GZIP compression on the server side.
- Use mod_expire and mod_header tags to encourage caching.
- Enable HTTP caching by installing apache2_utils package.
- Use persistent connections to ensure that the connections from clients are kept alive longer.
3. Reduce HTTP requests
HTTP (HyperText Transfer Protocol) requests are raised every time a website is loaded on a browser. For instance, to load the HTML part of the website, a request is raised. For fetching an image, another request is raised. And so on. The size of a resource also affects the number of HTTP requests. Your server may not serve large resources in a single pass. It may need to be transferred through multiple requests.
As you glean from this picture, ZoomOwl has 67 HTTP requests, which is something I am not very proud of. It does indeed take time to deliver all those resources.
Each HTTP request takes time, so it’s in your best interests to reduce the number of requests. The best way to reduce HTTP requests is to combine files that can be combined and reduce the size of resources.
Combining is effective in case of CSS and JS files. But if you are using HTTP/2, you may not need to combine CSS and JS files as HTTP/2 allows parallel HTTP requests.
4. Browser caching
Beyond the web server caching we discussed above, you need to have browser caching. This is the process of enabling and encouraging visitors’ browsers to cache your website and its resources.
On WordPress, this can be done with the help of a good caching plugin such as the W3 Total Cache (W3TC) or WP Super Cache. For ZoomOwl, I found WP Super Cache working better than W3 Total Cache.
W3TC plugin is perfect for web savants who can tweak a lot of different aspects to improve the site speed. W3TC is a full package that will give you almost all the optimizations you need for a faster website — CDN management, AMP support, caching, minification, deferred processing, lazy loading, non-blocking JS rendering, reverse proxy integration, etc.
WP Super Cache is more useful for simpletons who don’t understand the nuances of caching and speed optimizations.
5. Compression and removal of unnecessary images
As mentioned earlier, images constitute a huge part of the overall page size on most web pages. It’s wise to compress your images to one of the good compression formats before uploading them to your website.
You should get an idea of various image file formats. Here is a brief overview.
- JPEG/JPG: This is the most commonly found image format. Almost all browsers support this. This is a lossy compression standard that reduces the quality of the original image and makes it fit for websites. However, on heavy compression, the image quality may get distorted badly. It’s recommended to use JPG for most web images.
- PNG: PNG images are also compressed from their original images. But PNG compression is lossless compression, which means the image quality is preserved while file size is reduced. PNG files tend to be larger than JPEG files. Also, PNG allows you to have transparent backgrounds. As a result, this is perfect for use for logos and infographics.
- TIFF: TIFF compression is lossless and gives files in large sizes. It’s better to avoid these images on the website. It’s good only for downloadable logos and other marks and for print-ready files.
- BMP: Bitmap images (BMP) are the raw files generated from the camera. These tend to be extremely large in size and should not be used on websites.
- GIF: GIF is another popular image format. It’s useful for short looping animations and allows for small file sizes for such animations.
- WebP: WebP is the latest standard embraced by the web community; it’s developed and heavily promoted by Google. It’s supposed to unseat JPEG as the primary image compression standard of the web. The only issue with WebP is that some older versions of browsers may not be able to parse this format. So, until your users move to the latest browsers, it’s better to stick with JPEG for compatibility.
In order to compress your images to one of the web-friendly formats, use a good image compression tool such as Kraken.io or ImageDiamond. There is also offline software you can download to compress the images. Here is a nice comparison of 20 image compressing tools.
If you are using WordPress, use the reSmush.it plugin to reduce file sizes automatically. According to tests, reSmush.it allows you to compress better than most other plugins for WordPress.
For Shopify stores, an app known as Crush.pics could help with image optimization. Another great app for image optimization is Bulk Image Edit (BLE).
6. HTML, JS, CSS Minification
Minification is the process of reducing the size of HTML, JavaScript and CSS files in order to reduce overall web page size. This is generally achieved by removing unnecessary code from these files — white space, commented code, etc.
The aim is to make the code lean, noticeably clumsy, and pretty fast. Also, the files are combined to reduce the number of server requests.
Within WordPress, this can be achieved using one of the page speed plugins like W3TC mentioned above. You could also use a plugin called Autoptimize to minify your code. Another great plugin is Fast Velocity Minify.
For Shopify stores, Hyperspeed is a plugin that provides CSS and JS minification and image compression. Snappert Minifier is another plugin, but it has no reviews on the Shopify App Store to verify its effectiveness.
7. Use a CDN
Your website is usually served from a single location, which is the location of your VPS or dedicated server. A user physically located at a distance from this server will get your site at a slower speed than a person close to the server. With all the optimizations you have done, this delay cannot be avoided due to this obvious reason. This is where a CDN comes into picture.
CDN stands for “content delivery network”, which is a collection of servers spread across the world where your site’s copies are maintained so that it is made available to local users even if your main server goes down. The bandwidth is spread across these servers to reduce the load on your main server.
CDN can also come to your rescue if your site is under attack and the server is thronged by a deluge of requests. At this time, the CDN acts as a load balancer and protects your site from downtimes.
Most of you have already experienced CDNs without realizing it. When you are reading a news article from BBC or The Times, you most probably are accessing it from a CDN. Most of the high-traffic professional blogs are serving their content and images from a CDN. Most ecommerce sites also are taking advantage of CDNs to deliver their static content fast.
Here are some of the top-rated CDNs you could use.
Cloudflare even offers a free version of their CDN that you can use to speed up your website.
8. Embrace AMP for mobile sites
AMP (formerly Accelerated Mobile Pages) is an open-source HTML framework developed originally by Google to optimize websites for faster viewing on mobile devices. After four years since inception, AMP is now more important than ever. It has surpassed its competition, Facebook Instant Articles.
AMP could help you serve your website much faster on mobile devices. You could see whether a website is using AMP or not by looking at search results on a mobile device. The little lightning flash icon indicates AMP.
AMP could bring about a lot of improvement to your site’s performance. See below the result in Google PageSpeed Insights.
For your WordPress blog, use the AMP for WP plugin to enable AMP. Most of the setup is self-explanatory here. For Shopify stores, AMP by Shop Sherif is a good app that you could use.
Conclusion
While the whole world is going through Covid-19 crisis, stay safe indoors and plan towards an improved website by taking advantage of the above suggestions.
Share your website’s speed stats through the comments below.