मैंने 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 करें।
यह सेटअप आपकी लोडिंग स्पीड में सुधार करता है और आपके क्रिटिकल पाथ से थर्ड पार्टी को हटा देता है।
क्या आप अभी भी प्रोडक्शन के लिए Google CDN का उपयोग करते हैं? मुझे कमेंट्स में बताएं कि क्यों।