If you’re wondering how to increase website speed, then you’ve come to the right place! In this post, we will look at the importance of website speed and what you can do to improve it.
We have talked previously about ways to build a high-quality website that not only helps how to increase website speed but also your sites SEO.
The obvious answer is as fast as possible, but it’s never that simple, we want our websites to pop! Every image, CSS styling, plugin, chat window and integration create requests to the website host which slows webpages down more than you may think. Often the flashiest most stylish sites can be the slowest.
Research has confirmed again and again that your average consumer expects a webpage to load in 2 seconds, this is especially important in e-commerce with each second increasing page abandonment exponentially.
According to research done by Kinsta - A premium managed WordPress host, a reduction in page speeds has the following results on conversions.
This makes sense, most of us now do our shopping and browsing on our mobile devices, which often has worse connections than a desktop. In fact, an analysis of 5.2 million webpages done by backlinko.com found that the average webpage took 27.3 seconds to fully load, compared to 10.3 seconds on desktop.
Speed is becoming so important that Google’s ranking algorithm is weighing webpage speed higher and higher, with some SEO experts now advising that it could in the future turn into the single most important factor when ranking. This year Google is rolling out its mobile-first index - Mobile-first indexing means Google predominantly uses the mobile version of the content for indexing and ranking. Historically, the index primarily used the desktop version of a page's content when evaluating the relevance of a page to a user's query. This has the potential to create a major shakeup of how sites are ranked.
One key thing to remember about site speed is that when you use any search engine, they are looking at you as a customer, they want to provide the best experience for you as a user. Would you be a happy customer with a 27 second load time?
Before approaching the methods on how to increase website speed, you need to understand your existing scores. Understanding how to increase website speed through these tools is almost a helpful guide in itself! Although we can never know what exactly is happening in the search engine algorithms, they (and others) have given us some great tools which analyse sites and tell us exactly what we can do to get faster. One thing to note is they will often score quite differently to each other, with each one weighting factors important to them, we recommend using 2-3 to get a good view of where you are.
Google page speed insights. - https://developers.google.com/speed/pagespeed/insights/
Yslow from Yahoo - http://yslow.org/
Pingdom - https://tools.pingdom.com/
GTmetrix - https://gtmetrix.com/
Warning! Putting your own site into these tools can often be a humbling experience! But don’t get too stressed. The good news is there are loads of things you can do to improve your website speed, some are a little technical but others are pretty simple. In this post we will run through some easy changes you can make that will have an immediate effect.
Images can take up the majority of your websites download size.
To reduce the size of your site and ensure your visitors get the fastest experience, focus on ensuring the size of your image matches the size of the container it’s in, otherwise, you end up downloading the entire image and then having to resize it.
An easy way to do this is to use an image resizer, there are loads of free ones online that allow you to resize to exact dimensions.
The actual file format can be another huge factor in the final size of an image. Where many sites still use entirely jpg, png or gif, its worth looking into formats such as Google’s WebP and in instances where you have more of a shape/ illustration feel, using an SVG.
Google developed an image format WEBP (pronounced as “Weppy”) designed for web use.
WebP maintains the quality of the original image while greatly reducing the file size through using compression algorithms called ‘lossy’ and ‘lossless’.
GeeksforGeeks better explain the function of these algorithms:
“Lossy compression is the method which eliminates the data which is not noticeable. While Lossless Compression does not eliminate the data which is not noticeable. In Lossy compression, a file does not restore or rebuilt in its original form. While in Lossless Compression, a file can be restored in its original form.”
We have used several converters and plugins but achieve the best results from EWWW Image Optimizer
A CDN uses a collection of servers around the world to share websites static files, such as CSS, Javascript or even images.
When a new user visits your site, the static files will be delivered to them via the closest server to them in your CDN. It’s important to remember although the internet has connected the world it still requires physical infrastructure to move all that data, the data moves faster the closer you are to the nearest server.
A CDN ensures visitors have the fastest experience when loading your website. If you need help setting one up there are lots of providers online that can have you set up in minutes. (We have also used EWWW Image Optimizer to deliver our CDN and costs as little as $120 per year...)
If you have ever cleared your browsing history you may have seen the clearing cache option, but what is it?
Caching creates temporary storage of content like images and files directly to your local machine. This means that when re-visit the website, your device will load it from its own memory and not from some remote server.
This dramatically improves load times and webpage performance. It’s important to note that you set the limits of what you want your visitor to cache, so if you have a site that changes frequently with new content and offers, make sure you only cache the static parts.
Make sure that you find the best hosting package for you.
Where do you need your server to be (most likely the country where most of your visitors come from), how much RAM, disk space and bandwidth do you need?
Make sure your host is flexible, do you have busy periods like Christmas rushes? If so, a simple sharing host may not suffice, you may need VPN or dedicated server space.
Just as you can compress files on your PC with Win Zip you can compress your web content. Use things like GZIP compression to automatically compress HTML, CSS and JavaScript.
There are plugins and services you can use online that even remove unnecessary CSS code from your website.
If you are hosting a site on WordPress and others, it’s tempting to add as much cool functionality to your website as you possibly can. This is made even easier by the huge plugin libraries they have.
What’s important to remember is every plugin creates new requests to the server which slow down your performance. Even popular web services like Hubspot will slow website performance.
What’s more, search engines are punishing on plugins that are out of date. One of our portfolio companies Enjovia dropped 10 points on Googles speed rankings in a single week due to two outdated plugins. Make sure you keep them up to date!
A redirect is a set of instructions that send users from one place or file to another.
Without fail every redirect will slow your page and hurt your SEO.
Although there are often good reasons to redirect, these should be kept to a minimum. Don’t make the page or the user click more steps then they need to.
This is especially true on mobile. If each page is taking 27 seconds to fully load and you send them to 4-5 pages, this will doubtfully create a painful user experience, and they will rightfully click away onto your competitor’s website instead.
Minification is the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser.
For example, code comments and formatting, removing unused code, using shorter variable and function names, and so on.
It’s important to remember that the code we use in all software is written by human beings and we often don’t write in the cleanest and most efficient way.
Each line of code creates more load time, by minifying your CSS, HTML and Javascript you are reducing the total amount of code without sacrificing any performance.
Google recommends the following programmes to help:
To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
As you can see there are a few simple steps that you can take today in learning how to increase website speed.
Gain more website visitors, improve your SEO and get better conversion rates. You’ll be wondering why you haven’t begun this process sooner!