Page speed Standard Understanding
PageSpeed
Understanding Lab vs Field Data
Lab Data
Field Data
Lighthouse performance scoring Lighthouse performance scoring | Chrome for Developers → Using HTTPArchive
Lighthouse Scoring Calculator : Lighthouse Scoring calculator
User-centric performance metrics User-centric performance metrics | Articles | web.dev
Browser Life Cycle DigitalOcean
The critical rendering path Understanding the critical rendering path, rendering pages in 1 second
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