Published on February 15, 2018
1. Lighthouse / Performance Metrics - Part 1
2. Lighthouse - How I can take? - In Chrome DevTools - From the command line - As a Node module
3. Lighthouse - Part 1 - Performance - Progressive Web App - Accessibility - Best Practices - SEO
4. Lighthouse - Part 1 - Performance - Metrics - Opportunities - Diagnostics - Progressive Web App - Accessibility - Best Practices - SEO
5. Performance - Metrics These metrics encapsulate your web app's performance across a number of dimensions. - First Meaningful Paint - First Interactive (beta) - Consistently Interactive (beta) - Perceptual Speed Index - Estimated Input Latency
6. Performance - First Meaningful Paint Page load is a key aspect of how a user perceives the performance of your page. - This audit identifies the time at which the user feels that the primary content of the page is visible according to RAIL method.
7. Performance - RAIL User-centric performance model that breaks down the user's experience into key actions.
8. Performance - RAIL - Goals and Guidelines - Response: respond in under 50ms - Animation: produce a frame in 10ms - Idle: maximize idle time - Load: deliver content and become interactive in under 5 seconds
9. Performance - First Meaningful Paint Critical Rendering Path - from HTML, CSS and JS to real pixels on the page. Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
10. Performance - First Meaningful Paint Summary First meaningful paint measures when the primary content of a page is visible. - https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint - https://developers.google.com/web/fundamentals/performance/rail - https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ - Free course: https://eu.udacity.com/course/website-performance-optimization--ud884
11. Performance - First Interactive (beta) FirstInteractive two schools: - is the first moment when a website is minimally interactive - is the first moment when a website is completely and delightfully interactive FirstInteractive has been split into two metrics: - First Interactive - Consistently Interactive
12. Performance - First Interactive (beta) This audit measures when a page is minimally interactive: - Most, but maybe not all, UI elements on the screen are interactive. - The page responds, on average, to most user input in a reasonable amount of time
14. Performance - Consistently Interactive (beta) Consistently Interactive marks the time at which the page is fully interactive. - Idle guideline of the RAIL performance model (the page yields control back to the main thread at least once every 50ms) - The network is idle
17. Performance - Perceptual Speed Index Speed Index shows how quickly the contents of a page are visibly populated. - Lighthouse uses a node module called Speedline to generate the Speed Index score - Measures how fast the page content is visually displayed How to optimize: - Optimize Critical Rendering Path - Optimize Content Efficiency
18. Performance - Perceptual Speed Index Summary Speed Index shows how quickly the contents of a page are visibly populated. - https://developers.google.com/web/tools/lighthouse/audits/speed-index - https://github.com/paulirish/speedline - https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
19. Performance - Estimated Input Latency The score above is an estimate of how long your app takes to respond to user input, in milliseconds. There is a 90% probability that a user encounters this amount of latency, or less. 10% of the time a user can expect additional latency. If your latency is higher than 50 ms, users may perceive your app as laggy. - Optimize Rendering Performance and understand pixel pipeline
20. Performance - Estimated Input Latency Summary - https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency - https://developers.google.com/web/fundamentals/performance/rendering/
21. Performance - to do Opportunities Diagnostics