میں نے Google Fonts CDN کا استعمال بند کر دیا
Google CDN سے فونٹس لوڈ کرنے سے آپ کی سائٹ کی رفتار سست ہو جاتی ہے۔
میں اپنے ہیڈر میں ایک ہی لنک استعمال کرتا تھا۔ یہ آسان لگتا تھا۔ پھر میں نے اپنے Lighthouse اسکورز چیک کیے۔
رپورٹ میں ایک مسئلہ سامنے آیا۔ براؤزر کو Google کے سرورز کے ساتھ اضافی کنکشنز بنانے پڑتے تھے۔ اسے DNS lookups اور TLS handshakes کرنے پڑتے تھے۔ اس کی وجہ سے تاخیر ہوتی تھی۔ ایک سست موبائل کنکشن پر، ٹیکسٹ بہت دیر تک نظر نہیں آتا تھا۔
میں نے self-hosting پر منتقل ہونے کا فیصلہ کیا۔ اس میں صرف ایک دوپہر لگی۔ اب میں ہر پروجیکٹ کے لیے ایسا ہی کرتا ہوں۔
یہ رہا وہ سیٹ اپ جس کی آپ کو ضرورت ہے:
- WOFF2 فارمیٹ استعمال کریں۔ یہ WOFF سے 30% چھوٹا ہے۔ اب آپ کو .ttf یا .eot جیسے پرانے فارمیٹس کی ضرورت نہیں ہے۔
- اپنے فونٹس کو کنورٹ کریں۔ .ttf فائلوں کو .woff2 میں کمپریس کرنے کے لیے
fonttoolsلائبریری استعمال کریں۔ font-display: swapپراپرٹی استعمال کریں۔ یہ فوری طور پر fallback ٹیکسٹ دکھاتا ہے۔ یہ فونٹس لوڈ ہونے کے دوران ٹیکسٹ کے غائب رہنے کے مسئلے کو روکتا ہے۔- اہم فونٹس کو preload کریں۔ 'above the fold' استعمال ہونے والے فونٹس کے لیے اپنے head میں ایک preload لنک شامل کریں۔
- ہمیشہ
crossoriginایٹریبیوٹ استعمال کریں۔ اگر آپ اسے بھول جائیں گے، تو براؤزر فونٹ کو دو بار ڈاؤن لوڈ کرے گا۔ - اپنے فونٹس کو subset کریں۔ اگر آپ کی سائٹ انگریزی استعمال کرتی ہے، تو غیر ضروری glyphs کو ہٹا دیں۔ اس سے فائل کا سائز 70% تک کم ہو سکتا ہے۔
- اپنی فائلوں کو cache کریں۔ فونٹس کو براؤزر میں رکھنے کے لیے ایک طویل
cache-controlہیڈر استعمال کریں۔
ورک فلو سادہ ہے:
WOFF2 میں کنورٹ کریں۔ swap کے ساتھ @font-face استعمال کریں۔ crossorigin کے ساتھ مین فونٹ کو preload کریں۔ فائل کو cache کریں۔
یہ سیٹ اپ آپ کی لوڈنگ اسپیڈ کو بہتر بناتا ہے اور آپ کے critical path سے تھرڈ پارٹی کو ہٹا دیتا ہے۔
کیا آپ اب بھی پروڈکشن کے لیے Google CDN استعمال کرتے ہیں؟ مجھے کمنٹس میں بتائیں۔