آپ ایک سست LCP کی تشخیص اور بہتری کیسے کرتے ہیں؟

Question

IT Interview Practice · Accepted Answer

شروعات یہ جان کر کریں کہ **LCP element کیا ہے** اور **یہ دیر سے کیوں آتا ہے**۔ LCP چار sub-parts میں تقسیم ہوتا ہے — سب سے بڑے کو ٹھیک کریں۔ ## تشخیص: چار 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 دکھاتے ہیں کہ کون سا حصہ غالب ہے۔ عام مجرم: سست server (TTFB)، LCP image کا دیر سے discover ہونا، یا paint میں تاخیر کرتا کوئی render-blocking script/CSS۔ ## sub-part کے حساب سے fixes - **سست TTFB** → HTML کو CDN پر 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 کے پیچھے چھپانا) — LCP کا نمبر 1 خودساختہ زخم۔ - Web fonts کا LCP text کو block کرنا؛ `font-display: swap` استعمال کریں اور font کو `preload` کریں۔ - lab LCP کو optimize کرنا جبکہ 4G پر اصل صارف سست رہیں — ہمیشہ field data سے تصدیق کریں۔ ## یہ کیوں اہم ہے LCP سب سے نمایاں loading metric اور search ranking کا ایک عنصر ہے۔ چار sub-parts کا نام لے سکنا اور ہر ایک کو ایک ٹھوس fix سے map کر سکنا بالکل وہی منظم، شواہد پر مبنی طریقہ ہے جو interviewers ڈھونڈتے ہیں۔

تشخیص: چار LCP sub-parts

sub-part کے حساب سے fixes

خامیاں

یہ کیوں اہم ہے

متعلقہ سوالات