Web performance webinar with Tracy Lee

We kicked off this year with a webinar presentation on improving web application performance by Tracy Lee. Continue reading for the highlights and an overview of the presentation or watch the full recording on Youtube.

A big Thank You to Tracy Lee for holding this webinar! 

Who is Tracy Lee?

Tracy Lee is an entrepreneur, Google Dev expert, Microsoft MVP, international keynote speaker, and an RxJS Core Member. She’s the CEO of ThisDotLabs, which is a framework-agnostic JS consultancy. You can follow her on twitter @ladyleet.

What is web performance?

Web performance is how well a website, or web app, performs for users. We look into improving this performance, but only scratch the surface of a topic that you can really dive into.

We use Google's Lighthouse, an open-source automated tool for measuring website performance and creating reports on how well our website is performing. 

From Beginner to Expert in Web Performance

Measuring web performance the right way

One of the most important things to understand before you even get started is your users and customers. Know what their typical use scenarios are, such as the devices they are on, and how they can access the functionality they need as effectively as possible. If you don’t have access to that kind of data, perform tests that assume your users are not highly skilled in utilizing web apps and do not run them on the latest hardware with a 5G connection. Quoting a tweet by Google software engineer, Alex Russell:

“First, if you can, know your users/customers. Then look at the high-percentiles of slowness for *them*.

If you can’t get good population-level data, or don’t have it yet, assume you’re making tech for the disenfranchised” @slighlylate

Create your #webperf foundation

Once you’ve decided your demographic and what you’re optimizing for, the next step is to create a foundation for your web performance:

1. Define your goals: what are you measuring and why?
2. Create baseline metrics: find the numbers you care about and want to improve.
3. Measure across multiple devices: you never want to measure on just your machine. Lee recommends virtual machine simulations in Chrome Dev Tools if you don’t have access to multiple different devices.
4. Assume you’re building for the disenfranchised, if you don’t have data to the contrary.
5. Get ready to measure!

Measuring webperf in DevTools and Lighthouse

This is a typical process for measuring web performance across sites with Google Lighthouse. 

1. Open an incognito window in the Chrome browser and visit a production site. This is key to ensuring that no extensions get in the way of your measurements!
2. Change the device to Moto G4, the industry standard for running performance benchmarks on websites.
3. Throttle the network speed to a slow 3G. Your website will obviously perform well on a lightning-fast network, but this isn’t the typical usage scenario.
4. Throttle CPU to 4x to accurately benchmark your site.
5. Disable cache in the Network tab and refresh. Otherwise, the site might appear faster than it is for users who haven’t visited it before.
6. Run the Lighthouse report. This will give a realistic view of how the website performs for the average user. 

Key lighthouse metrics

What do the metrics in the Lighthouse report mean for my website? Here are the more important metrics: 

FCP (First Contentful Paint) measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. It shows you how long it takes before your users see anything. Sites performing in the 99th percentile render FCP in 1.5 seconds.

LCP (Largest Contentful Paint) reports the render time of the largest image or textblock visible within the viewport. The baseline is at 2.5 seconds.

CLS (Cumulative Layout Shift) measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the lifespan of the page. It shows you how much the browser has to work on resizing or recalculating the layouts on a page, for example. This can manifest as different elements, such as buttons or shifting places on the page when the user is scrolling. A good CLS score should be less than 0.1 to compete with the 75th percentile of page load across mobile and desktop devices.

TTI (Time To Interactive) measures the time when a page starts loading to the time when it’s reliably capable of responding to user input. For a smooth user experience, you should aim to minimize the difference between your FCP and TTI.

TBT (Total Blocking Time) measures the total amount of time (between FCP and TTI) where the main thread was blocked for long enough to prevent input responsiveness. Google recommends that your TBT should be less than 300ms when tested on average mobile hardware.

SI (Speed Index) measures how quickly content is visually displayed during page load. Simply put, how fast does your site appear to load? You should aim for a SI of 0-4.3 seconds for a Lighthouse score of 75.

2 easy performance fixes you can do in your sleep

1. Large images

Lighthouse tells you how big your images are and by how much you can reduce them. Most images should be under 100kb. An effective way to optimize image size is to load different images based on the device being used. You can also use scrset in <img> tags to select the correct image based on display size (on supported browsers).

2. Unused JS

Lighthouse gives you all of the unused JavaScript code that you can then review and update or remove. You can also look at usage visualization by going to website -> Console -> More Tools -> Coverage. Then hit Record, use the site for a while, stop recording and view the results. Identify code that's not being used and remove or defer it.

Final thoughts

Even though Lighthouse reports provide you with a score for your website and display metrics that you can improve, it’s not everything. A perfect Lighthouse score of 100 points does not necessarily equal a perfect website experience. Always test your website with users and optimize the experience for the goals you want to achieve for the site.

You can follow @ThisDotLabs on Twitter for more content like this webinar, including free resources, such as training, events and podcasts on all things web performance. If you’re interested in working with or working for ThisDotLabs, contact them at https://labs.thisdot.co/. 

Make sure to check the Vaadin events page and / or follow us on social media, such as Twitter, for more webinars like this!