Yesterday, I went down to the Google Developer Space in Singapore for a talk by Tamas Piros on the topic of "Mastering Web Performance" in 2024. First of all, kudos and thanks to Tamas for coming down and giving us these insights into optimizing our sites for performance. I learnt quite a few things from it and am excited to implement them in my future projects.

I'm sure many of you feel this way too, and this is why I am here today to share some of the main takeaways I got from this workshop!

Takeaways:

1. What the Core Web Vitals consist of

Prior to the workshop, I have experience in conducting frequent website maintenances for clients, and one of the tasks included month-to-month improvements in site performance. I was always involved in the steps taken in order to improve the page score given by Google, and to achieve a better score, our site needs to tackle issues that arise with the Core Web Vitals. So, what are these Core Web Vitals?

• Cumulative Layout Shift (CLS)
• Interaction to Next Paint
• Largest Contentful Paint

I will briefly cover what these are, focus on the first 2 vitals in this article!

1.1 Cumulative Layout Shift (CLS)

Very briefly, what CLS is, is the measurement of how much content on your page shifts. For instance, if there are ads that are displayed between paragraphs on your page, and they display after a certain condition, this would decrease the CLS score as your paragraphs/text on the page will likely move as these ads load.

Why is CLS important to consider for optimal web performance?
Well, having paragraphs that move a lot significantly affects User Experience (UX)! For instance, if a user is staying still on the page reading the text, I'm sure you can imagine how frustrated the user will be if that text suddenly shifts out of your viewport right? Similarly, if you, as a user is highlighting links on the page, you won't want it to suddenly shift and for you to lose that link right?

1.2 Interaction to Next Paint

This is essentially how long the page takes to load. The name is as such, because it measures how long the site takes to respond after a user has interacted with it. eg. Clicking a button on the page, redirects etc.

This is also another factor to consider for UX. As the web world gets more advanced each day, users and customers expect quicker speeds and smoother website layouts and performances. If your website is slightly slower than your competition, that could be the difference between a potential customer versus someone who is disgusted with the speed of your website.

These are just part 1 of the takeaways I had from the workshop held yesterday. If you guys are interested in learning even more, show some love on this post! If this post gets enough traction, I'll post more of my takeaways that I had from the talk with more in-depth information on the topics as well!