Skip to content
Table Of Content
Optimize Largest Contentful Paint (LCP)
Bhavesha | 24 January, 2022 | 5 min read
LCP or largest contentful paint time,is the period during which the largest part of the content becomes visible to the user. This includes everything that’s above the fold or “viewport” (the area visible to the user after the page initially loads),whether that’s a chunk of video, images, or other elements.
1. Identification LCP
Tools like GT matrix,lighthouse,Page speed insights.
2. LCP Audits Tools
3. How to improve LCP follows below the steps below the opportunities.
- Eliminate render blocking resources
- Reduce unused CSS
- Reduce initial server response time
- Minify Css
- Ensure text remains visible during
- Avoid enormous network payloads
- Avoid chaining critical request
- Largest Contentful Paint elements
3.1 We can optimize product page gallery, fotorama gallery for improving your LCP score.
3.2 We need to optimize images to improve your score like below the following opportunities.
- Properly size images
- Defer offscreen images
- Images need Width and height
- Responsive images
3.3 We need to preload the image that can also help to improve your Lcp score.
Example:
< link
rel=”preload” as=”image”
href=”{{image_url | replace: ‘_1x1’, ” }}”
img srcset=”{{preloadSrcset}}” />
