Consider Design as part of your Speed Optimisation

Consider Design For Speed Optimisation

Core Web Vital signals have been announced in November 2020 as ranking factors by Google (See Google’s official announcement below). A gradual rollout will begin in mid-June 2021.

These signals measure how users perceive their web page interaction.

In short, make sure your website is loading fast and is Lighthouse friendly!

What weight will be given to these highlighted factors below? Do not be afraid, it is an addition/adjustment of 3 factors out of 200+.

Core Web Vital Signals 2

Over the past 3 years, a growing interest in speed optimisation has flooded the web with:

  • Tools & solutions for browser cache, server cache, image & database optimisation,
  • Social Groups and articles about how to optimise website speed performance,
  • Considerable increase in the use of performance measurement tools such as GTMetrix, PageSpeed Insights or Lighthouse.

There is no doubt anymore. If your website is not mobile friendly, secured and fast, it has less chances to rank high in the SERPs.

If you haven’t done all the necessary technical changes in the hidden part of the Iceberg yet, it is time to invest in it!

  • Get a good hosting solution and an appropriate data center location
  • Set it up properly
  • Use a CDN if your audience is not local
  • Add and set up an appropriate cache
  • Optimise your images
  • Minimise, Combine, Defer, Preload files and scripts

Phew. You have already set all of those details with the help of your developer but your website is still not speed friendly?
You also tried to divide the number of plugins by 2, removed the Chat box that looks cool but isn’t that useful in the end, removed Hotjar and other speed killer tools.

Now it is a little better, but you are still under the 50s Score ranges out of 100. What else can be done?

Maybe it is time to re-think the design

Disclaimer: your goal should not be to chase a score but enhance the real loading time of your pages. Search for “Page load time” extension in your favourite browser and install it. “Page load time” by Alexander Vykhodtsev for example for Chrome or Firefox.

To cut a long story short, here is a study case that may help you reach the green scores. We have worked for a client who owns Fisk, an Online Seafood Delivery Shop in Singapore.

Here is a screenshot of its previous homepage.

Old Fisk Homepage Desktop
Old Fisk Homepage Mobile

With its initial web.dev report.

Capture Web Dev 1

Web.dev report after speed optimisation.

Capture Web Dev 2

After speed optimisation, we were still stuck within the 50+ range for Performance. So we analysed the Performance report details and found out the homepage sliders (x3) might be the ones slowing down the page.

We also had serious doubts about the value & conversion rates of sliders which, contrary to common beliefs, have quite a few negative points:

  • The human eye reacts to movement (and will miss the important stuff).
  • Too many messages equals no message.
  • The user needs to be in control.
  • Many A/B testing have proven sliders don’t convert well.

Find out more about why you shouldn’t use sliders.

As a result, we decided to remove the sliders and re-design the homepage.
The goal here, was to keep everything Above the Fold as light as possible in mobile. Above the Fold is a term inspired by the newspapers placed on newsstands – Headlines and lead stories that appeared above the fold had to be the most visible. It is the same here, Lighthouse is inspired by the same technique and will take “Above the Fold” measurements very seriously – especially on mobile!

All tests are run using a simulated mobile device, throttled to a fast 3G network & 4x CPU slowdown.

New Fisk Homepage Desktop
New Fisk Homepage Mobile 2

We could have improved the Performance score further but it would have made the site less stable and robust. And, as mentioned, the real objective was to improve loading time and not only chasing scores.

The homepage loads in less than 2.5 sec on desktop from Singapore on the first visit and less than 0.5 sec on second visit (browser cache).

We are happy with this and added a tag in their ranking track record. We are now waiting for Web Core Vitals deployment!

Here is the final web.dev report.

Web Dev Score After Design

Conclusion:

  • Sliders may be cool but are they very useful?
  • Design can impact your Lighhouse performance score.
  • Keep in mind to deliver the main message with no heavy element above the fold on mobile design.

Google’s announcement about Web Core Vitals deployment.

Test your site with web.dev or Page Speed Insights.

Do you need help with your website performance score? If the answer it yes, contact us.

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.