ایک بہترین Lighthouse اسکور کے پیچھے موجود ہر آپٹیمائزیشن

میں اپنی سائٹ پر مسلسل Lighthouse چلاتا رہتا ہوں۔ یہ ہر لوکل رن (local run) پر 100 رہتا ہے اور Vercel کے Real Experience Score میں بھی 100 رہتا ہے۔

یہ اسکورز کسی عام چیک لسٹ سے حاصل نہیں ہوتے۔ میں کام کو براؤزر سے ہٹا کر بلڈ اسٹیج (build stage) پر منتقل کر کے انہیں حاصل کرتا ہوں۔

میں یہ بالکل اسی طرح کرتا ہوں۔

کام کو بلڈ ٹائم (build time) پر منتقل کریں

زیادہ تر گائیڈز آپ کو ہر چیز کو lazy-load کرنے کا مشورہ دیتی ہیں۔ میں prerender کرنے کو ترجیح دیتا ہوں۔ میں prerendering فعال (enabled) حالت میں TanStack Start استعمال کرتا ہوں۔

یہ بلڈ کے دوران پوری سائٹ کو static HTML میں تبدیل کر دیتا ہے۔ براؤزر کو صرف پہلا صفحہ دکھانے کے لیے بھاری JavaScript چلانے کی ضرورت نہیں پڑتی۔ جب صارف انٹر (enter) دباتا ہے تو HTML پہلے سے ہی موجود ہوتا ہے۔

پیچیدہ لاجک (logic) کو پہلے سے کیلکولیٹ کریں

میرے ہوم پیج پر 5,000 ڈاٹس کے ساتھ ایک ورلڈ میپ ہے۔ عام طور پر، ایک لائبریری GeoJSON کو پارس (parse) کرے گی اور مین تھریڈ (main thread) پر ریاضیاتی حساب کتاب کرے گی۔ یہ صفحے کو 1,000ms کے لیے بلاک کر دیتا ہے۔

میں نے اس ریاضیاتی حساب کتاب کو بلڈ اسکرپٹ (build script) پر منتقل کر کے اس کا حل نکالا۔

  • میں تمام 5,000 ڈاٹس کے لیے ایک ہی SVG path اسٹرنگ تیار کرتا ہوں۔
  • براؤزر کے لیے 5,000 الگ الگ سرکلز کے مقابلے میں ایک ہی پاتھ کو رینڈر (render) کرنا بہت زیادہ تیز ہے۔
  • میں کوآرڈینیٹ لک اپ ٹیبلز (coordinate lookup tables) کو پہلے سے کیلکولیٹ کر لیتا ہوں تاکہ رن ٹائم (runtime) پر براؤزر کو کوئی ریاضیاتی حساب نہ کرنا پڑے۔

1,000ms کی تاخیر ایک ہی بار میں ہونے والے فوری پینٹ (paint) میں بدل جاتی ہے۔

فونٹ لوڈنگ کو آپٹیمائز کریں

میں اپنے بنیادی فونٹس کے لیے rel="preload" استعمال کرتا ہوں۔

ایک عام غلطی crossOrigin ایٹریبیوٹ کو بھول جانا ہے۔ اگر آپ اسے چھوڑ دیتے ہیں، تو براؤزر فونٹ کو دو بار فیچ (fetch) کرتا ہے۔ یہ آپ کے Largest Contentful Paint (LCP) کو خراب کر دیتا ہے۔ میں صرف ان تین فونٹس کو پری لوڈ (preload) کرتا ہوں جو 'above the fold' استعمال ہوتے ہیں۔

اینیمیشن کے لیے صحیح ٹولز استعمال کریں

میں اپنے میپ مارکرز پر سادہ پلس (pulse) اینیمیشنز کے لیے SMIL استعمال کرتا ہوں۔ یہ اینیمیشن لوپ چلانے کے لیے React state استعمال کرنے سے زیادہ سستا (efficient) ہے۔ یہ براؤزر کو کام کو کمپوزٹر تھریڈ (compositor thread) پر سنبھالنے کی اجازت دیتا ہے۔

پیچیدہ پاتھ کے لیے، میں motion استعمال کرتا ہوں۔ میں اسے سادہ رکھتا ہوں۔ میں ماؤنٹ (mount) پر صرف ایک بار اینیمیشن کرتا ہوں اور اسکرول پوزیشنز (scroll positions) کو سننے سے گریز کرتا ہوں۔

ویکٹرز اور WebP کا استعمال کریں

اگر یہ کوئی لوگو یا شکل ہے، تو SVG استعمال کریں۔ اگر یہ کوئی تصویر ہے، تو WebP استعمال کریں۔ اس سے فائل کا سائز کم رہتا ہے اور لے آؤٹ شفٹس (layout shifts) سے بچا جا سکتا ہے۔

اوور انجینئرنگ (over-engineering) سے بچیں

میں امیج CDN استعمال نہیں کرتا۔ میں پیچیدہ کوڈ سپلٹنگ (code-splitting) بھی استعمال نہیں کرتا۔ میری سائٹ چھوٹی ہے، اس لیے روٹ لیول سپلٹنگ (route-level splitting) ہی کافی ہے۔

ایک مکمل اسکور محض دکھاوے کی پیمائش (vanity metric) ہو سکتا ہے۔ اصل مقصد اپنی کارکردگی (performance) کو ناپنا اور زیادہ سے زیادہ کام صارف کے ڈیوائس سے دور منتقل کرنا ہے۔

میرا پورٹ فولیو: brodin.dev

سورس کوڈ: github.com/NathanBrodin/Portfolio

TanStack Start prerendering: tanstack.com/start

Paper Shaders: shaders.paper.design

مکمل پوسٹ: https://dev.to/nathan-brodin/every-optimization-behind-a-perfect-lighthouse-score-283n