PageSpeed

• Understanding Lab vs Field Data

  • Lab Data

  • Field Data

• Lighthouse performance scoring ​Lighthouse performance scoring  |  Chrome for DevelopersOpen → Using HTTPArchive

• Lighthouse Scoring Calculator : ​Lighthouse Scoring calculatorOpen

• User-centric performance metrics ​User-centric performance metrics  |  Articles  |  web.devOpen
  
  

Browser Life Cycle ​Community | DigitalOceanOpen

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

• 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.

• ???

async vs defer

Resource Hints : preload, preconnect, prefetch