React - Lighthouse Performance audits - Deepstash
Product Management Essentials

Learn more about computerscience with this collection

Essential product management skills

How to work effectively with cross-functional teams

How to identify and prioritize customer needs

Product Management Essentials

Discover 57 similar ideas in

It takes just

8 mins to read

The metrics measured

聽聽聽聽聽聽聽聽Name - Weight in score - Summary

  1. First Contentful Paint (FCP) - 10% - Time to paint the first text or image
  2. Time to Interactive (TTI) - 10% - Necessary time for the app to become fully interactive (responding within 50ms from user interaction)
  3. Speed Index (SI) - 10% - How fast the content inside the page is visible populated
  4. Total Blocking Time (TBT) - 30% - Sum of all periods between FCP and TTI, when the task exceeds 50ms
  5. Largest Contentful Paint (LCP) - 25% - Time for the largest image or text to be painted
  6. Cumulative Layout Shift (CLS) - 15% - Movement of visible elements

6

368 reads

Short notices

聽Some of the values are calculated based on聽

data from the HTTP Archive

If you don't have a very specific reason to optimise only one of the metrics, the best approace would be to check the opportunities mentioned in the Lighthouse report and read an in-depth presentation聽

here

5

21 reads

FCP

Very important for this part is the font load time. For faster load, it can be used the font-display: swap. This will make the site to render the default font and when the loading is done, the font will be changed. Also, you can preload the fonts.聽

6

16 reads

TTI

It measures how long it takes a page to become fully interactive. A page is considered fully interactive when:

  • The page displays useful content, which is measured by the聽聽
  • Event handlers are registered for most visible page elements, and
  • The page responds to user interactions within 50聽milliseconds.

To improve this metric, you should consider聽

reducing JavaScript payloads with code splittingapplying the PRPL pattern

Also, other things that can be helpful:聽

minimize main thread work

and聽

reduce JavaScript execution time

5

16 reads

TTI - PRPL Pattern

PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster:

  • Push (or preload) the most important resources.
  • Render the initial route as soon as possible.
  • Pre-cache remaining assets.
  • Lazy load other routes and non-critical assets.

5

12 reads

Speed Index

While anything you do to improve page load speed will improve your Speed Index score, addressing the following should have a particularly big impact:

Minimize main thread work
Reduce JavaScript execution time
Ensure text remains visible during webfont load

5

7 reads

More about TBT

TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The sum is calculated by adding the blocking portion of all聽

long tasksFirst Contentful PaintTime to Interactive

5

6 reads

How to improve TBT

Try to diagnose the root cause of long tasks, using聽

What is causing my long tasks?

In general, the most common causes are:

  • Unnecessary JavaScript loading, parsing or execution. This means the main thread is doing more work than it supose to do -> try reducing JS payloads with code splitting, removing unused code and efficiently loading third-party JavaScript
  • Inefficient JS statements -> avoid selectors that returns 2000 nodes (e.g. document.querySelectorAll('a') ) and refactor to have a more specific one.

5

3 reads

More about LCP

This approximates when the main content of the page is visible to the users.聽

The elements that are taken into consideration for Largest Contentful Paint:聽

  • <img> elements
  • <image> elements inside an <svg> element
  • <video> elements (the poster image is used)
  • An element with a background image loaded via the聽聽聽
Block-level

In the future, additional elements might be added, like <svg> and <video>

Extra info:聽

LCP

5

15 reads

How to improve LCP

Causes:聽

  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Resource load times
  • Client-side rendering

For improvements, some relevant techniques:

Apply instant loading with the PRPL pattern
Optimizing the Critical Rendering Path
Optimize your CSS
Optimize your Images
Optimize web Fonts
Optimize your JavaScript

5

11 reads

CLS

CLS is a measure of the largest burst of layout shift scores for every聽

unexpected

How to improve:

  • Always include size attributes on your images and video elements, or otherwise reserve the required space with something like
CSS aspect ratio boxes
  • Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.

5

6 reads

CLS - part 2

  • Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

More info:聽

here

5

8 reads

CURATED BY

teni

Normal person with peculiar dreams @unkl's prot茅g茅 @cristianmezei's disciple

More like this

stash-superman-illustration

Explore the World鈥檚

Best Ideas

200,000+ ideas on pretty much any topic. Created by the smartest people around & well-organized so you can explore at will.

An Idea for Everything

Explore the biggest library of insights. And we've infused it with powerful filtering tools so you can easily find what you need.

Knowledge Library

Powerful Saving & Organizational Tools

Save ideas for later reading, for personalized stashes, or for remembering it later.

# Personal Growth

Take Your Ideas

Anywhere

Organize your ideas & listen on the go. And with Pro, there are no limits.

Listen on the go

Just press play and we take care of the words.

Never worry about spotty connections

No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.

Get Organized with Stashes

Ideas for your next work project? Quotes that inspire you? Put them in the right place so you never lose them.

Join

2 Million Stashers

4.8

5,740 Reviews

App Store

4.7

72,690 Reviews

Google Play

Shankul Varada

Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.

samz905

Don鈥檛 look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.

Sean Green

Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.

Ashley Anthony

This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!

Jamyson Haug

Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.

Laetitia Berton

I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!

Giovanna Scalzone

Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.

Ghazala Begum

Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.

Email

I agree to receive email updates