Core Web Vitals Optimization: LCP, FID & CLS for eCommerce Sites

اچھی کور ویب وائٹلز والی سائٹیں گوگل کی تحقیق کے مطابق 24% کم ترک کرنے کی شرحوں کا تجربہ کرتی ہیں۔ ای کامرس کے لیے، جہاں تبادلوں کی شرح کا ہر فیصد نقطہ آمدنی میں ترجمہ کرتا ہے، ویب کی کارکردگی تکنیکی اچھی نہیں ہے -- یہ ایک کاروباری ضرب ہے۔ کور ویب وائٹلز گوگل کی درجہ بندی کا ایک تصدیق شدہ عنصر بھی ہیں، یعنی ناقص اسکورز آپ کے پروڈکٹ کے صفحات کو تلاش کے نتائج میں بالکل نیچے دھکیل دیتے ہیں جب ممکنہ گاہک خریدنا چاہتے ہیں۔

اہم ٹیک ویز

• 2.5 سیکنڈ سے کم کے سب سے بڑے مواد سے بھرپور پینٹ (LCP) کے لیے سرور کے رسپانس ٹائم اور اہم وسائل کی لوڈنگ دونوں کو بہتر بنانے کی ضرورت ہوتی ہے۔
• 200ms کے تحت نیکسٹ پینٹ (INP) سے تعامل کا مطلب ہے جاوا اسکرپٹ کے طویل کاموں کو توڑنا اور غیر اہم عمل کو موخر کرنا
• 0.1 کے تحت مجموعی لے آؤٹ شفٹ (CLS) کے لیے تمام تصاویر، ایمبیڈز، اور متحرک طور پر انجیکشن کردہ مواد پر واضح جہت کی ضرورت ہوتی ہے۔
• ای کامرس سائٹس کو منفرد CWV چیلنجز کا سامنا ہے: بھاری مصنوعات کی تصاویر، فریق ثالث کے اسکرپٹس (تجزیہ، چیٹ، اشتہارات) اور قیمتوں کے متحرک عناصر

---

بنیادی ویب وائٹلز کو سمجھنا

کور ویب وائٹلز تین صارف پر مرکوز کارکردگی کے میٹرکس ہیں جنہیں گوگل رینکنگ سگنلز کے طور پر استعمال کرتا ہے۔ وہ لوڈنگ کی رفتار، تعامل، اور بصری استحکام کی پیمائش کرتے ہیں -- صفحہ کے تجربے کے تین پہلو جو صارفین سب سے زیادہ محسوس کرتے ہیں۔

نوٹ: ایف آئی ڈی (پہلی ان پٹ تاخیر) کو INP (انٹریکشن ٹو نیکسٹ پینٹ) نے مارچ 2024 میں آفیشل ریسپانسیونیس میٹرک کے طور پر تبدیل کر دیا تھا۔ INP صفحہ زندگی کے دوران تمام تعاملات کی پیمائش کرتا ہے، نہ صرف پہلا۔

ای کامرس سائٹس کیوں جدوجہد کرتی ہیں۔

ای کامرس سائٹس کو کارکردگی کے انوکھے چیلنجوں کا سامنا کرنا پڑتا ہے جو مواد کی سائٹس نہیں کرتی ہیں:

• بھاری مصنوعات کی تصاویر -- اعلی ریزولیوشن پروڈکٹ کی تصاویر تبدیلی کے لیے اہم ہیں لیکن لوڈ ہونے میں سست ہیں
• تیسرے فریق کے اسکرپٹس -- تجزیات (گوگل اینالیٹکس، میٹا پکسل)، چیٹ ویجٹ (انٹرکام، زینڈیسک)، پرسنلائزیشن انجن، اور A/B ٹیسٹنگ ٹولز سبھی اہم تھریڈ ٹائم کے لیے مقابلہ کرتے ہیں۔
• متحرک مواد -- قیمتوں میں تبدیلی، اسٹاک کے اشارے، پروموشنل بینرز، اور ذاتی نوعیت کی سفارشات لے آؤٹ اور بلاک رینڈرنگ میں تبدیلی
• چیک آؤٹ کا پیچیدہ بہاؤ -- ادائیگی کی پروسیسنگ اسکرپٹس، ایڈریس کی توثیق، اور دھوکہ دہی کا پتہ لگانا جاوا اسکرپٹ کا وزن بڑھاتا ہے

