سست LCP امیج لوڈنگ کا مسئلہ کیسے حل کریں؟

سست Largest Contentful Paint (LCP) تصویر کو 4 مراحل میں درست کریں: اسے اس کے ڈسپلے سائز کے مطابق ری سائز کریں، اسے WebP یا AVIF میں تبدیل کریں، اسے پری لوڈ کریں، اور fetchpriority کو high پر سیٹ کریں۔ پہلے 2 مراحل زیادہ تر بہتری لاتے ہیں اور ان کے لیے آپ کے صفحے کے مارک اپ میں کسی تبدیلی کی ضرورت نہیں ہوتی۔

زیادہ تر صفحات پر سب سے بڑا نظر آنے والا عنصر (largest contentful paint element) ایک واحد ہیرو امیج ہوتی ہے، جس کا مطلب ہے کہ LCP کا تعلق دراصل آپ کی پوری سائٹ کے بجائے صرف ایک فائل سے ہے۔ اس ایک فائل کو درست کرنا عام طور پر دستیاب کسی بھی دوسری آپٹیمائزیشن سے زیادہ پیمائش کو بہتر بناتا ہے۔

LCP کیا ناپتا ہے

LCP یہ ریکارڈ کرتا ہے کہ سب سے بڑے نظر آنے والے عنصر کو رینڈر ہونے میں کتنا وقت لگتا ہے، جس کی پیمائش صفحہ لوڈ ہونا شروع ہونے کے وقت سے کی جاتی ہے۔ Google 2.5 سیکنڈ یا اس سے کم کو اچھا، 2.5 سے 4 سیکنڈ کو بہتری کی ضرورت، اور 4 سیکنڈ سے زیادہ کو خراب قرار دیتا ہے۔

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

ذمہ دار عنصر کو تلاش کرنا

Lighthouse چلائیں اور Largest Contentful Paint عنصر کی انٹری کو پڑھیں، جو اس درست عنصر کا نام بتاتی ہے جس کی پیمائش کی جا رہی ہے۔ اندازے لگانے سے وقت ضائع ہوتا ہے، کیونکہ اکثر عنصر وہ نہیں ہوتا جس کا لوگ گمان کرتے ہیں۔

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

تصویر کو اثر کے لحاظ سے درست کریں

کسی تصویر پر LCP کو بہتر بنانے کے لیے، ترتیب وار ان 6 مراحل پر کام کریں۔

1. تصویر کو اس کے سب سے بڑے سائز پر ری سائز کریں جس پر وہ کبھی ڈسپلے ہوگی، اور ہائی ڈینسٹی اسکرینوں کے لیے اسے دوگنا کریں۔
2. اسے WebP میں تبدیل کریں، یا اگر تصویر بڑی اور فوٹوگرافک ہے تو AVIF میں تبدیل کریں۔
3. ہیرو امیج کے لیے فائل کا سائز 200 KB سے کم رکھیں، جو زیادہ تر ڈیزائنز پر فل وڈتھ میں حاصل کرنا ممکن ہے۔
4. width اور height کے اوٹریبیوٹس شامل کریں تاکہ براؤزر جگہ مخصوص کر لے اور لے آؤٹ شفٹ کا مسئلہ نہ ہو۔
5. صفحے کے ہیڈ (head) میں تصویر کو پری لوڈ کریں تاکہ براؤزر اسے فوری طور پر حاصل کرنا شروع کر دے۔
6. امیج عنصر پر fetchpriority کو high پر سیٹ کریں، جو براؤزر کو بتاتا ہے کہ یہ فائل سب سے زیادہ اہم ہے۔

مراحل 1 اور 2 عام طور پر زیادہ تر بہتری لاتے ہیں، اور یہ وہ 2 مراحل ہیں جن میں صفحے کے مارک اپ کو چھونے کی بالکل ضرورت نہیں ہوتی۔

ری سائز کرنا کمپریس کرنے سے بہتر کیوں ہے

ڈائمینشنز فائل کے سائز کو سب سے زیادہ کنٹرول کرتی ہیں، اس لیے ری سائز کرنا کسی بھی کوالٹی سیٹنگ سے زیادہ وزن کم کرتا ہے۔ ایک 4000 پکسل کی تصویر جسے 1200 پکسلز پر دکھایا جانا ہے، اس میں صفحے کی ضرورت سے 11 گنا زیادہ پکسل ڈیٹا ہوتا ہے۔

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

Preload اور fetchpriority

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

صرف ایک تصویر کو پری لوڈ کریں۔ کئی تصاویر کو پری لوڈ کرنے سے فائدہ ختم ہو جاتا ہے، کیونکہ براؤزر پھر اپنی توجہ اسی طرح تقسیم کر دیتا ہے جیسے وہ عام طور پر کرتا۔ fetchpriority کو high پر سیٹ کرنے سے کم مارک اپ کے ساتھ ایسا ہی نتیجہ حاصل ہوتا ہے اور یہ اکثر ابتدائی HTML میں موجود تصویر کے لیے اپنے طور پر ہی کافی ہوتا ہے۔

وہ غلطیاں جو LCP کو مزید خراب کرتی ہیں

