Is there anything more frustrating in life than a slow-loading website? This cardinal sin is one of the ultimate no-no’s 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 Load 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 optimization 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 optimization and explain how you can ensure great performance at the earliest stages of website development.
What Is Page Load Speed Exactly?
Page Load 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 more 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.
Have a rather slow website? Something can be done for sure — let’s talk and discuss possible solutions.
Get In Touch
You can measure your website speed with tools like Google Page Speed Insights or Pingdom. Page Speed Insights today is the most popular tool to access website performance and the following stats on global search engines 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 load 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.
What else?
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. We verify speed optimization 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 of 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 get all the 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!
- Optimize 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 About Page Load Speed
1. Media content optimization
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 optimization techniques to increase page load speed and improve conversion.
Optimize 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 optimize their videos for various devices and poor network connections.
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 load speed improvements when it’s on. Besides, it’s a good idea to use preloads 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.
3. Minimize CSS and JavaScript, reduce the number of fonts
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 minimize 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 websites using our own WordPress Starter Kit that allows for optimizing 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? Optimize them too!
Consider using services like Google Fonts that give you the files in the most optimized 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 feeding 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, and the speed grows. Nice!
You can optimize website speed both back-end and front-end-wise.
For the back-end, you can use W3 Total Cache or W3 Super Cache plugins or configure caching in general settings in case you use a VPS server.
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 hundred dollars monthly. Knowing this, you may want to reconsider your strategy and first implement the website performance optimization techniques that we described in the previous sections.
6. Choose an appropriate hosting plan
Keep in mind the load before you decide on 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 that is already optimized for this CMS.
7. Enable Gzip compression
It’s an efficient method that improves server response by reducing file size and minimizing 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 Optimize Website Speed Wisely?
Before you start the development, identify the things that would potentially cause issues with page load speed We recommend that you start your optimization with the first four recommendations from the list above:
- optimize media content;
- limit the use of plugins;
- minimize the use of CSS and JavaScript, external fonts;
- 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.
Not nice.
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 a blog subscription only on those pages where they are 100% required.
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 contains something.
Graphic optimization added 30 points to our score, and we got 15 more after optimizing analytics and chat loading. As you can see, your site will work much faster with minimum adjustments like image optimization and fewer third-party scripts.
Even though the ideal Google Page Load 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 the creation of 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.
Conclusion
A regular user would expect your website to load in under 3 seconds. If you can’t make your website work that fasts, 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 Page speed Insights or Pingdom and prioritize the pages and functionality that affect those three parameters most.
- Start website optimization with changes that would bring immediate effect and focus on the pages that define your conversion success.
It’s highly important to plan the Page Load optimization before development. Make sure to factor it into 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 optimization is done.
Scared? Don’t be. Whilst there are quite a few website optimization 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.