---

سب سے بڑا موادی پینٹ (LCP) کو بہتر بنانا

LCP پیمائش کرتا ہے جب سب سے بڑا نظر آنے والا عنصر رینڈرنگ مکمل کرتا ہے۔ پروڈکٹ کے صفحات کے لیے، یہ عام طور پر ہیرو پروڈکٹ کی تصویر ہوتی ہے۔ زمرہ کے صفحات کے لیے، یہ پروڈکٹ کارڈ کی پہلی تصویر یا پروموشنل بینر ہو سکتا ہے۔

سرور رسپانس ٹائم (TTFB)

LCP آپ کے سرور کے رسپانس ٹائم سے تیز نہیں ہو سکتا۔ ٹائم ٹو فرسٹ بائٹ (TTFB) پیمائش کرتا ہے کہ براؤزر HTML کے پہلے بائٹ کا کتنا انتظار کرتا ہے۔ TTFB کو 600ms سے کم کا ہدف بنائیں، مثالی طور پر 200ms سے کم۔

** اصلاح کی تکنیک:**

• سرور سائیڈ رینڈرنگ (SSR) -- خالی شیل بھیجنے کے بجائے سرور پر ایچ ٹی ایم ایل رینڈر کریں جس کے لیے جاوا اسکرپٹ کی ضرورت ہوتی ہے۔ React سرور اجزاء کے ساتھ Next.js ایپ راؤٹر یہ بطور ڈیفالٹ فراہم کرتا ہے۔
• ایج کمپیوٹنگ -- ورسل ایج فنکشنز یا کلاؤڈ فلیئر ورکرز جیسے پلیٹ فارم استعمال کرنے والے صارفین کے قریب کنارے والے مقامات پر سرور سائیڈ رینڈرنگ کو تعینات کریں۔
• ڈیٹا بیس آپٹیمائزیشن -- مصنوعات کے صفحات پر سست ڈیٹا بیس سوالات براہ راست TTFB کو بڑھاتے ہیں۔ ڈیٹا بیس استفسار کی اصلاح پر ہماری گائیڈ دیکھیں
• کیچنگ -- گمنام صارفین کے لیے کیش رینڈر شدہ صفحات۔ CDN کیش شدہ پروڈکٹ کا صفحہ اصل سے 200ms کے مقابلے میں 20ms میں کام کرتا ہے۔ دیکھیں کیشنگ کی حکمت عملی

اہم وسائل کی لوڈنگ

HTML کے آنے کے بعد، براؤزر کو LCP عنصر کو پیش کرنے سے پہلے CSS، فونٹس اور تصاویر کو لوڈ کرنا چاہیے۔

ایل سی پی کے لیے امیج آپٹیمائزیشن:

• ایل سی پی امیج کے لیے براؤزر کو ترجیح دینے کے لیے بتانے کے لیے <img> کو fetchpriority="high" کے ساتھ استعمال کریں۔
• جدید فارمیٹس استعمال کریں: WebP (JPEG سے 30% چھوٹا) یا AVIF (JPEG سے 50% چھوٹا)
• 400px موبائل اسکرین پر 2000px تصویر لوڈ کرنے سے بچنے کے لیے srcset اور sizes کے ساتھ جوابی تصاویر پیش کریں۔
• دستاویز میں LCP امیج کو پہلے سے لوڈ کریں <head> کے ساتھ <link rel="preload" as="image">
• LCP امیج کو سست لوڈ کرنے سے گریز کریں -- جب آپ اسے فوری لوڈ کرنا چاہتے ہیں تو سست لوڈنگ اسے موخر کر دیتی ہے

CSS کی اصلاح:

• رینڈر بلاک کرنے والی CSS درخواستوں سے بچنے کے لیے HTML <head> میں اہم CSS کو ان لائن کریں
• media="print" کے ساتھ غیر اہم CSS (اینیمیشن، نیچے فولڈ اسٹائل) کو موخر کریں اور لوڈ ہونے پر media="all" میں تبدیل کریں۔
• غیر استعمال شدہ CSS کو ہٹا دیں -- PurgeCSS جیسے ٹولز ڈیڈ رولز کو ختم کرتے ہیں۔

