నెమ్మదైన LCP ను ఎలా diagnose చేసి మెరుగుపరుస్తారు?

Question

IT Interview Practice · Accepted Answer

**LCP element ఏమిటి** మరియు **అది ఎందుకు ఆలస్యం** అని కనుగొనడం ద్వారా ప్రారంభించండి. LCP నాలుగు sub-part లుగా విడిపోతుంది — అతిపెద్దదాన్ని fix చేయండి. ## Diagnose: నాలుగు LCP sub-part లు ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevTools మరియు PageSpeed Insights ఏ ముక్క ఆధిపత్యం చెలాయిస్తుందో చూపిస్తాయి. సాధారణ దోషులు: నెమ్మదైన server (TTFB), ఆలస్యంగా discover అయిన LCP image, లేదా paint ను ఆలస్యం చేసే render-blocking script/CSS. ## Sub-part ల ద్వారా fix లు - **నెమ్మదైన 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 చేయండి; script లను `defer` చేయండి. ## లోపాలు - LCP image ను lazy-loading చేయడం (లేదా దాన్ని JS hydration వెనుక దాచడం) — #1 స్వయం-కృత LCP గాయం. - Web font లు LCP text ను block చేయడం; `font-display: swap` వాడండి మరియు font ను `preload` చేయండి. - 4G పై నిజమైన user లు నెమ్మదిగా ఉండగా lab LCP ను optimize చేయడం — ఎల్లప్పుడూ field data తో నిర్ధారించండి. ## ఇది ఎందుకు ముఖ్యం LCP అనేది headline loading metric మరియు ఒక search ranking factor. నాలుగు sub-part లను పేర్కొనగలగడం మరియు ప్రతిదాన్ని ఒక కచ్చితమైన fix కు map చేయడం interviewer లు వెతికే structured, evidence-driven విధానం సరిగ్గా అదే.

Diagnose: నాలుగు LCP sub-part లు

Sub-part ల ద్వారా fix లు

లోపాలు

ఇది ఎందుకు ముఖ్యం

సంబంధిత ప్రశ్నలు