Response

• Respond to user input within 100ms, or else the connection between action and reaction is broken
• For actions that take longer than 100ms to complete, always provide feedback.

Animation

• Produce each frame in an animation in 10ms or less
• Animation is scrolling, dragging, loading indicators, entrance and exist, and fancy UI stuff (yes, mini cart slider for instance)

• Replaces First Meaningful Paint (FMP) and Speed Index (SI)
• Old metrics too complicated to understand
• LCP represents the rendering of the largest element
• Can be an image or a text block
• Can change aka cookie overlays on the homepage when loaded first
• LCP within first 2.5 s for P75 of loads

• FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.
• Less than 100 ms for P75 of page loads
• Delays happen because the main browser thread is still doing page loading
• FID is only the delay, not the actual event processing
• Only considers taps, clicks, and key press, NOT scrolling or zooming (the R of the RAIL model)

• The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.
• Main thread is block, when a task last more than 50 ms
• TBT should be less than 300 ms

• CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
• A layout shift occurs any time a visible element changes its position from one rendered frame to the next.
• Layout shifts only occur when existing elements change their start position
• New elements appearing are not counted as long as no other element moves
• Recommended score < 0.1 for P75 of page loads

• Element moves by 25%
• Union of old and new is the impact fraction = 75% (0.75)
• Moved distance is called distance fraction = 25% (0.25)
• Score = impact fraction * distance fraction
  (0.75 * 0.25 = 0.1875)
• Only the viewport is considered, overflowing element regions are not considered

• A metric invented by Webpagetest.org in 2012
• Measures how fast the page content is visually displayed
• Based on Visual Progress from Video Capture
• Calculated by comparing the distance between the histogram of the current frame and the final frame
• There is a perceptual speed index version that uses SSIM (structural similarity index measure) between frames instead of the histogram

A small example to understand it better

• Start loading to visual complete (0.0 - 1.0)
• 100 ms frames
• Each frame is compared to final frame using a histogram comparison
• Frame score = interval size ms * (1 - (completeness/100))
• Total score (ms) = sum(frame scores)

Wrong Data

• Lighthouse prior v6 rated desktop using mobile data from HttpArchive
• v6 now uses also desktop scores aka everything desktop from before is void

Mobile Emulation

• Lighthouse runs mobile-first
• Uses a mobile device emulation
• Slower network, slower CPU (Lantern engine)
• Device emulation tries to be a Moto G4 360x640 px
• Chrome DevTools device emulation != Lighthouse emulation

• The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
• Less than 1 sec for P75 of page loads

• Defines when the first byte of the response is received by the client
• There are streaming servers and blocking servers
• Blocking server deliver the full response at once
• Streaming delivers data when the data is ready
• Most important first key metric
• If TTFB fails to deliver, no other metric can compensate

• Your network determines the performance!
• Your PC makes a difference (load, memory, cpu...)
• Resolution makes a difference
• The site content make a huge difference
• Homeoffice means different network speed and providers
• Modern web caches like crazy, caching changes things
• A VPN changes things a lot, same for corporate firewalls
• Never trust one measurement

• First load: Never visited before site and page, caches are cold
• Repeated load: Reloading the same page
• Returned load: Returning via navigation to the same page
• Navigation load: Going to a different page but having visited another page before (same or different type), e.g. homepage -> product listing page

• Measure your timing first
• Go for largest contentful paint (LCP) and first contentful paint (FCP), visual complete above the fold, and fully loaded (because progress bar prevents people from doing things)
• Optimize for slower connections on mobile
• Optimize for ok but not blazing fast connections on desktop
• Reevaluate third parties and features
• Understand the critical rendering path
• Users land not only on the homepage!

• DOM: 1,500 nodes or less
• CSS: Only what you need on that page
• Images: Device specific, PNG/JPG/SVG carefully selected, meta data stripped, optimally compressed, CSS effects instead of images
• Responsive Images: Use srcset, size, and picture¹
• Fonts: Less fonts, fonts limited to used glyphs
• JS: Minify and select what you need, try async or defer

• Short and clean HTML to shorten parsing
• CSS in front of all
• No or little JS to avoid blocking parsing
• Little, small, and possible preloaded fonts
• Utilize Font Loading API
• Don't read or write styles with JS

• Cache content as long as possible, let the browser deal with the expiration
• Cache in browser as public resource and permit caching by intermediaries
• Utilize fingerprints to publish new versions base.css?665sdasdf
• Own your content, don't host externally for CSS, JS, fonts (exception apply)

What the user sees first is important

• Focus on what the users sees first
• Keep pages short
• Don't spent money on things only 5% see
• Above the fold is important to paint first
• Consider content removal below the fold
• Progressively enhance

You need space for your late auntie

• If something comes in late, reserve the space for it
• Consider a place holder and enhance it
• If it flickers, it draws attention and distracts (one of the reason why header sliders are a bad idea)

• RAIL: Response
• If it takes longer than 50ms, indicate it
• When the user clicks, give feedback
• Progress bars, spinners, blocking the area that refreshes
• Don't change the size!!!

• Own content and CSS/JS/Fonts as much as possible
• Be in control of quality, caching, and more
• A third party can bring you down
• Third parties can be blocked (extensions, proxies)
• Third parties are a security risk
• Load async or deferred, get them out of the main renderer
• Don't let them change the layout!