Think about it this way: you want to go to a restaurant and try their famous pasta, but their service is super slow, and on top of it, the Spaghetti Aglio olio e peperoncino isn’t that good either. Wouldn’t this disappoint you?

It’s the same way with websites. Someone lands on your page, and that dreaded loading icon stays there for more than three seconds. If users have a hard time finding what they came for in the first place or the provided info isn’t satisfying enough, there’s a high chance users will never come back to your website again.

That’s why Google prioritizes results that load fast and provide useful content for the visitors. Apart from SEO optimization, Google has recently introduced new metrics to measure the website’s loading speed, interactivity, and visual stability. They are collectively called Core Web Vitals.

You might have heard about it since it’s been all over the world wide web, but practice makes perfect, right? So let’s have a recap on what these metrics are and what steps we took at UX Studio to optimize our own product – online portfolio builder UX Folio. 

Let’s investigate each component and try to understand what LCP, FID, and CLS stand for.

LCP (Largest Contentful Paint)

LCP is a user experience metric that measures the web page loading performance. It measures how long it takes for the web page to load its main elements. Users don’t like looking at a white screen for too long, and Google takes this into account now. In order to rank higher, your page should load its most important content within 2.5 seconds.

FID (First Input Delay)

FID is a user experience metric that measures the responsiveness of a page. In other words, it measures the time between a user’s first interaction – the amount of time it takes for a page to respond once you click on a button. If clicking a button takes more time to load the next element, it can be really frustrating for a user. So the First Input Delay should be less than 100ms.

CLS (Cumulative Layout Shift)

CLS is a user-centric metric that measures visual stability and quantifies unexpected layout shifts. For example, if the page contains an unoptimized large image in the middle of a paragraph, which takes longer to load, once it appears, it can shift other elements and leave the users confused. They will be annoyed because they lose focus and have to search for the content they were consuming.

What we did to speed up our UX folio website

If you are wondering how to improve your website’s loading speed, here are some steps you can take to achieve a Google Page Speed score of 90. 

According to Google, speed plays a vital role in website ranking. It was announced about a year ago: users will be notified if the page they are trying to access on their mobile has a poor loading speed. This gives a big risk of ranking very low and losing visitors.

Although we were aware of it for some time, we dreaded the day we would have to start working on optimizing the product site because, let’s face it, optimizing a website is very time-consuming! You don’t know where to start, and you bump into lots of pain points. You solve one issue, and another one pops up. To put it simply, it really takes a lot of time.

Note, if you get an email from Google informing that your page does not perform well, you will need to look at what causes this issue and weights the page down. 

In order to save you time, here are the steps we took to rank higher in the search results and fit the new metrics requirements.

1. Check your website’s loading speed using Google PageSpeed Insights

We tested our page performance with the help of PageSpeed Insights. We added our URL, and PSI did the rest. Besides providing a score that summarizes the page’s performance, PSI creates a report, and what’s even more exciting, it also provides suggestions on what and how could be improved.

Our first score was 30. It is not the most expected number for a UX company. We were surprised too, but we were happy to see the opportunities provided by the tool to begin our optimization. The tool suggested the following: text compression, properly sized images, removal of a video, and some unused CSS.

And to showcase the importance of these “small adjustments”: just by making these changes, we managed to score 68 one week later!

How can you speed up your website’s loading time?

Make sure there are no elements that can slow down the loading time of your website, like in our case, a soundless product demo YouTube video, which started playing in a loop as soon as the user scrolled to a specific section.

We were aware of the issue but had no idea what to do about it at first. So how to speed up a website if that video is a must-have, but you don’t want the user to click to play it?

Bálint, our developer, switched the embedded YouTube video player to the native HTML5 video player. Easy peasy lemon squeezy, right? Just by making this change, we gained a +30 score! 

How to speed up your website if you don’t have a technical background?

There are some minimal changes you could still make that can already make a big difference, like compressing images or using new formats such as JPEG200 or WebP that can significantly lower the size of the file but be aware of the fact that not all browsers support these formats yet.

There are several image optimization tools that you can use to reduce the size of images like Adobe Photoshop, Image Compressor, and so on. If your website is created in WordPress, reduce their size further by using plugins like Imagify Image Optimizer, Optimole, just to mention a few options.

Replacing GIFs with videos could be another option to continue with. Another option would be using minified JPEG or PNG.

In order to solve other issues, you should contact someone who has knowledge in this and can dig deeper to improve the performance of the website.

2. WordPress vs. Custom code

If your website was built in WordPress you can take advantage of a big variety of plugins that could speed up your website like Autoptimize for example. It basically aggregates, minifies, and caches scripts and styles. 
On a custom-built CMS on the other hand, well you won’t be able to use such plugins so slowly approach your developer, hug them if they let you because they will have a lot of work to do.

3. Use the coverage report 

It is easy to accumulate dead code over time. We reloaded the UX Folio page, and Chrome generated this breakdown of the CSS and JS files that were included in the page. 

How to make your website load faster? Having this coverage tool in Chrome is a great way to get a quick overview of how much extra code you’re shipping, and which files to optimize.The bars on the right represent the size of each file, the unused code is shown in red while the code that ran is shown in turquoise.

In our case several URLs caught the eye, the soundless product demo YouTube video API appeared amongst the first. There was a close competition between the Facebook pixel analytics tool and the behavior analytics and user feedback tool. But the chatbot won the “Unused Bytes” contest at the end.

We realized that we were not measuring any user behavior at that time, so we didn’t need to run Hotjar.  Since we use Google Tag Manager for embedding these tools we could easily just pause it

We then found that we are currently not using Facebook advertisement, so we paused Facebook pixel which increased our score with at least 10-15 points! 

We also found that we were not using Facebook advertisement then, so we paused Facebook pixel which increased our score with at least 10-15 points!

What happens if you’re in the midst of running a campaign?

Google will measure a 30-day average to decide whether your page meets the expectations of the new metric system.

Also, removing unused code can speed up your website and save cellular data for your mobile users.

4. Have a reliable hosting provider

If you’ve gone through all the steps from the list and your page still scores under 90 and you probably don’t opt for a plain HTML text-only page, there’s one other thing that can be checked. The hosting provider.

Having a good hosting service can help your website load faster. It’s a waste of money and time if it takes ages for your website to load. You’ll end up losing users who also wasted their time waiting, had a bad experience, and ended up on a competitor’s site. To improve the LCP, you have to reduce server response time.

Moreover, you might want to consider changing your hosting plan. If you have a shared hosting service, your page load speed might decrease because the server resources are limited. The bandwidth, the processor utilization, and the number of processes running simultaneously are just a few examples of what can cause a server response delay.

So, upgrading to a different plan might do the trick but make sure you talk to someone from their support team beforehand to see if the upgrade would match your requirements.

Hosting companies like NameHero have hosting plans tailored to you and your needs, and that’s clear from their plans page. Always opt for a host that scales with your company.

5. Test modifications before updating them on your website

Make sure to test your modifications before updating them on your production website.

It is important to test the changes since you might stumble upon multiple bugs that should not appear on your live website.

Developers often use a local test environment that replicates the live website. It is used to test changes made to the website before it is pushed to the live server. You might also want to test a new WordPress version, a new feature installation, or a change to a site’s layout or design.

We hope these steps will help you improve your page load speed and the overall website’s technical performance. 

Have you already optimize your website? Did it work well? What other tools or plugins would you recommend?

Searching for the right UX agency?

UX studio works with rising startups and established tech giants worldwide. 

Should you want to improve the design and performance of your digital product, message us to book a consultation with us. We will walk you through our design processes and suggest the next steps! 

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design, etc.