The speed of a website (also known as site speed) is one of the most important factors when it comes to user experience and search engine rankings. Nobody wants to interact with a slow website, and Goole knows it very well, hence it prioritises fast websites.
Of course, you don’t want your blog to lie in the pool of slow websites, so make sure to read this post to understand what factors affect site speed and what you can do to improve it. Some of the terminology used is a bit technical, so do not hesitate to ask any questions you may have in the comments.
Note that many of the tools I recommend below are for WordPress sites.
Disclosure: This post contains affiliate links. This means that if you click on a link marked with [AD] and proceed to make a purchase, we may earn a small commission at no extra cost to you.
What factors affect site speed?
There are many factors that affect the speed of your website. Usually, the most deterministic factor of site speed is how long the server takes to respond to the browser that made a request for your website.
Other factors that affect site speed are your blog’s elements, i.e. your theme, plugins, images. All these can be summarised as static files, as they don’t change based on input from users.
Server’s Response Time
When you are typing a URL in the address bar of the browser or when you click on a Google search result, you initiate a request to the server that stores your website. The server lies within your host and how quickly it responds with the necessary details depends on your hosting plans.
Typically, shared hosting plans have poor speeds, which tend to drop even further as the total number of website visitors at a given time increases. That said if you just started, then it will take some time for traffic to pick up so you can start with shared hosting and then upgrade if necessary.
Themes and Plugins
A theme can make a website slow if it is not lightweight and badly written on the back end. What makes a theme lightweight is the number of requests to the server until the final page loads. There is no way to know this when getting started unless someone mentions it in the comments or you read a third-party review. So my advice is to go with a theme that fits best to your site and then change to another theme, or upgrade to a premium one if required.
As I said in other blog posts each plugin adds a piece of code to your website. Popular plugins tend to have site speed in mind, but others may not. Now, I’m not saying that you shouldn’t have any plugins on your site, in contrast, there are some which I strongly recommend you have. (Find out which plugins I recommend having here). What I am saying is that you should be aware, in the case that you notice your site speed dropping after activating a plugin, that that plugin may not be the best for you.
Media Files and Images
Images are another component that can hugely slow down your website, especially if you have a lot of them on each page. Images tend to take up a lot of time to load if they are not properly sized. Usually when you take photos (either on a phone or camera), by default these photos use the optimal or almost optimal settings. This results in very large files. The larger number of pixels the larger the file is. Luckily, there are ways to reduce the size of your images after you took them, using image optimisation. Read more about it below.
How to measure site speed?
There are many tools that allow you to measure your site speed. Two of the most popular ones that are free are Google’s PageSpeed Insights and GTmetrix. There, you need to enter your website’s URL and check your speed. You can start by entering your homepage, but if you want to get insights for a specific page you can amend the URL accordingly.
There are two things to note here. The first one is that if you use the GTmetrix tool, you the location of the test visit. You may wonder how location affects the speed of your website. The answer is simple: it takes longer for the browser to connect to a server that is physically further away. For example, if you are in Europe and your site’s servers are in Asia, then it will take longer than if your site was stored in Europe.
This is something related to your host, you shouldn’t start worrying about, as you have absolutely no control over where their servers are located, nor where your website visitors are coming from (although you may have an idea based on analytics and targeting). Later, I will get into details on how to work on the location factor, but what is worth noting here is that if you change the location of the test server (need to create an account to do that using GTmetrix) the speed may differ.
Mobile vs Desktop Site Speed
The second thing to note if you are using the PageSpeed Insight tool is that by default you will see the result of your site speed on mobile (you can click on the Desktop button to see the respective results for Desktop). This is because Google ranks most websites using mobile-first indexing, i.e. the speed of your site on mobile.
As you can also notice, your mobile speed may be much worse than the desktop one. There are many reasons that this may be happening, and one of them is images as they require different optimal settings compared to desktop. More on how to improve your mobile site speed in the next section.
How to improve site speed?
There are different ways to improve your site speed. The first one is to stop using shared hosting and upgrade to a better hosting plan. Understandably this is not an option for everyone, so you may want to focus on other elements of your blog that you can improve without spending much. The reports that the site speed measuring tools give you are good indications of what you need to change.
Below I will explain in more detail the following ways to improve your site speed:
- Optimise the images on your blog
- Use browser and CDN caching
- Use Accelerated Mobile Pages (AMP)
All the tools that focus on a single site speed optimisation element I will recommend below have a free and premium version. If you are just getting starting, then the free version should suffice, however, if you already have a lot of traffic I suggest getting the premium version either for the tool(s) you want to get the most results or for a single tool that takes care of everything regarding site speed. Read below for more details.
Note: You should only have only one plugin activated that does each type of optimisation. Having multiple plugins doing the same thing can cause conflicts and malfunctions to your website.
Image Optimisation
There are different ways you can optimise images and photos, including reducing their sizes and serving adapting images. Lazy loading and next-gen image formats are other ways to improve your site speed when considering images.
Image Compression
Compressing an image reduces its size without making viewable alterations to the photo. You may notice some subtle changes, depending on how large your photo used to be, but in general, someone who is looking at your photo for a split of a second will not notice anything.
You can compress a photo either before uploading it to WordPress using some software or after using a plugin. A good image compression plugin is Short Pixel Image Optimiser [AD].
There are different algorithms that can be used to compress an image. The most popular of them are lossless and lossy and their differences lie in the size and the quality of the final result. In general, lossless compression results in better quality than lossy but creates a larger file. Usually, your image compression software will allow you to choose which form of compression you want, so my advice is to try both and select the one that works best for you.
Another way to reduce the size of the image is to manually reduce its dimensions. Many suggest setting the width of the image to the width of your screen, others to 1200px, others to 700px, etc. But what happens when someone views your photo from a large desktop screen? Or from their phone which has a much smaller screen? In the large screen case, the image may show pixelated, but in the phone scenario even though the image would look good, it would still be too large for mobile, thus generating a warning from your site speed measuring tool.
Adaptive Images
What you can do in this case, is to use different images based on the device used. This can be done by uploading different copies of your images which are optimised for popular screen dimensions, Then you will select which image you will show to your visitors based on the device they are using. The manual way of doing that can be quite cumbersome and time-consuming. So, what you can do instead is to use an image optimisation plugin that does the work for you.
The image optimisation plugins that have the best results are those that combine image compression with serving adaptive images. Two examples of such plugins are Optimole and ShortPixel Adaptive Images [AD]. The way that these plugins work is that they store your photos on their CDNs (read below to see what a CDN is) and then they do real-time optimisation by returning the most optimal compressed version of your image to your blog visitors based on the device they are using.
Lazy Loading
Another thing relating to your photos and site speed is lazy loading. Lazy loading allows the whole content of the page to be loaded, excluding hidden images. This is useful, as it prevents photos that are towards the bottom of the page, ie. those that are hidden to the user when a page initially comes up, from loading, and hence delivering a first view of the page faster. Then as the user, scrolls down the page the images load, delivering the expected result. All plugins I recommend above offer lazy loading.
Note: Lazy Loading applies to not just blog post images, but also to ads and other images that may appear on a page (e.g. display ads, profile photos of commenters and Instagram profile previews). Unfortunately, as these images are not stored on your website, but are rather accessed from other parts of the web, are more difficult to lazy load. So, what you can do instead is to check whether your advertisement provider offers any options for optimising their ads. For comments, you can download a plugin that lazy loads comments, such as Lazy Load for Comments.
Next-Gen Images
When using Google’s Page Insights Speed tool, you may see a warning that your photos are not served in a next-gen format. Next-gen is another image file format denoted as WebP, similar to JPEG and PNG. This format uses a better image compression algorithm compared to the traditional image formats and allows images to load faster. However, as this is not yet the norm, you will need to do the conversion using a tool. The ShortPixel plugin from above allows you to do this for free.
Caching
Caching is the form of creating temporary copies of your website and storing them in a local cache so that they can be accessed quickly. There are two types of caching which you can set up to improve your site speed: browser caching and CDN caching.
Browser Caching
With browser caching, when someone visits your website, a copy of your site is stored in their browser. This copy will be valid for a certain amount of time, known as TTL (Time To Leave), and after that time passes a copy will be created again. These copies as stored locally, hence it will require less time to load a page the next time a user will visit the website, as the browser will hold a copy of what to display.
To implement browser caching on your blog you need to install a caching plugin, like WP Fastest Cache, W3 Total Cache or Autoptimise. These plugins take care and of other optimisations on issues flagged by the site speed measuring tools, such as minifying your HTML and CSS files and enabling Gzip compression. You don’t necessarily need to understand exactly how they work, as it can be quite technical, but in general, these changes make your website load faster.
CDN Caching
With CDN caching, a local copy of your website is stored in various servers around the globe. CDN stands for Content Delivery Network and it consists of numerous servers around the globe which store copies of your website content so that they can deliver it quickly to nearby users. CDN is more effective than your origin server (i.e. the server that your host is using to store your website), as they can be physically located closer to your website visitors.
Above, I mentioned using a CDN for your images, however, a CDN can be used for storing other elements of your blog too. You can do this by signing up for a CDN service, either through your host or through a third party like Cloudflare. Cloudflare has both free and paid services and allows you to deliver your website content using their global CDN. Your caching plugin may also offer a CDN add-on option for a monthly/yearly fee.
Note: If you will be using both an image optimisation plugin with CDN capabilities and another CDN provider, make sure to replace the default CDN details in the image optimisation plugin with your own.
Accelerated Mobile Pages
Accelerated Mobile Pages, simply known as AMP allow your content to load faster for mobile users who are on slow networks. This is done, by creating an AMP copy of your website which will be shown on mobile users instead of your original. Unlike the other optimisation methods I shared above, AMP will not work the same for everyone, as it needs a bit of technical work to achieve optimal results.
The benefit of using AMP is to speed up your site speed on mobile which can help you with your search engine rankings.
The easiest way to get started is to download an AMP plugin. There are two such plugins for WordPress AMP and AMP for WP. What both plugins do is helping you create your AMP copy of your website. The AMP plugin will allow you to use your existing theme if it supports AMP, while the AMP for WP will help you redesign your mobile theme using a compatible theme.
The only difference between the two, other than the obvious appearance difference that you will have if your theme is not AMP compatible, is the use of third-party plugins. Similarly to themes, not all of them are compatible with AMP use, and hence your blog may not work the same. Furthermore, you will need to set up again your analytics and any display ads you may have, for your AMP version of your website, and unfortunately, the procedure is not straightforward.
Overall, it requires a lot of effort and you may need help from a developer to create an exact AMP copy of your website. Due to this, I suggest first trying to improve your mobile site speed using the other methods above, before experimenting with AMP pages.
Conclusion
That was your quick introduction to your blog’s site speed, covering the factors that affect the speed of your blog, how to measure it and ways to improve it. Certainly, there is a lot more going on behind each point I shared, but hopefully, this short overview will guide you to the necessary resources to get started on improving your website speed.
If you have any more suggestions on how to improve your site speed or want to recommend any tools you use and love (no affiliate links), head to the comments below.
Save this post for later!