فونٹ کی اصلاح:

• اپنی مرضی کے فونٹ کے لوڈ ہونے کے دوران فال بیک فونٹ کے ساتھ متن کو فوری طور پر دکھانے کے لیے font-display: swap کا استعمال کریں۔
• بنیادی فونٹ فائل کو <link rel="preload" as="font" crossorigin> کے ساتھ پہلے سے لوڈ کریں
• صرف ان حروف کو شامل کرنے کے لیے سبسیٹ فونٹس جو آپ استعمال کرتے ہیں (مکمل یونیکوڈ کے بجائے لاطینی سب سیٹ)
• باڈی ٹیکسٹ کے لیے سسٹم فونٹ اسٹیک پر غور کریں -- وہ صفر نیٹ ورک کی درخواستوں کے ساتھ فوری طور پر لوڈ ہو جاتے ہیں

---

نیکسٹ پینٹ کے ساتھ تعامل کو بہتر بنانا (INP)

INP صارف کے تعامل (کلک، ٹیپ، کی پریس) اور اگلے بصری اپ ڈیٹ کے درمیان تاخیر کی پیمائش کرتا ہے۔ یہ صفحہ کے سیشن کے دوران تمام تعاملات کو کیپچر کرتا ہے، بدترین کی اطلاع دیتا ہے (98ویں پرسنٹائل پر)۔ ناقص INP کا مطلب ہے کہ صفحہ سست اور غیر جوابدہ محسوس ہوتا ہے۔

طویل کاموں کو توڑنا

براؤزر کا مرکزی دھاگہ JavaScript پر عمل درآمد، ترتیب کے حساب کتاب، پینٹنگ، اور صارف کی ان پٹ پروسیسنگ کو ہینڈل کرتا ہے۔ ایک لمبا JavaScript ٹاسک (50ms سے زیادہ) ان سب کو روکتا ہے، جس سے صارفین کے تعامل کرنے پر نظر آنے والی وقفہ پیدا ہوتی ہے۔

مین تھریڈ بلاکنگ کو کم کرنے کی تکنیک:

• کوڈ اسپلٹنگ -- موجودہ صفحہ کے لیے صرف جاوا اسکرپٹ کو لوڈ کریں۔ Next.js یہ فی روٹ خود بخود کرتا ہے، لیکن صفحہ کے اندر متحرک درآمدات بہتر کنٹرول فراہم کرتے ہیں۔
• غیر اہم JavaScript کو موخر کریں -- تجزیہ، چیٹ ویجٹ، اور سوشل میڈیا ایمبیڈز کو صفحہ کے انٹرایکٹو ہونے سے پہلے لوڈ کرنے کی ضرورت نہیں ہے۔ defer یا async اوصاف استعمال کریں، یا انہیں صارف کے تعامل کے بعد لوڈ کریں۔
• ویب ورکرز -- بھاری حساب کتاب (قیمتوں کا حساب، بڑی مصنوعات کی فہرستوں کو فلٹر کرنا، انڈیکس تلاش کرنا) کو ویب ورکر تھریڈ میں منتقل کریں جو مرکزی دھاگے کو بلاک نہ کرے۔
• RequestIdleCallback -- بیکار ادوار کے دوران کم ترجیحی کام (مستقبل کے صفحات کو پہلے سے لوڈ کرنا، آف اسکرین اجزاء کو پری رینڈر کرنا)

ہائیڈریشن آپٹیمائزیشن

سرور کی طرف سے پیش کردہ ری ایکٹ ایپلی کیشنز کو "ہائیڈریٹ" کرنا چاہیے -- ایونٹ کے سننے والوں کو منسلک کرنا اور سرور کے ذریعے پیش کردہ HTML کو کلائنٹ سائیڈ اسٹیٹ کے ساتھ ملانا۔ بہت سے انٹرایکٹو اجزاء والے بڑے صفحات کے لیے، ہائیڈریشن میں 500ms یا اس سے زیادہ وقت لگ سکتا ہے۔

ہائیڈریشن کی حکمت عملی:

