Is there anything more frustrating in life than a slow-loading website?
This cardinal sin is one of the ultimate no-nos in website development. If you’re looking to swiftly take visitors from 0 to annoyed and ready to jump ship in just a few short seconds, slow site speed is certainly the way to do it.
Besides, Google takes page loading time very much to heart; if a website is too slow to load, the search engine may refuse to index it at all. The bad news is that even after you have fixed all those speed issues, website ranking might never restore no matter how much you invest in SEO.
Website speed optimisation highly impacts three critical aspects:
- Conversion. The faster the page loads, the higher the conversion rate.
- Visibility. Website loading time affects how easily users can find your site. Google considers site speed as one of the main ranking factors.
- Usability. Page speed, loading time and responsiveness to user requests directly affect user experience and, eventually, customer loyalty.
In this article, we will cover our approach to website speed optimisation and explain how you can ensure great performance at the earliest stages of website development.
What is page speed exactly?
Page speed is used to measure how fast your website loads and it’s one of the key user experience metrics that may affect your conversions.
According to Google recommendations, page load speed should be no less than 3 seconds. That’s not like the golden rule, but a great reference to keep in mind.
If your website takes more than 3 seconds to load, we advise looking into the underlying reasons that could be causing it.
Pagespeed Insights today is the most popular tool to access website performance and the following stats on global search engine use pretty much prove its relevance.
Pingdom is an excellent free service that allows accessing website performance from servers located in different countries. This is especially useful if your website is hosted in one country and your clients or users are in another country. In this case, the page speed test should be done in the client’s region. Pingdom provides constant monitoring for various metrics of a website and notifies if any issues occur.
In addition to website speed, it’s crucial to check its availability, too.
If there is an error, the website may not load at all, which may lead to financial and reputational losses that might be bigger than losses from slow performance.
Google Chrome has a built-in tool called Lighthouse which you can use to measure website speed. The only thing to note here is that speed testing happens locally and the results may differ from those on the server. At JustCoded, we verify speed optimisation on a staging server first and then test it one more time on the live server.
Speed performance and design
It may sound odd, but we think that designers should share the responsibility for a fast loading website and make informed design choices.
Together with developers, they can review the design comps and get an assessment on potential performance problems before the whole thing goes into development. It’s way easier (and cheaper!) to spot those things early and sacrifice some design stuff before you got all pages and screen resolutions designed.
- Use visual content and animation wisely, especially on the above the fold portion. A browser usually parses a page from top to bottom, and the first screen is what users should see as fast as possible.
- Limit the variety of font families. Non-standard fonts are loaded via scripts, and each new font may add up to 400 Kb of weight to the page. The fewer the fonts, the better UX. Easy!
- Optimise those images. Before you handle any graphic content to a developer or website admin, it’s your responsibility to reduce the size and ensure decent quality at the same time.
These little things make a huge difference and save money in the long run.
How to speed up a website? 8 best tips you need to know
1. Media content optimisation
- Consider multiple image formats for different browsers.
Different browsers render certain image formats better and faster. Make sure to feed proper formats and remember about some older browsers which do not support modern formats like WebP. For our WordPress projects, we use a custom-built plugin that automatically converts an image into several specified formats.
- Use a responsive image approach.
This means that we display images of the proper size and quality on different screen resolutions. It’s one of the main website speed optimisation techniques to increase page speed and improve conversion.
We have created a WordPress plugin that automatically creates a set of image sizes, feel free to install and use it.
- Optimise video and audio content.
Ideally, this content type should be avoided, but if it’s 100% necessary, use third-party services like YouTube or Vimeo; they optimise their videos for various devices and poor network connection.
- Load graphics asynchronously as much as possible.
The content loads gradually when it becomes visible as we scroll down the page, and this is where lazy loading will help you. We use it for our projects and immediately see page speed improvements when it’s on. Besides, it’s a good idea to use pre-loaders that inform a user that there is some content and it’s being loaded.
2. Limit the use of plugins
This one is important, though not always doable.
Google tends to lower website rank if there are too many plugins. A good workaround here is loading scripts asynchronously; it reduces the page loading time which is one of the key factors for Google ranking.
A big number of JS and CSS files, as well as their size, leads to more HTTP-requests which slow down website performance. It’s recommended to merge JS and CSS into one file and minimise it.
If you enable an HTTP 2 protocol on the server, it will give you an essential advantage as it doesn’t limit the number of open sessions.
We develop all WordPress website using our own WordPress Starter Kit that allows optimising CSS and JS most efficiently. There is also a great Autoptimize plugin for even better JS and CSS minification which you can try.
As for the fonts, guess what? Optimise them too!
Consider using services like Google Fonts that give you the files in the most optimised format via API. For example, if a user is using Chrome, they will be served a font in WOFF2 format; for Edge – in WOFF.
4. Add backend and frontend caching
In simple terms, caching is the process of saving the current version of a site on the server and feeds it until there are any changes made. There is no need to render a page all over again every time it’s requested; the number of requests to the server gets reduced, the speed grows. Nice!
You can optimise website speed both back-end and front-end wise.
Service Worker is an ideal tool for front-end caching. It will work great for websites of any size because caching is happening on the client’s side, in the browser. Service Worker is widely used for PWAs however be careful or you might cache the Service Worker itself, and the users will never see the updates on your website unless they turn Service Worker in the browser.
5. Use a Content Delivery Network (CDN)
CDN is a set of servers located in various parts of the world. They serve the content from the server that’s closest to the user reducing the load and increasing website speed.
For instance, if your clients and users live far from each other, it makes sense to use CDN. Normally, hosting providers include it in their standard packages, so make sure to inquire about its price and availability before you publish your site on the web.
CDN may be quite expensive and easily cost a few hundreds of dollars monthly. Knowing this, you may want to reconsider your strategy and first implement the website performance optimisation techniques that we described in the previous sections.
6. Choose an appropriate hosting plan
Keep in mind the load before you make a decision about hosting, otherwise, you risk too much or too little for a stalling server.
Certain hosting providers offer packages for WordPress with a pre-configured server which is already optimised for this CMS.
7. Enable Gzip compression
It’s an efficient method that improves server response by reducing file size and minimising the number of HTTP requests.
Gzip compresses the files and sends them to the browser where they get unpacked and presented to the user. This method works well with all of the files on your website and you can enable it by adding a few lines of code using a Gzip utility.
8. Use fewer redirects
Redirects are the source of extra HTTP requests that impact your website performance.
Ideally, you should completely avoid them, however, if you are redesigning your current website, you will have to configure redirects from old pages to new pages. This way you keep all existing pages indexed by Google and your users won’t get lost on 404 pages (which is always a disturbing experience, no matter how beautiful or funny they are).
How to optimise website speed wisely?
Before you start the development, identify the things that would potentially cause issues for page loading.
We recommend that you start your optimisation with the first four recommendations from the list above:
- optimise media content;
- limit the use of plugins;
- turn on backend and frontend caching.
They are likely to give you the highest speed gain and are especially efficient for portfolios, corporate websites or online stores with a lot of images and third-party modules.
Besides, they are easier and cheaper to implement than hard-core solutions like a super-fast server or CDN.
How we optimise website performance at JustCoded
Early in 2020, we launched a redesigned and improved version of our company website.
This is what Google Page Speed looked like before we started performance optimisation.
Let’s see what we did to improve this score.
1. Support for multiple image formats and lazy loading
Google tends to lower the score if there are too many plugins (Google Tag Manager included), no support for multiple image formats and no asynchronous image loading.
When we fixed those issues as much as possible, the result was way better:
However, it wasn’t good enough yet.
2. Module audit and asynchronous script loading
We noticed that Google significantly reduced the score for using chats and various tracking or analytics services. Our Google Tag Manager had a few modules for analytics that fired almost on all pages although we didn’t use those services anymore. After a thorough Google Tag Manager audit, we removed all irrelevant tags and scripts, which added a few seconds of speed.
Since we need these things anyway, we decided to load a contact form processor, a module for article rating, and blog subscription only on those pages where they are 100% required.
Besides, we now load our chat asynchronously, that is after a user has already scrolled down the first screen of a page.
In the footer section, we have a few widgets for Clutch and Goodfirms rating, as well as a membership badge of the European Crowdfunding Network. We load them only when a user has scrolled all the way down.
3. Asynchronous and lazy loading of all images
When a user has scrolled down to a section with an image, that’s when we will load the content. While it’s loading, we make sure to show a loading spinner informing the user that a plain grey rectangle that they see actually contains something.
Graphic optimisation added 30 points to our score, and we got 15 more after optimising analytics and chat loading.
As you can see, your site will work much faster with minimum adjustments like image optimisation and fewer third-party scripts.
Even though the ideal Google Page Speed score is 100, we understand that it’s almost impossible to achieve unless your website is a simple one-pager. We didn’t aim to make our website load in 1 second as we wanted to keep its unique look and feel. And yes, we do use a lot of images.
Today, our website loads in approximately 3-4 seconds which is quite good taking into account animations and a variety of unique style sections that allow creating more than 10-page templates.
You may have noticed that we only showed the mobile speed score in the screenshot above. Starting from March 2020, Google indexes all websites on a mobile-first basis, so we consider only mobile metrics.
A regular user would expect your website to load under 3 seconds. If you can’t make your website work that fast, you risk losing many users and a great deal of revenue.
We recommend following a simple and efficient approach that would lead to improving website performance:
- Check and evaluate your website success factors taking into account parameters like conversion, visibility and usability.
- Test the current speed of your website either with Pagespeed Insights or Pingdom and prioritise the pages and functionality that affects those three parameters most.
- Start website optimisation with changes that would bring immediate effect and focus on the pages that define your conversion success.
It’s highly important to plan the optimisation before development. Make sure to factor it in the project architecture and monitor that it’s followed throughout the development cycle, from start to finish. Otherwise, once the website is released, fixes and adjustments might take enormous time. But what’s more dangerous is that your search engine ranking can be lost and not restored after the optimisation is done.
Scared? Don’t be 🙂
Whilst there are quite a few website optimisation tips you can implement yourself, getting some help from those in the know will mean no stone is left unturned. Contact us today to find out how our developers can help.