This is based on my presentation at LifCare for measuring performance and its best practices. Topics like RAIL performance model, rendering goals, discussion on how DOM and CSSOM works, optimising critical rendering path and many others.

1. Web Performance
By Lusan Das

2. RAIL Performance Model
Response Animation Idle Load
< 100ms paint < 1000ms first paint< 50ms chunks< 16ms frame

3. Rendering Goals

4. DOM & CSSOM

5. Optimising CRP
1. Use media type and queries for css
2. avoid inline(exec pauses until CSSOM ready) for js
3. Use async with scripts

6. Measuring CRP
1. domLoading
2. domInteractive
3. domContentLoaded
4. domComplete
5. loadEvent
measureCRP

7. Performance Advice
1. HTML first, then CSS and then JS
2. Avoid js animations, use CSS!
3. Hardware accelerated CSS
4. Use preload
5. H2 server push
6. Service workers
7. Code splitting (lazy module loading)
8. Vector or svg images, load on media and many more

8. Thank you
Follow me on twitter @daslusan to get more updates!