PageSpeed

• Understanding Lab vs Field Data

  • Lab Data

  • Field Data

• Lighthouse performance scoring https://web.dev/performance-scoring/ → Using HTTPArchive

• Lighthouse Scoring Calculator : https://googlechrome.github.io/lighthouse/scorecalc/

• User-centric performance metrics https://web.dev/user-centric-performance-metrics/
  
  

Browser Life Cycle https://scotch.io/@Venkatraman/browser-life-cycle

The critical rendering path https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a

• DOM

• CSSOM

• Render Tree

• Layout → Paint
  
  

• Dealing with Javascript
  
  

• Parser blocking vs render blocking

  • If there is any inline <script> under an external CSS's <link> tag, even if that is just an empty <script> tag that contains no JavaScript at all, the DOM construction for the HTML below that <script> tag will still be blocked util the external CSS is fetched. If you have a slow network connection, that empty <script> still causes a long delay of DOM construction. Because the <script> tag waits for the external CSS, and DOM construction waits for the script. In this case the external CSS resource implicitly causes a parser-blocking.
    
    

• Make sure no critical requests are redirected.

 How to Prioritise Requests https://calibreapp.com/blog/critical-request

async vs defer

Resource Hints : preload, preconnect, prefetch