• منتخب ہائیڈریشن -- سسپنس باؤنڈریز کے ساتھ رد عمل 18 صفحہ کے حصوں کو آزادانہ طور پر ہائیڈریٹ کرنے کی اجازت دیتا ہے۔ ترجیح ان اجزاء پر جاتی ہے جن کے ساتھ صارف تعامل کر رہا ہے۔
• پروگریسو ہائیڈریشن -- سب سے پہلے فولڈ کے اوپر والے اجزاء کو ہائیڈریٹ کریں، جب تک صارف اسکرول نہیں کرتا ہے اس وقت تک فولڈ سے نیچے ہائیڈریشن کو موخر کریں
• رییکٹ سرور کے اجزاء -- Next.js ایپ راؤٹر کلائنٹ کو اپنی جاوا اسکرپٹ بھیجے بغیر سرور پر اجزاء فراہم کرتا ہے۔ صرف انٹرایکٹو اجزاء کو کلائنٹ سائیڈ JavaScript کی ضرورت ہوتی ہے۔

تھرڈ پارٹی اسکرپٹ مینجمنٹ

ای کامرس سائٹس پر تھرڈ پارٹی اسکرپٹس سب سے بڑی INP مجرم ہیں۔ ایک عام Shopify اسٹور 15-25 فریق ثالث اسکرپٹس لوڈ کرتا ہے جو اجتماعی طور پر 1-3MB جاوا اسکرپٹ کا اضافہ کرتے ہیں اور مین تھریڈ ٹائم کے لیے مقابلہ کرتے ہیں۔

---

مجموعی لے آؤٹ شفٹ (CLS) کی روک تھام

سی ایل ایس صفحہ زندگی کے دوران غیر متوقع ترتیب کی تبدیلیوں کی پیمائش کرتا ہے۔ ترتیب میں تبدیلی اس وقت ہوتی ہے جب کوئی نظر آنے والا عنصر صارف کے تعامل کے بغیر اپنی پوزیشن تبدیل کرتا ہے۔ صارفین کو یہ گڑبڑ نظر آتی ہے -- ایک بٹن پر کلک کرنا جو آپ تک پہنچتے ہی حرکت کرتا ہے، یا متن پڑھنا جو جب کوئی اشتہار اس کے اوپر لوڈ ہوتا ہے تو نیچے کود جاتا ہے۔

عام CLS وجوہات اور اصلاحات

بغیر طول و عرض کے تصاویر: ہر <img> عنصر میں واضح width اور height اوصاف یا CSS aspect-ratio ہونا چاہئے۔ طول و عرض کے بغیر، براؤزر تصویر کے لیے صفر جگہ مختص کرتا ہے، پھر تصویر کے لوڈ ہونے اور جگہ لینے پر مواد کو شفٹ کرتا ہے۔

متحرک طور پر انجیکشن مواد: پروموشنل بینرز، کوکی کنسنٹ بارز، اور نوٹیفکیشن ٹوسٹس جو موجودہ مواد کے اوپر انجیکشن لگاتے ہیں تبدیلیوں کا سبب بنتے ہیں۔ ان عناصر کے لیے جگہ ریزرو کریں یا ان کو اس طرح سے انجیکشن کریں جس سے مواد نیچے نہ جائے (فکسڈ پوزیشننگ، اوورلیز)۔

ویب فونٹس ٹیکسٹ ری فلو کا باعث بن رہے ہیں: جب ایک حسب ضرورت فونٹ لوڈ ہوتا ہے اور فال بیک فونٹ کی جگہ لے لیتا ہے، تو متن مختلف کریکٹر چوڑائی کی وجہ سے دوبارہ بہہ سکتا ہے۔ احتیاط سے مماثل فال بیک فونٹ میٹرکس کے ساتھ font-display: optional (اگر آپ کبھی کبھار فال بیک ڈسپلے قبول کرتے ہیں) یا font-display: swap استعمال کریں۔

دیر سے لوڈ ہونے والے اشتہارات اور سرایت: CSS min-height یا aspect-ratio کا استعمال کرتے ہوئے اشتھاراتی سلاٹس اور ایمبیڈز کے لیے جگہ محفوظ کریں۔ یہاں تک کہ اگر اشتہار کا سرور سست ہے، لے آؤٹ مستحکم رہتا ہے۔

