According to Kissmetrics, 47% of users expect a webpage to load in 2 seconds or less, and Google’s research tells us that 53% of visitors abandon a mobile site if it takes more than 3 seconds to load. With that in mind, and the Google Core Web Vitals update rolling out, it is crucial that your site loads fast.
But how do you optimize your website speed? And how do you know you’ve achieved a good speed?
In a recent webinar, we spoke to Nathan Amery, Head of Digital Marketing at Jewellerybox, as he explained how the Jewellerybox eCommerce website became the fastest website within the UK fashion sector. Watch the webinar on-demand and keep reading to discover some key insights from the event.
How to optimize website speed
Starting with the LCP
The first element of your page you will want to speed up is the parts of your page that your customers see first. The most important Core Web Vitals metric to take into account here is LCP (Largest Contentful Paint). This is about how quickly you can load the biggest page element that your users see first. The goal is to start loading it before everything else and reduce its size as much as possible.
To find out what your LCP is, open your website on Chrome or Edge and hit F12 on your keyboard to go into developer mode. Next, go into the Performance Tab, refresh your page and find the ‘LCP’ text amongst all the complex looking graphs. Hover over it, and you’ll see your LCP element highlighted on your page.
Some tips regarding the LCP are:
- Focus on your homepage images first
- Compress them using a service like TinyPNG
- Wherever possible, serve images at the size your users view them
- Ensure if you load a banner which mixes text and colored backgrounds, you create it with HTML & CSS – and not as an image
- If you are using a third party tool – such as Fresh Relevance – load the third-party’s JavaScript (JS) first
- If the LCP element requires specific fonts to finish loading, get them loaded early
- Break out the CSS necessary for your LCP element to load and take it out of your CSS file. Instead, load it directly in <style></style> so it loads before the rest of your CSS.
JavaScript
Originally, JS was used to create interactive elements on a page. Nowadays, it is used to display a page (such as when you use jQuery). Keep in mind that every third-party plugin has its own JS snippet to add.
If you don’t know what JS elements you’re currently running on your page, hit F12 on your keyboard whilst in either the Chrome or Edge browser, go to the ‘network’ tab, then filter for JS. Once you’ve done that, refresh the page.
JS can significantly slow down your site if you keep old plug-ins that you don’t use anymore. Ask yourself:
- Is it for measurement? Do I use that data?
- Is it displaying something? Can I achieve the same thing with CSS/HTML?
- Does it need to be displayed on all pages?
- Is it more complex than necessary?
- Is it benefitting my users?
Remember, though, JS isn’t all bad. There are two behaviors of the code when it comes to loading on a page. These include:
- When the page is loading and the browser comes across a piece of JS, it will pause loading the rest of the page in order to fetch and download the JS content, slowing the rest of the page down. This is its default behavior.
- When you use the async tag, the browser will hit the JS and go to download it, whilst still rendering the rest of the page in the background. It will then wait until the full page has loaded before running the JS.
The first behavior should be used if you need JS to display anything on your page immediately, whilst the second behavior is more useful when using, for example, a social sharing button or something else non-vital for customers to see.
Make sure you talk to your developers when installing a new plug-in to make sure it doesn’t sacrifice too much speed.
Optimizing with Fresh Relevance
Here are some of the key ways Fresh Relevance works to minimize the effect that personalization can have on site speed:
- Our content and scripts load asynchronously and are appropriately cached, so as not to slow down the page load time.
- The script is hosted on a global CDN to reduce the time to serve and ensure the site won’t have an additional external dependency.
- We configure DNS prefetching for all clients, speeding up the time it takes your site to load.
- We provide the option to deploy personalization server-side as well as client-side. While client-side deployment has its advantages such as ease of implementation, server-side allows you to implement personalization with no impact on performance. Server-side personalization also makes it easy to comply with the Google Page Experience update as all changes are made on the server, before it reaches the browser.
Jewellerybox has also taken additional steps to speed up their site:
The company has added caching for non-personalized content, such as the bestseller product recommendations, meaning it didn’t have to load from Fresh Relevance each time.
Additionally, personalized content is cached per user. If it were cached for everybody, everyone would see the same content, but by caching it per user, Jewellerybox can show personalized content based on the users’ previous browsing and purchase history.
Learn more about the impact of personalization on SEO.
3 quick win tips
Nathan shared three easy tips you may be able to implement very quickly.
Tip 1: Load jQuery from a CDN like Cloudflare instead of Google if you can, as loading from different domains takes longer. You can try the same with Google fonts.
Tip 2: Previously, EV SSLs were used for their security benefit and the visual clue in browsers to show the website is safe. When you had an EV SSL, the left hand side of your website’s URL would turn green with a lock symbol.
However, EV SSLs are no longer more useful than any other SSL, because it is no longer any more secure and browsers don’t show that visual clue anymore. Not only that, swapping it to a regular SSL should increase your site speed by up to one second.
Not sure what SSL you use? You can find out here and look for extended validation “yes” or “no”. If it’s a “yes”, switch your SSL.
Tip 3: Lazy loading images are images that don’t initially load when a user opens a page. Instead, they load when the user scrolls down on the page to where the image is. Nowadays, this can be used by most browsers via HTML. Below is an image of the lazy-loading tag to add:
Remember to only use this for images that your users can’t initially see when loading the page, and that the Safari browser will not recognize this command. It won’t break the page, but users using Safari won’t get the same benefit as those using Edge, Chrome or Firefox.
Fortunately, it is recognized in Google page speed scores, and it works with iFrames as well. This means that some video embeds work with the tag as well.
Testing
When you open your site on your browser at home or in your office, it’s likely your website loads very quickly. But your users could live in a more rural area with barely any wifi or data available. So how do you measure how fast your site is?
Google tests page speeds with bad connections. Their tests are based on a five-year-old smartphone working on 3G (which works out to be about 2% of the speed on a modern 4G connection with good signal).
Fortunately, you don’t need an old phone with a 3G connection to test your page speed; you can emulate it on your Chrome or Edge browser. This is done by pressing the F12 key on your keyboard, and then going into the performance tab. There, you can select ‘Fast 3G’ for the network setting and ‘4x CPU slowdown’ for the CPU setting.
As everything is slowed down now, it will show you the order in which the content on your page loads as well. This means you can check if your LCP and lazy-loading settings are correct, or if anything needs adjusting.
Final thoughts
Remember to keep auditing your website and making sure you can’t find any unnecessary JS, CSS or anything else that is slowing your site down. Remember that whenever you add something, such as a new plug-in, it is important to keep site speed in mind and to continue talking to your developers.
For detailed information you can use to speed up your website and reduce bounce rates, download our checklist: How to audit your page speed.
