Lighthouse / Performance / Metrics

50 %
50 %
Information about Lighthouse / Performance / Metrics

Published on February 15, 2018

Author: IgorNapierala

Source: slideshare.net

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

13. Performance - First Interactive (beta) Summary First Interactive marks the time at which the page is minimally interactive. - https://developers.google.com/web/tools/lighthouse/audits/first-interactive - https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/ - https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-executi on - https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit

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

15. Performance - Consistently Interactive (beta) Guidelines: - Minimize the number of required or "critical" resources that must be downloaded or executed before the page can load. (Critical Rendering Path) - Minimize the size of each critical resource. (Optimizing Content Efficiency) - Maximize idle time so that your JavaScript spends no more than 50ms at a time executing tasks in the main thread. (Optimizing JavaScript Execution)

16. Performance - Consistently Interactive (beta) Summary Consistently Interactive marks the time at which the page is fully interactive. - https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive - https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/ - https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-executi on - https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

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

22. thanksQuestions?

Add a comment