صفحہ کی قسم کے لحاظ سے CLS بجٹ

---

CWV کی پیمائش اور نگرانی

لیب ٹولز (مصنوعی ٹیسٹنگ)

• لائٹ ہاؤس -- کروم ڈیو ٹولز میں مربوط، اصلاحی تجاویز کے ساتھ CWV اسکور فراہم کرتا ہے
• WebPageTest -- فلم اسٹریپ ویو کے ساتھ آبشار کا تفصیلی تجزیہ جس میں ظاہر ہوتا ہے کہ جب ہر عنصر رینڈر ہوتا ہے
• PageSpeed Insights -- مکمل تصویر کے لیے لیب ڈیٹا (لائٹ ہاؤس) کو فیلڈ ڈیٹا (CrUX) کے ساتھ جوڑتا ہے۔

فیلڈ ڈیٹا (اصلی صارف کی نگرانی)

کنٹرول شدہ حالات میں لیب ٹولز ٹیسٹ۔ فیلڈ ڈیٹا مختلف آلات، نیٹ ورکس اور حالات میں صارف کے حقیقی تجربے کو حاصل کرتا ہے۔

• Chrome صارف کے تجربے کی رپورٹ (CrUX) -- حقیقی Chrome صارفین کا مجموعی CWV ڈیٹا، PageSpeed Insights اور BigQuery میں دستیاب ہے۔
• ویب وائٹلز لائبریری -- جاوا اسکرپٹ لائبریری جو پیداوار میں CWV کی پیمائش کرتی ہے اور آپ کے تجزیات کو رپورٹ کرتی ہے
• RUM فراہم کنندگان -- Datadog RUM، SpeedCurve، اور Sentry Performance کیپچر CWV بزنس میٹرکس کے ساتھ

مسلسل نگرانی

خودکار CWV مانیٹرنگ سیٹ اپ کریں جو اسکور کے گرنے پر الرٹ کرتا ہے:

1. تعیناتی سے پہلے رجعت کو پکڑنے کے لیے اپنی CI/CD پائپ لائن میں Lighthouse CI چلائیں
2. اپنے سب سے اہم صفحات کے رجحانات کے لیے ماہانہ CrUX ڈیٹا کی نگرانی کریں۔
3. CWV سکور کو کاروباری میٹرکس کے ساتھ جوڑنے کے لیے RUM کا استعمال کریں (تبادلوں کی شرح، باؤنس ریٹ، فی سیشن آمدنی)
4. کاروباری اثرات کو براہ راست پیمائش کرنے کے لیے A/B ٹیسٹ کی کارکردگی میں تبدیلیاں

جامع نگرانی کے سیٹ اپ کے لیے، ہماری مشاہدہ اور اے پی ایم گائیڈ دیکھیں۔

---

ای کامرس کے لیے مخصوص آپٹیمائزیشن چیک لسٹ

اپنی ای کامرس سائٹ پر CWV کو منظم طریقے سے بہتر بنانے کے لیے اس چیک لسٹ کا استعمال کریں:

---

اکثر پوچھے گئے سوالات

کیا کور ویب وائٹلز دراصل گوگل کی درجہ بندی کو متاثر کرتے ہیں؟

جی ہاں گوگل نے صفحہ تجربے کی تازہ کاری میں درجہ بندی کے سگنل کے طور پر کور ویب وائٹلز کی تصدیق کی۔ جبکہ مواد کی مطابقت غالب عنصر بنی ہوئی ہے، CWV اسی طرح کے مواد کے معیار والے صفحات کے درمیان ٹائی بریکر کے طور پر کام کرتا ہے۔ مسابقتی ای کامرس کلیدی الفاظ کے لیے، اچھے CWV سکور قابل پیمائش درجہ بندی کا فائدہ فراہم کرتے ہیں۔

میں سرور کنفیگریشن تک رسائی کے بغیر Shopify پر CWV کو کیسے ٹھیک کروں؟

