<aside> 🧠 This guide uses the Performance Insights feature of Google Chrome development tools. Refer to this guide to learn how to use it!
How to get FCP and LCP readings?
</aside>
The critical rendering path, is a path that browser needs to take in order to display an LCP element. This includes rendering parent components and requesting chunks where these components are located. For example, to render the gallery image on PDP (which is considered an LCP element), the browser might need to:
Request main chunk
Render App component
Render Router component
Request url-rewrites chunk
Render UrlRewrites component
Request product chunk
Render ProductPage component
Render ProductGallery component
Render ProductImage component
Render Image component
Request LCP image
To learn such critical path for LCP element of interest, the following steps need to be taken:
On the right of the timeline, there is a section containing two tabs: Insights and Details.
To read more information about LCP event, select Insights tab, then scroll it, until you see Largest Contentful Paint event appear.
Click it!
Lookup the LCP Element collapsible element, expand it. Find the Element entry, and click on the blue code icon near it.
This should highlight the element in the Elements tab, and add a blue overlay to it on the website.
To find where was this element rendered, you will need to:
Install React development tools extension
Run your application in development mode (in production ScandiPWA prohibits React development tools to work). From ScandiPWA root, run:
yarn start # using Yarn
npm run start # using NPM
With application started in the development mode, open it in the browser and head to ⚛️ Components tab.
Using the element inspector (from React development tools), select the element seen in the previous step. This should highlight in the React components tree.
Note components that were required to render the element. In our case:
Select the element, location of which you would like to learn. Click on the < > symbol, this will take you to the chunk, where this component is declared.
