Core Web Vitals

Last year Google introduced their 2020 Core Web Vitals which in essence are scores that indicate how your website performs when people load the page. At ImDigital we have always taken these scores very seriously because at the end of the day most people want to try and rank on Google!

Over the couple of year or so, we have noticed a shift in what constitutes a great website design and whilst performance has always been number 1 on our list of priorities, we are noticing that more and more developers are choosing to slim down their designs even further to try reach 100 out of 100 scores across the board.

Are 100/100 scores easily achievable?

No! If you run any 3rd party script on your site such as tracking software like Google Tag Manager, you will get caching suggestions. Although it's impossible to set caching headers for an external request, it does feel a bit annoying that it's GOOGLE Tag Manager, GOOGLE PageSpeed Insights, and we are aiming to please GOOGLE for ranking!

The scores on https://pagespeed.web.dev/ shouldn't matter too much anyway as long as they are relatively ok, but they offer great insight into areas you might want to improve how your website performs. Always check what the competition are doing and try stay ahead of them.

Self-hosting fonts

Prior to around a year ago, we would always use Google Fonts or Adobe Fonts, but we have started to self download and self host to improve performance further. Google Fonts actually recommends self-hosting too.

Libraries such as Next.js have built in font optimisation which improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which is a really handy tool when using Next.js but that's another topic! We still prefer to host our own fonts however.

When self-hosting, ensure you cache your font with the Cache-Control HTTP header. immutable tells the browser the font file will never change:

Cache-Control: public, immutable, max-age=31536000