• ہیرو امیج کو لیزی لوڈ (lazy load) کرنا۔ لیزی لوڈنگ اسی فائل میں تاخیر کرتی ہے جسے آپ سب سے پہلے لوڈ کرنا چاہتے ہیں۔ اسے صرف اسکرول کے بعد نظر آنے والے حصے پر لاگو کریں۔
• JavaScript کے ذریعے ہیرو امیج لوڈ کرنا۔ اسکرپٹ کے ذریعے شامل کی گئی تصویر تب تک ڈاؤن لوڈ ہونا شروع نہیں ہو سکتی جب تک اسکرپٹ رن نہ ہو۔
• CSS بیک گراؤنڈ امیج کا استعمال۔ بیک گراؤنڈ امیجز کا پتہ img عناصر کے مقابلے میں دیر سے چلتا ہے اور ان کو آسانی سے ترجیح نہیں دی جا سکتی۔
• کئی تصاویر کو پری لوڈ کرنا۔ متصادم ترجیحات فائدے کو مکمل طور پر ختم کر دیتی ہیں۔
• width اور height کو چھوڑ دینا۔ لے آؤٹ شفٹ ایک الگ پیمائش کو نقصان پہنچاتا ہے جبکہ یہ والی بہتر ہو رہی ہوتی ہے۔

جب LCP عنصر ٹیکسٹ ہو

ٹیکسٹ پر مبنی LCP میں عام طور پر خود ٹیکسٹ کے بجائے ویب فونٹس کی وجہ سے تاخیر ہوتی ہے۔ براؤزر کے پاس الفاظ تو فوری طور پر ہوتے ہیں لیکن وہ انہیں ظاہر کرنے کے لیے فونٹ فائل کا انتظار کرتا ہے۔

font-display کو swap پر سیٹ کریں تاکہ ٹیکسٹ متبادل فونٹ میں رینڈر ہو جائے اور ویب فونٹ آنے پر تبدیل ہو جائے۔ صرف ایک سب سے اہم فونٹ فائل کو پری لوڈ کریں، اور فونٹ کو ان حروف تک محدود (subset) کریں جو آپ کے صفحات پر واقعی استعمال ہوتے ہیں، جس سے اکثر فونٹ 200 KB سے کم ہو کر 30 KB سے بھی کم ہو جاتا ہے۔ اپنے ڈومین سے فونٹس پیش کرنا کسی تھرڈ پارٹی سے اضافی کنکشن کی ضرورت کو ختم کرتا ہے۔

سرور کے جواب کا وقت حد مقرر کرتا ہے

LCP آپ کے سرور کی طرف سے پہلی بائٹ واپس کرنے میں لگنے والے وقت سے تیز نہیں ہو سکتا، اس لیے ایک سست سرور ہر دوسری بہتری کو محدود کر دیتا ہے۔ پہلی بائٹ کے لیے 600 ملی سیکنڈ سے کم کا ہدف رکھیں۔

تصاویر کو آپٹیمائز کرنے سے پہلے اس عدد کو چیک کریں، کیونکہ 2 سیکنڈ کا سرور رسپانس 2.5 سیکنڈ کے LCP ہدف کو ناممکن بنا دیتا ہے چاہے آپ فائلوں کے ساتھ کچھ بھی کریں۔ کیشنگ، تیز ہوسٹ یا کنٹینٹ ڈیلیوری نیٹ ورک (CDN) اس مسئلے کو حل کرتے ہیں۔ اس کے بعد امیج پر کام کرنا باقی ماندہ چیزوں کو بہتر بناتا ہے نہ کہ کسی دوسری جگہ سے لگائی گئی حد سے لڑتا ہے۔

تھرڈ پارٹی اسکرپٹس بھی تصویر میں تاخیر کرتی ہیں

اینالیٹکس، کانسنٹ بینرز، چیٹ وجیٹس اور اشتہاری اسکرپٹس بینڈوتھ اور پروسیسنگ ٹائم کے لیے آپ کی ہیرو امیج کا مقابلہ کرتے ہیں۔ ایک بہترین طور پر آپٹیمائزڈ تصویر بھی دیر سے رینڈر ہوتی ہے جب اس سے پہلے 12 اسکرپٹس لوڈ ہو رہی ہوں۔

کانسنٹ بینرز سب سے زیادہ نقصان دہ ہیں، کیونکہ بہت سے بینرز رینڈرنگ کو تب تک روکتے ہیں جب تک کہ وزیٹر انتخاب نہ کر لے۔ تھرڈ پارٹی اسکرپٹس کو defer یا async اوٹریبیوٹ کے ساتھ لوڈ کریں تاکہ وہ صفحے کو نہ روکیں، اور آڈٹ کریں کہ کتنے اسکرپٹس کی واقعی ضرورت ہے۔ 3 غیر استعمال شدہ ٹریکنگ اسکرپٹس کو ہٹانا اکثر امیج کمپریشن کے ایک اور راؤنڈ سے زیادہ LCP کو بہتر بناتا ہے۔

تبدیلی کا صحیح طریقے سے ٹیسٹ کرنا

ایکسٹینشنز کے بغیر پرائیویٹ ونڈو میں ٹیسٹ کریں، اور کسی ایک نتیجے پر بھروسہ کرنے کے بجائے پیمائش کو 3 بار چلائیں۔ اسکورز مختلف رنز کے درمیان نمایاں فرق سے بدلتے ہیں۔

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

درستگی کے بعد LCP کو تیز رکھنا

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

ہیرو امیجز کے لیے زیادہ سے زیادہ چوڑائی اور زیادہ سے زیادہ فائل سائز پر اتفاق کریں، اسے لکھ لیں، اور اسے ہر نئے صفحے پر لاگو کریں۔ 1920 پکسلز چوڑائی اور 200 KB سے کم کا اصول چیک کرنا آسان ہے اور یہ تقریباً ہر ڈیزائن کا احاطہ کرتا ہے۔ جہاں کئی لوگ پبلش کرتے ہوں، وہاں تحریری اصول تکنیک سے زیادہ اہمیت رکھتا ہے، کیونکہ پیمائش بہترین صفحے کے بجائے سب سے خراب صفحے کی عکاسی کرتی ہے۔

ایک ہی بار میں ہیرو امیجز تیار کرنا

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

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