TL;DR
This article will not explain how web performance can improve your user experience, engagement, and retention. If you are reading this, I’ll assume you already recognize the importance of that. This is not a technical guide to boost your site’s performance. Instead, it will focus on the first steps you can take to approach web performance.
1 - Core Web Vitals
So, let’s start at the beginning.
March 2020 was a milestone for anyone interested in web performance. It was the day that, for the first time, Google was very clear about which performance criteria it will use on ranking quality on your website. They named this initiative as Core Web Vitals.
The company had previously said that it used performance as a criterion but never specified how exactly to do the measurements.
Although Google is already adapting several tools such as Lighthouse, DevTools, PageSpeed Insights, Search Console, and Chrome UX Report to consider these metrics, the company said that they will only become effective at the beginning of 2021.
2 - Stay on top of everything in Chrome
Chrome is by far the most used browser worldwide. It has long been leading the innovation in everything that concerns day-to-day activities on the mobile/desktop web. With that, as a software developer, you need to know everything that the Google team is providing for you to improve the experience of your users.
One way to practice this is by subscribing to the Google Chrome Developers channel on YouTube. The content is incredibly well-produced, straight to the point, and fun to watch.
Look at this amazing playlist from day one of the live organized by web.dev:
3 - Extract your critical JS and CSS
We must assume that in most cases, we have poor internet. Hence, what’s the point of downloading the page content if the user will only see what fits his screen?
A simple strategy is to first download what fits in the viewport, and postpone everything else after the first part is rendered. So we will guarantee a much faster first rendering.
Here we have 2 points to worry about: critical CSS and critical JS. As for CSS, on web.dev you can find a codelab that teaches you how to use DevTools and Critical to extract the part of the CSS that really matters for the first painting. Critical JS is a little more difficult to work with, as it requires a greater understanding of how browsers work under the hood.
To render a page, the browser basically downloads a text document. Then, It builds the respective DOM tree when the HTML markup parse ends. Whenever the parser encounters a <script> tag, it must stop the parse and execute it. Suppose any of these scripts are on an external server. In that case, the parser is forced to wait for the download to finish, which can cause the famous render-blocking problem.
In the next topic, we will talk more about how to defer the loading of JS scripts that are not needed for the first painting.
4 - Defer Loading Content
In this GIF, we can see the Intersection Observer API working in practice. Basically, with this API, we can know exactly if a specific element is on the user’s screen or not. We can even use a threshold to know if, for example, that element is still missing 50px to enter the user’s viewport.
The use cases here are endless, but for the sake of this article, we can use that API to programmatically load the components that will appear on the screen as the user scrolls on the page.
Lazysizes is a library that abstracts all the necessary implementation and provides intuitive and practical methods to use in several cases.
5 - Don’t Resize Images in HTML
Okay, this is by far the easiest tip, but enter any big portal you usually access, open the DevTools Network tab and see for yourself…
Many images are downloaded in giant resolutions and displayed in small containers. What does that mean? Your browser is downloading a 1Mb asset and displaying an image that could easily be 100kB.
For this type of problem, you can use Thumbor, which is defined as a “Smart imaging service. It enables on-demand crop, resizing, and flipping of images.”
You can combine Thumbor, <picture> tag, and srcsec attribute to use specific images on specific resolutions. With that, the browser can delivery the best asset to the user, without losing quality. Learn how in this link.
Motivation Content!
Take a look at this case now! In 2018 Pinterest simply reported more than 800,000 active users who added the site to their home screens, just focusing on web performance. Incredible right?
Thanks for reading this far! My name is Breno Henrique. I am a software developer from Brazil. I love to learn and share tech content on the web. I hope you enjoyed it! Feel free to connect with me on the links below. Here is my LinkedIn, GitHub, Twitter, and Instagram.
Top comments (0)