तपाईं ढिलो LCP कसरी diagnose र सुधार गर्नुहुन्छ?

Question

IT Interview Practice · Accepted Answer

**LCP element के हो** र **यो किन ढिलो छ** भनेर पत्ता लगाएर सुरु गर्नुहोस्। LCP चार sub-part मा विभाजित हुन्छ — सबैभन्दा ठूलो सच्याउनुहोस्। ## 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 ले कुन slice प्रभावी छ देखाउँछन्। सामान्य कारण: ढिलो server (TTFB), ढिलो पत्ता लागेको 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` सँग सही आकार दिनुहोस्, compress गर्नुहोस्। - **Render delay** → render-blocking CSS/JS घटाउनुहोस्; critical CSS inline गर्नुहोस्; script `defer` गर्नुहोस्। ## सामान्य गल्तीहरू - LCP image lazy-load गर्नु (वा यसलाई JS hydration पछाडि लुकाउनु) — #1 आफैंले निम्त्याएको LCP घाउ। - Web font ले LCP text block गर्नु; `font-display: swap` प्रयोग गर्नुहोस् र font `preload` गर्नुहोस्। - 4G मा वास्तविक प्रयोगकर्ता ढिलै रहँदा lab LCP optimize गर्नु — सधैं field data ले पुष्टि गर्नुहोस्। ## यो किन महत्त्वपूर्ण छ LCP मुख्य loading metric र search ranking factor हो। चार sub-part नाम लिन र प्रत्येकलाई ठोस fix मा map गर्न सक्नु नै interviewer हरूले खोज्ने संरचित, प्रमाण-आधारित दृष्टिकोण हो।

Diagnose: चार LCP sub-part

sub-part अनुसार fix

सामान्य गल्तीहरू

यो किन महत्त्वपूर्ण छ

सम्बन्धित प्रश्नहरू