ਤੁਸੀਂ ਹੌਲੀ LCP ਦਾ diagnose ਅਤੇ ਸੁਧਾਰ ਕਿਵੇਂ ਕਰਦੇ ਹੋ?

Question

IT Interview Practice · Accepted Answer

ਸ਼ੁਰੂਆਤ ਇਹ ਲੱਭ ਕੇ ਕਰੋ ਕਿ **LCP element ਕੀ ਹੈ** ਅਤੇ **ਇਹ ਦੇਰ ਨਾਲ ਕਿਉਂ ਹੈ**। LCP ਚਾਰ sub-parts ਵਿੱਚ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ — ਸਭ ਤੋਂ ਵੱਡੇ ਨੂੰ ਠੀਕ ਕਰੋ। ## Diagnose: ਚਾਰ LCP sub-parts ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools ਅਤੇ PageSpeed Insights ਦਿਖਾਉਂਦੇ ਹਨ ਕਿ ਕਿਹੜਾ slice ਹਾਵੀ ਹੈ। ਆਮ ਦੋਸ਼ੀ: ਹੌਲੀ server (TTFB), LCP image ਦੇਰ ਨਾਲ ਲੱਭਿਆ, ਜਾਂ paint ਨੂੰ ਦੇਰੀ ਕਰਨ ਵਾਲਾ render-blocking script/CSS। ## sub-part ਅਨੁਸਾਰ fixes - **ਹੌਲੀ TTFB** → CDN 'ਤੇ HTML cache ਕਰੋ, SSG/ISR ਵਰਤੋ, origin/database ਨੂੰ ਤੇਜ਼ ਕਰੋ। - **Load delay (image ਦੇਰ ਨਾਲ ਲੱਭਿਆ)** → ਇਸਨੂੰ preload ਕਰੋ ਅਤੇ ਇਸਦੀ priority ਵਧਾਓ ਤਾਂ ਜੋ browser ਇਸਨੂੰ CSS/JS ਤੋਂ ਬਾਅਦ ਦੀ ਬਜਾਏ ਤੁਰੰਤ fetch ਕਰੇ: ```html

``` - **Load time (image ਬਹੁਤ ਵੱਡਾ)** → AVIF/WebP serve ਕਰੋ, `srcset` ਨਾਲ ਸਹੀ size ਦਿਓ, compress ਕਰੋ। - **Render delay** → render-blocking CSS/JS ਘਟਾਓ; critical CSS inline ਕਰੋ; scripts ਨੂੰ `defer` ਕਰੋ। ## ਧਿਆਨ ਰੱਖਣ ਯੋਗ ਗੱਲਾਂ - LCP image ਨੂੰ lazy-load ਕਰਨਾ (ਜਾਂ ਇਸਨੂੰ JS hydration ਪਿੱਛੇ ਲੁਕਾਉਣਾ) — #1 ਖ਼ੁਦ ਲਾਇਆ LCP ਜ਼ਖ਼ਮ। - Web fonts LCP text ਨੂੰ block ਕਰਦੇ ਹਨ; `font-display: swap` ਵਰਤੋ ਅਤੇ font ਨੂੰ `preload` ਕਰੋ। - lab LCP optimize ਕਰਦੇ ਹੋਏ ਜਦੋਂ 4G 'ਤੇ ਅਸਲ ਉਪਭੋਗਤਾ ਹੌਲੀ ਰਹਿੰਦੇ ਹਨ — ਹਮੇਸ਼ਾ field data ਨਾਲ ਪੁਸ਼ਟੀ ਕਰੋ। ## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ LCP ਮੁੱਖ loading metric ਅਤੇ ਇੱਕ search ranking factor ਹੈ। ਚਾਰ sub-parts ਦੱਸ ਸਕਣਾ ਅਤੇ ਹਰ ਇੱਕ ਨੂੰ ਇੱਕ concrete fix ਨਾਲ map ਕਰ ਸਕਣਾ ਬਿਲਕੁਲ ਉਹ structured, evidence-driven ਪਹੁੰਚ ਹੈ ਜੋ interviewers ਲੱਭਦੇ ਹਨ।

Diagnose: ਚਾਰ LCP sub-parts

sub-part ਅਨੁਸਾਰ fixes

ਧਿਆਨ ਰੱਖਣ ਯੋਗ ਗੱਲਾਂ

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