آپ جس چیز کو کنٹرول کر سکتے ہیں اس پر توجہ مرکوز کریں: تصاویر کو بہتر بنائیں (Shopify کی بلٹ ان امیج آپٹیمائزیشن یا Crush.pics جیسی ایپس کا استعمال کریں)، انسٹال کردہ ایپس کو کم سے کم کریں (ہر ایک میں JavaScript شامل کرتا ہے)، ہلکا پھلکا تھیم استعمال کریں، سست لوڈنگ کے ساتھ تھرڈ پارٹی اسکرپٹس کو موخر کریں، اور تمام تصاویر میں واضح جہتیں شامل کریں۔ اعلی درجے کی اصلاح کے لیے، ہماری Shopify اسپیڈ آپٹیمائزیشن سروسز دیکھیں۔

کیا مجھے LCP، INP، یا CLS کو ترجیح دینی چاہیے؟

پہلے بدترین اسکور کے ساتھ میٹرک کو ترجیح دیں۔ اگر سب غریب ہیں تو LCP سے شروع کریں کیونکہ اس کا سب سے زیادہ براہ راست اثر صارف کے تاثرات اور باؤنس ریٹ پر پڑتا ہے۔ LCP میں بہتری (سرور آپٹیمائزیشن، امیج آپٹیمائزیشن) اکثر صفحہ کے مجموعی وزن کو کم کرکے INP کو بہتر بناتی ہے۔

SEO کو متاثر کرنے میں CWV کی بہتری میں کتنا وقت لگتا ہے؟

گوگل رینکنگ سگنلز کے لیے 28 دن کا رولنگ CrUX ڈیٹا استعمال کرتا ہے۔ بہتریوں کو تعینات کرنے کے بعد، CrUX ڈیٹا میں تبدیلیوں کے ظاہر ہونے سے 4-6 ہفتے پہلے اور درجہ بندی میں تبدیلیاں نظر آنے سے پہلے ممکنہ طور پر زیادہ وقت کی توقع کریں۔ پیش رفت کو ٹریک کرنے کے لیے Search Console میں CrUX ڈیٹا کی نگرانی کریں۔

مسابقتی ای کامرس کے لیے مجھے کون سے CWV اسکورز کو ہدف بنانا چاہیے؟

"اچھی" رینج میں تینوں میٹرکس کو نشانہ بنائیں: LCP 2.5 سیکنڈ سے کم، INP 200ms سے کم، CLS 0.1 سے کم۔ مسابقتی زمروں کے لیے، اعلی درجے کی کارکردگی کا مقصد: 1.5 سیکنڈ سے کم LCP، 100ms سے کم INP، 0.05 سے کم CLS۔ یہ اسکورز آپ کو ای کامرس سائٹس کے 80-90% سے آگے رکھتے ہیں۔

---

آگے کیا ہے۔

اپنے سب سے زیادہ ٹریفک والے صفحات پر PageSpeed ​​Insights کے ساتھ اپنے موجودہ کور ویب وائٹلز کی پیمائش کرکے شروع کریں۔ سب سے زیادہ اسکور کرنے والے میٹرک کی شناخت کریں اور اس گائیڈ میں اصلاح کی تکنیک کے ذریعے کام کریں۔ چھوٹی بہتری کا مرکب -- 100ms INP کی کمی اور 0.05 CLS بہتری کے ساتھ مل کر 500ms LCP بہتری درجہ بندی اور تبادلوں کی شرح دونوں میں پیمائش کے ساتھ بہتری لا سکتی ہے۔

مکمل کارکردگی کی انجینئرنگ تصویر کے لیے، اپنے کاروباری پلیٹ فارم کو اسکیل کرنے پر ہماری ستون گائیڈ دیکھیں۔ آپ کے CWV اسکورز پر دباؤ ڈالنے والے ٹریفک اضافے کی تیاری کے لیے، ہماری بلیک فرائیڈے کے لیے لوڈ ٹیسٹنگ گائیڈ پڑھیں۔

ECOSIRE ای کامرس پلیٹ فارمز کے لیے Shopify اسپیڈ آپٹیمائزیشن اور کور ویب وائٹلز آڈٹ فراہم کرتا ہے۔ ہماری کارکردگی ٹیم سے رابطہ کریں ایک جامع CWV تجزیہ کے لیے۔

---

شائع کردہ بذریعہ ECOSIRE — کاروباروں کو Odoo ERP، Shopify eCommerce، اور OpenClaw AI میں AI سے چلنے والے حل کے ساتھ پیمانے میں مدد کرنا۔