🧚🏽 🚧 🈲 क्या मुझे अपने सर्वर पर Google फ़ॉन्ट्स संग्रहीत करना चाहिए? 🤣 🤳🏻 📉

पिछले कुछ हफ्तों में, काम पर और तीसरे पक्ष की परियोजनाओं में संयोग से, मैंने वेब फोंट के बारे में बहुत कुछ सीखा है, साथ ही साथ विशेष रूप से Google फोंट के बारे में भी बहुत कुछ सीखा है। इसके लिए धन्यवाद, मैं एक प्रश्न का अधिक विस्तृत उत्तर दे सकता हूं जो मेरे लिए अतीत में सरल लग रहा था: क्या आपको अपने सर्वर पर Google फ़ॉन्ट्स संग्रहीत करना चाहिए?

निष्पक्ष रूप से कहूं तो मैं मानता हूं कि फोंट मेरे लिए नहीं हैं। मैं अधिक व्यावहारिक दृष्टिकोण पसंद करता हूं और डिजाइन पर ध्यान केंद्रित नहीं करता (इस साइट को देखें और सुनिश्चित करें कि यह है) और इससे पहले मुझे गैर-मानक फोंट का उपयोग करने की आवश्यकता महसूस नहीं हुई थी। बेशक, वे पाठ को थोड़ा अच्छा और "ब्रांड" लगते हैं। लेकिन मुख्य पाठ के लिए उनमें बहुत कम अर्थ है। मैंने कभी भी लेख (या इसकी सामग्री से संबंधित अलग) का मूल्यांकन नहीं किया, सिर्फ इसलिए कि इसे प्रस्तुत करने के लिए एक सुंदर फ़ॉन्ट का उपयोग किया गया था। हालांकि, मुझे प्रदर्शन और पृष्ठ लोडिंग गति पर अतिरिक्त फोंट के नकारात्मक प्रभाव के बारे में पूरी तरह से पता था, इसलिए शायद इस वजह से मैं पक्षपाती हूं।

हालांकि, कई लोग मुझसे असहमत हो सकते हैं, और फोंट, चाहे वे मेरे लिए व्यक्तिगत रूप से महत्वपूर्ण हों या नहीं, नियमित रूप से कई अन्य डेवलपर्स द्वारा उपयोग किए जाते हैं, और अक्सर उनके पास बस कोई विकल्प नहीं होता है। आइए देखें कि साइट की गति में कमी न करने के लिए क्या किया जा सकता है, और डिजाइनरों को खुश छोड़ दें।

स्व-मेजबान बनाम बाहरी संसाधन

कुछ साल पहले साझा संसाधनों को जोड़ने के लिए सीडीएन का उपयोग करना सामान्य माना जाता था (उदाहरण के लिए, code.jquery.com के साथ jQuery - और हाँ, वे अभी भी इसका बहुत उपयोग करते हैं )। स्पष्ट करने के लिए, यहाँ CDN से मेरा मतलब है कि किसी और के डोमेन से संसाधन लोड करना, न कि आपका स्वयं का CDN।

कारण यह था कि ब्राउज़र प्रत्येक डोमेन (आमतौर पर 6 कनेक्शन) पर कनेक्शन की संख्या को सीमित करता था, इसलिए किसी अन्य डोमेन का उपयोग करके आपको अन्य 6 कनेक्शन दिए गए। यह अतीत में सच हो सकता है (विशेषकर जब प्रतिबंध <6 डोमेन था) और HTTPS के आदर्श बनने से पहले , कनेक्शन की लागत में काफी वृद्धि हुई है। इसके अलावा, HTTP / 2वास्तव में एक कनेक्शन (ज्यादातर!) का उपयोग करने से लाभ होता है, इसलिए अन्य डोमेन का उपयोग अक्सर अधिग्रहण के बजाय प्रदर्शन में नुकसान होता है।

इसे प्राप्त करने का एक अन्य तरीका मुख्य डोमेन को एक या अधिक तकनीकी उप डोमेन (उदाहरण के लिए, properties.example.com) के साथ जोड़कर था, इस स्थिति में आपके मुख्य पृष्ठ पर फोंट दिखाई नहीं देते हैं, जहाँ से आपका वेब पेज लोड होता है। फिर भी, इस विधि में समान कनेक्शन समस्याएं हैं, इसलिए इसे प्रदर्शन लाभ नहीं कहा जा सकता है, भले ही यह एक बार हो।

एक सार्वजनिक CDN का एक और लाभ यह उच्च संभावना थी कि आगंतुकों के पास पहले से ही कैश में सशर्त jQuery का यह संस्करण था। लेकिन, फिर से, मुझे विश्वास है कि यह बहुत अधिक है। बहुत सारे पुस्तकालय और उनके संस्करण हैं, औरब्राउज़र कैश जितना प्रतीत हो सकता है, उससे छोटा है, इसलिए इस तरह के मैच की संभावना बहुत कम है। इसके अलावा, सफारी गोपनीयता कारणों (डबल-कीड कैश) के लिए विज़िट किए गए प्रत्येक डोमेन के लिए एक अद्वितीय HTTP कैश का उपयोग करता है , और क्रोम भी जल्द ही इस फ़ंक्शन को पेश करेंगे । इस प्रकार, इसके बारे में बहस करने के लिए कुछ और नहीं है।

यह विषय गोपनीयता पर तीसरे पक्ष के सीडीएन के प्रभाव के बारे में बातचीत में आसानी से बदल जाता है। आपको पता नहीं है कि वे आपके उपयोगकर्ताओं को कैसे और क्यों ट्रैक कर रहे हैं, जो कि स्व-होस्ट किए गए समाधान के साथ नहीं हो सकता है। और कानून में हालिया नवाचार कई साइटों को स्पष्ट रूप से साइट पर इस्तेमाल होने वाले सभी कुकीज़ को सूचीबद्ध करने के लिए उपकृत करते हैं। तृतीय-पक्ष CDN का उपयोग करते समय सबसे आसान काम नहीं है।

लंबे समय से, मुझे विश्वास है कि तृतीय-पक्ष CDN या यहां तक कि आपके स्वयं के डोमेन की शार्पिंग भी वादा किए गए लाभ से बहुत दूर है। बहुत बार आप ऐसी साइटें खोज सकते हैं जहां मुख्य डोमेन केवल index.html वितरित करता है, और फिर बहुत समय बर्बाद होता है नए कनेक्शन स्थापित करने में बर्बाद होता है ।

यह तृतीय-पक्ष साइटों से संसाधन डाउनलोड करने के सुरक्षा निहितार्थ का उल्लेख नहीं है। हां, एसआरआई है , लेकिन यह अप्रत्याशित समस्याएं पैदा कर सकता है , और मैं ईमानदारी से बात नहीं देख रहा हूं। यदि यह एक स्थिर संसाधन है (जहां आप SRI का उपयोग कर सकते हैं), तो इसे स्थानीय रूप से संग्रहीत करें, और यदि यह स्थिर नहीं है (क्योंकि सामग्री बदल सकती है), तो आप SRI का उपयोग नहीं कर सकते।

साथ ही, तृतीय-पक्ष स्रोतों से संसाधनों का उपयोग धमकी देता है कि वे विफलता (SPOF) का एक बिंदु बन जाएंगे और आपकी साइट को अक्षम कर देंगे। यह एक से अधिक बार हुआ है , और हालांकि यह संभव नहीं लग रहा है कि Google फ़ॉन्ट्स गिर जाएंगे, इसे कंपनी के परदे के पीछे या पूरे देशों द्वारा अवरुद्ध किया जा सकता है ।

सामान्य तौर पर, अधिक से अधिक लोग अपने स्थिर संसाधनों को घर पर रखने की सलाह दे रहे हैं , आदर्श रूप से उस डोमेन पर जिससे आप वेब पेज वितरित कर रहे हैं। फ़ॉन्ट स्थिर संसाधन हैं, इसलिए यही बात उन पर लागू होती है, है ना? खैर, यह पता चला है कि सब कुछ इतना सरल नहीं है, क्योंकि फोंट की अपनी ख़ासियत और अनुकूलन तकनीक है, जो स्थानीय भंडारण को थोड़ा अधिक जटिल बना सकती है ...

Google फ़ॉन्ट्स और वे कैसे काम करते हैं

यदि आप फोंट पसंद करते हैं तो Google फ़ॉन्ट्स एक भयानक संसाधन है। 977 मुफ्त फोंट जिसे कोई भी मुफ्त में उपयोग कर सकता है। वाणिज्यिक फ़ॉन्ट अक्सर हास्यास्पद रूप से महंगे होते हैं और आमतौर पर बेचे जाने के बजाय लाइसेंस प्राप्त होते हैं, अर्थात, पृष्ठ दृश्य की अपेक्षित संख्या के आधार पर शुल्क लिया जाता है। इसलिए, एक संग्रह में फोंट का उपयोग करने के लिए बहुत सारे मुफ्त और इतना आसान होना बहुत उपयोगी है।

लेकिन यह बिलकुल भी नहीं है। Google फ़ॉन्‍ट, साइटों के लिए कई रिसोर्स प्रोवाइडर की तरह (ऊपर jQuery का उदाहरण देखें), सभी सर्वर के लिए सीधे उपयोग करने के लिए CDN और स्टोर फोंट प्रदान करता है। इसका मतलब है कि आप स्टाइलशीट को लोड करने के लिए अपनी साइट पर केवल एक पंक्ति को जोड़कर फोंट का उपयोग शुरू कर सकते हैं:

<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

आप उनमें से प्रत्येक के कई फोंट और विविधताओं को लोड करने के लिए एक पंक्ति में अधिक गुण और फ़ॉन्ट जोड़ सकते हैं:

<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">

नुकसान प्रदर्शन में गिरावट है (लाभ प्रदर्शन में भी है, लेकिन यह इतना स्पष्ट नहीं है, हम इसे प्राप्त करेंगे)। समस्या यह है कि आपकी साइट ( www.example.com ) का कहना है कि font.googleapis.com से एक स्टाइलशीट लोड होती है, जो फॉन्ट-फेस नियमों के साथ कुछ CSS लौटाती है। यहाँ ऊपर दिए गए उदाहरण में लिंक के लिए स्रोत है:

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

हम इस बारे में बात करेंगे कि इनमें से कुछ सेटिंग्स का क्या मतलब है बाद में (और इसके बारे में भी कि दो फॉन्ट-फेस नियम क्यों हैं), लेकिन अभी के लिए इसका मतलब है कि आप इस फॉन्ट को अपनी शैली में इस तरह इस्तेमाल कर सकते हैं:

body {
    font-family: 'Lato', sans-serif;
}

हालाँकि, अब आपको Fonts.googleapis.com से कनेक्ट करना होगा, CSS डाउनलोड करना होगा, और फिर फ़ॉन्ट्स से कनेक्ट करना होगा। Gstatic.com और स्वयं फोंट डाउनलोड करें (क्यों Google एक ही डोमेन पर CSS और फॉन्ट दोनों को होस्ट नहीं कर सकता - मुझे वास्तव में समझ नहीं आया!)

ब्राउज़र को अक्सर पेज लोड करते समय देरी के साथ ब्राउज़र द्वारा पता लगाया जाता है (आखिरकार, आपको उनसे लिंक खोजने के लिए सीएसएस लोड करने की आवश्यकता है)। लेकिन Google फ़ॉन्ट्स बाद में भी खोजे जाते हैं, क्योंकि CSS को दूसरे डोमेन से डाउनलोड करने की आवश्यकता होती है , और फिर तीसरे डोमेन से फ़ॉन्ट और, जैसा कि मैंने उल्लेख किया है, HTTPS कनेक्शन स्थापित करना भी तत्काल नहीं है। यह व्यापक चित्र में देखा जा सकता है द्वारा उत्पन्न नीचे WebPageTest (ध्यान दें कि सभी परीक्षणों के साथ क्रोम के अनुसार हुआ था - 3GSlow):

लाइन 1 से पता चलता है कि HTML पहले भरी हुई है। फिर, जैसे ही इसे डाउनलोड किया जाता है और 2 सेकंड से भी कम समय में पढ़ा जाता है, ब्राउज़र Google फ़ॉन्ट्स CSS को लोड करने और इसे लाइन 4 में लोड करने की आवश्यकता का पता लगाता है। कनेक्शन स्थापित करने में एक सेकंड लगता है, और फिर 3.5 सेकंड के लिए एक फ़ाइल डाउनलोड की जाती है। अंत में, ब्राउज़र को हमारे फ़ॉन्ट के अस्तित्व के बारे में पता चला और इसे 6 लाइन पर लोड किया गया, जिससे फ़ॉन्ट्स के साथ कनेक्शन के रास्ते में एक और 1 on सेकंड खो गया।

इस प्रकार, Google फ़ॉन्ट से इस फ़ॉन्ट का उपयोग करने से हमें उस पल से उत्पादकता के तीन पूरे सेकंड की लागत आती है, जिस समय HTML उपलब्ध होता है, स्वयं फॉन्ट को डाउनलोड करने में समय नहीं लगता है!

संसाधनों को प्री लोड करके Google फ़ॉन्ट्स को गति देना

सीएसएस और फोंट को दो अलग-अलग डोमेन से लोड करते समय आप इस भयानक प्रदर्शन को कम कर सकते हैं। पहला डोमेन (CSS के लिए) index.html फ़ाइल की शुरुआत के करीब स्थित होना चाहिए ताकि ब्राउज़र इसे जल्द से जल्द पढ़ ले, लेकिन दूसरा अभी भी छिपा हुआ है। हालाँकि, हम जानते हैं कि यह डोमेन कैसा होगा (Fonts.gstatic.com), इसलिए हम बाद में दूसरे कनेक्शन पर कुछ समय बचाने के लिए अग्रिम में कनेक्शन खोल सकते हैं:


<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

पुन: परीक्षण करते समय, हम निम्नलिखित चित्र देखते हैं:

यहां हम देखते हैं कि सीएसएस लोड करने से पहले लाइन 5 पर कनेक्शन अग्रिम में खुला है। इसलिए हम एक सेकंड से अधिक (4 सेकंड में फोंट डाउनलोड करना, 5.25 नहीं) जीतते हैं, क्योंकि हम कनेक्शन के दौरान समय बर्बाद करने से बचने में कामयाब रहे और फोंट को सीएसएस Google फ़ॉन्ट्स पढ़ने के तुरंत बाद डाउनलोड किया जाता है।

आप सोच सकते हैं कि आप केवल डोमेन में शामिल होने के बजाय संतुष्ट होने के बजाय आगे जा सकते हैं और पूरे फ़ॉन्ट को प्रीलोड कर सकते हैं, लेकिन Google फ़ॉन्ट्स फ़ॉन्ट को अनपेक्षित राख कहते हैं। ऊपर दिए गए उदाहरण में, डाउनलोड किए गए फ़ॉन्ट को S6uyw4BMUTPHjx4wXg.woff2 कहा जाता है, lato.woff2 नहीं, इसलिए प्रीलोडिंग तब तक संभव नहीं है जब तक आप नहीं चाहते कि आपकी साइट एक दिन दुर्घटनाग्रस्त हो जाए जब Google अचानक इस हैश को बदलने का फैसला करता है।

किसी भी स्थिति में, यदि आप Google फ़ॉन्ट्स का उपयोग करते हैं और इस नोट को पढ़ने के बाद कुछ और करने का इरादा नहीं है, तो डोमेन में कम से कम प्रारंभिक कनेक्शन जोड़ें, अगर यह पहले से ही नहीं है। यह कोड की केवल एक पंक्ति है और इससे आपके पृष्ठ के प्रदर्शन में उल्लेखनीय सुधार होना चाहिए।

वास्तव में, Google फ़ॉन्ट्स HTTP हेडर में एक समान कमांड देता है जब वह CSS प्रदान करता है:

लेकिन कई मामलों में यह बहुत मदद नहीं करेगा, क्योंकि जब तक आप सीएसएस के साथ सर्वर से HTTP प्रतिक्रिया हेडर प्राप्त करते हैं, तब तक ब्राउज़र पहले से ही जानता है कि आप फ़ॉन्ट डाउनलोड करने के लिए इस डोमेन से कनेक्ट करना चाहते हैं। इसलिए आपके लिए इसे HTML कोड में निर्दिष्ट करना बेहतर होगा ताकि पूर्व लोड काम हो जाए (इससे कोई फर्क नहीं पड़ता कि इसे इस तरह से दोहराया गया है, दूसरा प्रयास केवल अनदेखा किया जाएगा)। हालाँकि, यदि आपका पेज अभी भी संसाधित हो रहा है, जब तक Google फ़ॉन्ट्स CSS सर्वर से हेडर प्राप्त नहीं हो जाते हैं, और DOM तैयार नहीं होता है (हो सकता है कि यह आपके पृष्ठ पर बहुत अधिक जावास्क्रिप्ट का संकेत हो?), यह आखिरकार स्पष्ट होने पर प्रदर्शन को बेहतर बनाने में मदद कर सकता है। कौन सा फ़ॉन्ट डाउनलोड करना है।

फ़ॉन्ट प्रदर्शन: स्वैप

ऊपर फ़ॉन्ट-कोड में, आप फ़ॉन्ट-प्रदर्शन देख सकते हैं: स्वैप; पंक्ति। यह अपेक्षाकृत नया निर्देश है। इसे फ़ॉन्ट घोषणा में जोड़ा जा सकता है और यह ब्राउज़र को पहले फ़ॉलबैक का उपयोग करने के लिए बताएगा, अर्थात सिस्टम फ़ॉन्ट (इस उदाहरण में sans-serif), और फिर इसे डाउनलोड करने के बाद इसे वास्तविक फ़ॉन्ट से बदल दें। इस तरह से आप लोडिंग कंटेंट में देरी से बच सकते हैं जब फॉन्ट अभी तक लोड नहीं हुआ है और परफॉर्मेंस को भी बेहतर बनाता है।

हां, इससे पृष्ठ पर लोडिंग के दौरान सामग्री में समान पाठ (FOUT) - एक ही "छलांग" का प्रकोप होता है, लेकिन कुछ लोग इसे पसंद नहीं करते हैं (मेरी राय से सहमत हैं, सामग्री स्टाइल से अधिक महत्वपूर्ण है, लेकिन पृष्ठ पर पाठ कूदना कष्टप्रद है, हालांकि यह अतिरिक्त फ़ॉन्ट को छोटा करके कम किया जा सकता है)। एक विकल्प फ्लैश अदृश्य पाठ (एफओआईटी) है। इस मामले में, पाठ तब तक छिपा रहता है जब तक कि फ़ॉन्ट दिखाई न दे, जो स्पष्ट रूप से डाउनलोड में देरी करता है और कुछ पाठ लोड होने पर अन्य समस्याओं का कारण बन सकता है , लेकिन कुछ नहीं !

किसी भी स्थिति में, फॉन्ट-डिस्प्ले: स्वैप की शुरूआत से पहले, अलग-अलग ब्राउज़र इस से अलग तरीके से निपटते हैं - कुछ, जैसे IE और एज, फ़्यूज़, दूसरों ने एफओआईटी का इस्तेमाल किया, और उनके पास अलग-अलग समय तक इंतजार करने के लिए फोंट का इंतजार किया। इस वजह से, यदि फ़ॉन्ट लोड नहीं हुआ, तो आपकी सामग्री लंबे समय तक अदृश्य रह सकती है। फॉन्ट-डिस्प्ले की शुरुआत: स्वैप ने वेबसाइट डेवलपर्स को यह तय करने की अनुमति दी कि यह कैसे होगा। अधिकांश ब्राउज़र फ़ॉन्ट-प्रदर्शन का समर्थन करते हैं: IE और Edge के अपवाद के साथ स्वैप, लेकिन जैसा कि ऊपर उल्लेख किया गया है, वे वैसे भी डिफ़ॉल्ट रूप से इसका उपयोग करते हैं। Google फोंट विभिन्न फ़ॉन्ट प्रदर्शन विकल्पों का भी समर्थन करते हैं और फ़ॉन्ट-प्रदर्शन की पेशकश करते हैं: डिफ़ॉल्ट रूप से स्वैप करें।

इसलिए, यदि आप Google फॉन्ट का उपयोग करते हैं तो एक और टिप यह जांचने के लिए है कि आपके पास URL में & डिस्प्ले = स्वैप पैरामीटर है, और यदि नहीं (यह केवल हाल ही में समर्थित हो गया है), तो इसे जोड़ें:

उदाहरण के लिए, इसे प्रतिस्थापित करें:


<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

इस पर:


<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

आप यह भी कर सकते हैं अन्य फ़ॉन्ट प्रदर्शन में से एक मान निर्दिष्ट उदाहरण के लिए, वैकल्पिक अगर आप चाहें तो।

दुर्भाग्य से, यह केवल आधी समस्या को हल करता है। यह निर्देश CSS में है, जो Google फ़ॉन्ट्स लौटाता है, इसलिए आपके द्वारा CSS फ़ाइल डाउनलोड करने के बाद ही यह उपयोगी है। इस प्रकार, यह फोंट लोड करते समय देरी से निपटने में मदद करता है, लेकिन जब आप इस सीएसएस को लोड करने के लिए इंतजार कर रहे हैं तो यह मदद नहीं करता है। तो यह एक अच्छा सुधार है (कम से कम उन लोगों के लिए जो फ़्यूचर को पसंद करते हैं), लेकिन फिर भी संपूर्ण समाधान नहीं है।

Google Fonts

मैंने वेब पंचांग बनाने में मदद की (इंटरनेट की स्थिति पर एक शानदार नज़र - अपने आप को देखें कि क्या आपने अभी तक इसे नहीं देखा है) और हमारी साइट पर Google फ़ॉन्ट के धीमे डाउनलोड ने मुझे परेशान किया और मैं इसे ठीक करना चाहता था। विशेष रूप से फ़ॉन्ट-प्रदर्शन के साथ फुलाव: स्वैप। मैं सोच रहा था कि क्या हम इस के प्रभाव को कम कर सकते हैं, और स्थानीय समाधान संभवतः स्थानीय रूप से प्रीलोडिंग का उपयोग करते हुए फ़ाइलों को संग्रहीत कर रहा है।

हमने पहले ही उपरोक्त तकनीकों (प्री-लोडिंग और फॉन्ट-डिस्प्ले: स्वैप;) का उपयोग किया है, लेकिन, निश्चित रूप से, सीएसएस को बाहर से जोड़ने से दूर होना बेहतर होगा। हम जानते हैं कि इस सीएसएस में क्या होगा। तो, आत्मविश्वास से स्वयं-होस्ट चुनें? यह वह जगह है जहां यह दिलचस्प हो जाता है ...

मुझे GitHub ( Google फ़ॉन्ट डाउनलोड) पर एक सुविधाजनक स्क्रिप्ट मिली), जिसने मुझे सभी अलग-अलग फ़ॉन्ट विकल्प डाउनलोड करने में मदद की (क्योंकि उनमें से बहुत सारे थे, पेज के आधार पर 9 तक), और फिर सीएसएस की प्रतिलिपि बनाई, जिसे उसने हमारे मुख्य स्टाइलशीट में प्रदर्शित किया, और सर्वर पर फोंट अपलोड किया। कर रहे हैं अन्य ऑनलाइन उपकरण है कि एक ही है। यह सब काम कर रहा था, और हमें कष्टप्रद सीएसएस लोडिंग और दो डोमेन के साथ काम करने की आवश्यकता से छुटकारा मिला।

हालाँकि, करीब निरीक्षण पर, मैंने देखा कि फोंट बड़े थे:

जैसा कि आप देख सकते हैं, आकार में उल्लेखनीय वृद्धि हुई है (उनमें से कुछ के लिए 74% तक अतिरिक्त!) डाउनलोड किए गए Google फोंट (दाएं) और स्थानीय रूप से रखे फोंट (बाएं) की तुलना में। प्रारंभ में, मुझे लगा कि यह मेरे स्थानीय वेब सर्वर के कारण था, उदाहरण के लिए, संपीड़न बंद होने के कारण। लेकिन WOFF2 फोंट वेब सर्वर द्वारा संपीड़न के बिना परोसा जाता है - या कम से कम यह होना चाहिए - क्योंकि प्रारूप में ब्रोथली संपीड़न शामिल है। इसके अलावा, ऊपर दिया गया स्क्रीनशॉट डाउनलोड किए गए बाइट्स (शीर्ष पर काला), साथ ही प्रत्येक कॉलम के लिए असम्पीडित बाइट्स (नीचे की ओर हल्का) दिखाता है (वे दोनों स्तंभों में काफी समान हैं, क्योंकि फोंट वास्तव में वेब सर्वर द्वारा संपीड़न के बिना भेजे जाते हैं, लेकिन डाउनलोड किए गए बाइट्स में HTTP हेडर शामिल हैं , इसलिए वे थोड़े बड़े हैं), और दोनों संपीड़ित और असम्पीडित बाइट्स में अंतर थे, इसलिए यह बात नहीं है।

मूल के साथ टूल का उपयोग करके प्राप्त फ़ॉन्ट-फेस नियमों की तुलना से एक अंतर का पता चला:

Google फ़ॉन्ट्स से:

/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

डाउनलोड टूल से:

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src:
        local('Lato Regular'),
        local('Lato-Regular'),
        /* from https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2 */
        url('Lato_400.woff2') format('woff2'),
        /* from https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff */
        url('Lato_400.woff') format('woff');
}

पहला अंतर यह है कि हमने फॉन्ट-डिस्प्ले: स्वैप लाइन खो दी है, लेकिन इसे बिना किसी समस्या के ठीक किया जा सकता है। बहुत अधिक दिलचस्प तथ्य यह है कि Google फ़ॉन्ट्स दो फोंट वितरित करता है - और उनमें विभिन्न यूनिकोड रेंज शामिल हैं। यह फॉन्ट-सब्मिटिंग के कारण है और फॉन्ट फाइल्स को कम करता है।

फ़ॉन्ट सब्मिट करना

फ़ॉन्ट सब्मिटिंग उन वर्णों को हटाना है जिनका उपयोग आप फ़ॉन्ट फ़ाइल के आकार को कम करने के लिए नहीं करने वाले हैं। आमतौर पर, अधिकांश पश्चिमी लोग केवल लैटिन वर्णों का उपयोग करते हैं, और उन सभी वर्णों के साथ एक फ़ॉन्ट डाउनलोड करना जो आप संभवतः उपयोग नहीं करेंगे। मैंने पहले इस बारे में सुना था, लेकिन मैंने कभी नहीं सोचा कि यह कितना महत्वपूर्ण हो सकता है! Google फ़ॉन्ट स्वचालित रूप से लैटिन वर्णों के एक सेट के साथ एक फ़ॉन्ट-फेस प्रदान करता है, और यह भी, जहां संभव हो, विस्तारित लैटिन वर्णों के लिए एक दूसरा फ़ॉन्ट जोड़ता है (उदाहरण के लिए,।), जिसे केवल आवश्यक होने पर डाउनलोड किया जाएगा।

वास्तव में, आप एक विशेष फ़ॉन्ट का भी अनुरोध कर सकते हैं, जिसमें केवल वे ही अक्षर होते हैं जिनकी आपको पाठ पैरामीटर के साथ आवश्यकता होती है:

https://fonts.googleapis.com/css?family=Lato&text=ABC

आगे के अवलोकनों को देखते हुए, मैंने जो फ़ॉन्ट-लोडिंग टूल का उपयोग किया है, वह स्पष्ट रूप से फॉन्ट सब्मिटिंग का समर्थन करता है, लेकिन केवल संपूर्ण "लैंग्वेज" (लैटिन या एक्सटेंडेड लैटिन) के लिए, और यह दोनों सब्मिट के कैरेक्टर को एक फाइल में जोड़ती है। अंत में, मैंने अपने ब्राउज़र का उपयोग किया और इस उपकरण का उपयोग बंद कर दिया। इसने समान फ़ाइल आकार दिए (मेरे विकास परिवेश में HTTP हेडर के कारण थोड़े अंतर के साथ), लेकिन मुझे जल्द ही पता चला कि यह केवल फ़ॉन्ट सब्मिटिंग नहीं था।

Google फोंट चालाकी से फोंट वितरित करता है

Google फ़ॉन्ट्स हमेशा एक ही सीएसएस को प्रस्तुत नहीं करते हैं और यह उपयोग किए गए उपयोगकर्ता-एजेंट पर निर्भर करता है । उदाहरण के लिए, इंटरनेट एक्सप्लोरर 11 के लिए, यह निम्नलिखित भेजता है:

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff) format('woff');
}

यहां आप देख सकते हैं कि यह केवल WOFF प्रारूप प्रदान करता है, क्योंकि IE 11 WOFF2 का समर्थन नहीं करता है , और उसी कारण से यूनिकोड-रेंज निर्दिष्ट नहीं है। यह फ़ॉन्ट-डिस्प्ले देता है: स्वैप (जैसा कि मैंने CSS के लिए URL में बताया है), हालांकि ब्राउज़र इसका समर्थन नहीं करता है, लेकिन यह नुकसान नहीं पहुंचाता है।

यह केवल निर्माता और ब्राउज़र का संस्करण नहीं है। फ़ॉन्ट संकेतफ़ॉन्ट फ़ाइल में अतिरिक्त निर्देश शामिल हैं, जो तब फ़ॉन्ट का सबसे अच्छा प्रदर्शन प्रदान करने के लिए उपयोग किया जाता है - विशेष रूप से कम रिज़ॉल्यूशन स्क्रीन पर या वास्तव में छोटे आकारों के लिए। फ़ॉन्ट हिन्टिंग का उपयोग विंडोज पर किया जाता है, लेकिन मैकओएस पर नहीं, इसलिए इस पर निर्भर करता है कि आप Google फ़ॉन्ट प्राप्त करते समय किस ब्राउज़र के साथ काम करते हैं, एक ब्राउज़र का उपयोग करके (भले ही आप प्रत्येक प्लेटफ़ॉर्म पर क्रोम का उपयोग करते हों), आपको फ़ॉन्ट फ़ाइलों को संकेत के साथ मिल सकता है या उसके बिना। यदि आप Windows संस्करण डाउनलोड करते हैं और इसे अपने लिए उपयोग करते हैं, तो आप वास्तव में MacOS उपयोगकर्ताओं को अप्रयुक्त हिंटिंग से भरी बड़ी फ़ॉन्ट फ़ाइलों को संसाधित करने की आवश्यकता से पीड़ित होंगे, और यदि आप इसके विपरीत करते हैं, तो आप संभवतः विंडोज उपयोगकर्ताओं को बदतर फ़ॉन्ट प्रदर्शन से पीड़ित करेंगे, फ़ॉन्ट संकेत के बिना।

जब मैंने Google फ़ॉन्ट्स का उपयोग किया, और जब मैंने स्थानीय उपयोग के लिए फ़ॉन्ट डाउनलोड किया, तो मैंने इसे अपने मैक पर किया, इसलिए मुझे छोटी फाइलें मिलीं। जब मैंने उपकरण का उपयोग किया, तो मुझे फोंट लगाने के साथ, पूर्ण फोंट मिला। इतना बड़ा आकार अंतर का एक और कारण था!

क्या फ़ॉन्ट संकेत अभी भी प्रासंगिक है, क्योंकि उच्च-परिभाषा स्क्रीन अधिक आम हो गए हैं - यह एक अच्छा सवाल है, और कई फोंट शुरू में बिना हिंट दिए जाते हैं, क्योंकि इसे बनाने में बहुत समय लगता है। जब यह मौजूद है - यह फ़ॉन्ट आकार को महत्वपूर्ण रूप से बढ़ा सकता है। लाटो के मामले में, आकार दोगुना हो गया है। क्या Google फ़ॉन्ट्स को त्यागकर और स्थानीय रूप से फोंट लगाने से आपके पास अतिरिक्त कार्यभार होगा? यह एक और निर्णय है जो आपको अपने लिए बनाने की आवश्यकता है।

इसलिए, Google फ़ॉन्ट्स CDN को एक स्मार्ट स्क्रिप्ट द्वारा समर्थित किया गया है जो अधिकतम प्रदर्शन को बनाए रखने के लिए अनुकूलन करते हुए, सबसे उपयुक्त फोंट को दूर करता है। फोंट के स्थानीय भंडारण पर स्विच करना आपको यह सब स्वयं कॉन्फ़िगर करना होगा, और कुछ ब्राउज़रों में अपने फोंट के सही प्रदर्शन को खोने का एक मौका है यदि आप नहीं करते हैं।

वेब पंचांग के लिए, हमने आगंतुकों के ब्राउज़रों के आंकड़ों को देखा और केवल WOFF2 का समर्थन करने का निर्णय लिया, और बिना हिचकी के भी MacOS के संस्करणों का उपयोग किया, क्योंकि उनका वजन आधा था। यह सरलीकृत सीएसएस (विशेषकर चूंकि यूनिकोड-रेंज सभी WOFF2 का समर्थन करने वाले ब्राउज़रों द्वारा समर्थित है), और IE 11 और अन्य पुराने ब्राउज़रों के उपयोगकर्ता डिफ़ॉल्ट रूप से sans-serif देखते हैं, जो बहुत अच्छा नहीं दिखता है, लेकिन हमारी राय में, फोंट एक प्रगतिशील सुधार है, और उनके बिना भी यह साइट अभी भी उपयोग करने योग्य से अधिक है। इसके अलावा, पुराने ब्राउज़र सिस्टम डिफॉल्ट फोंट का उपयोग करने से भी लाभान्वित हो सकते हैं, क्योंकि वे पुराने, कम-संचालित मशीनों पर उपयोग किए जाने की संभावना रखते हैं।

आप चाहें तो अपने द्वारा उपयोग किए जाने वाले फोंट में अन्य समायोजन भी कर सकते हैं (पहले लाइसेंस की जांच करें!), लेकिन मैकओएस पर क्रोम में उपयोग किए गए डिफ़ॉल्ट Google फोंट की प्रतिलिपि बनाना शायद हम में से अधिकांश के लिए पर्याप्त है यदि आप बिना WOFF2 ब्राउज़रों का समर्थन करना चाहते हैं ।

फिर भी, यदि हम Google फ़ॉन्ट्स पर बसे हैं, तो हमारे पास ब्राउज़र के आधार पर सही फ़ॉन्ट के प्रतिस्थापन के गहन विन्यास की आवश्यकता के बिना, WOFF (और यहां तक कि पुराने प्रारूप) होंगे और जहां आवश्यक हो, इशारा कर सकते हैं। इस प्रकार, फोंट के लिए Google फोंट का उपयोग करना अभी भी कुछ फायदे हैं, और स्थानीय भंडारण का चयन करके आप उन्हें मना कर देते हैं। यह Google फ़ॉन्ट्स के लिए भविष्य में किसी भी एन्हांसमेंट पर भी लागू होता है ।

भविष्य फ़ॉन्ट्स संवर्द्धन

चूंकि मैंने फोंट के विषय में देरी की है, और चेतावनी दी है कि आप स्थानीय स्टोरेज पर जाकर Google फ़ॉन्ट्स के भविष्य के किसी भी लाभ को खो सकते हैं, मैं मुख्य विषय से थोड़ा हटकर और अन्य दिलचस्प चीजों के बारे में बात करना चाहता हूं जो मैंने खोजा था। फॉन्ट की दुनिया में आने वाले बड़े बदलाव क्या हैं? खैर, दो बदलाव हैं जो वर्तमान में सक्रिय रूप से चर्चा कर रहे हैं और जो भविष्य में फोंट को प्रभावित कर सकते हैं (और इसलिए Google फोंट द्वारा समर्थित किया जा सकता है, शायद डिफ़ॉल्ट रूप से यदि आपने इस सेवा का उपयोग करने के लिए चुना है): चर फोंट और प्रगतिशील फ़ॉन्ट संवर्धन ।

चर फोंट

वैरिएबल फोंट आपको व्यक्तिगत फ़ाइलों को डाउनलोड करने के बिना विभिन्न फ़ॉन्ट शैलियों का उपयोग करने की अनुमति देते हैं। मैंने पहले उल्लेख किया था कि वेब पंचांग 9 अलग-अलग फ़ॉन्ट फ़ाइलों का उपयोग करता है, लेकिन वास्तव में यह केवल 2 फ़ॉन्ट है। कारण सरल है - साइट बोल्ड, इटैलिक, बोल्ड और यहां तक कि एक या दोनों के पतले संस्करणों का भी उपयोग करती है। एक ही फ़ॉन्ट के बहुत सारे बदलाव अनुचित लग सकते हैं और आप सोच सकते हैं कि ब्राउज़र स्वयं पाठ की मोटाई बदलने या इटैलिक लिखने के कार्य से निपटेगा। हाँ यह संभव है। लेकिन प्रत्येक ब्राउज़र इसे थोड़ा अलग तरीके से करता है, और परिणाम मौलिक रूप से भिन्न हो सकते हैं , इसलिए कई उन्हें "कृत्रिम फ़ॉन्ट" कहते हैं।

एक ही प्रदर्शन सुनिश्चित करने का एकमात्र तरीका "वास्तविक फ़ॉन्ट" का उपयोग करना है जो विशेष रूप से आपकी ज़रूरत के प्रत्येक शैली के लिए है।

परिवर्तनीय फोंट विभिन्न फ़ॉन्ट भिन्नताओं के प्रदर्शन को मानकीकृत करते हैं और अतिरिक्त फ़ाइलों की आवश्यकता गायब हो जाती है। सैद्धांतिक रूप से, हम इन 9 फोंट्स को 2 के साथ बदल सकते हैं जब उनके वैरिएबल फॉन्ट संस्करण उपलब्ध हो जाते हैं।

यह इंटरनेट पर फोंट का उपयोग करने के लिए संभावनाओं की एक टन को खोलता है। यद्यपि यह मुझे प्रतीत हो सकता है कि दो फोंट के लिए 9 विकल्प बहुत अधिक हैं, वास्तव में यह बहुत अधिक नहीं है, जबकि चर फोंट निरंतर भिन्नता की अनुमति देगा। मोबाइल उपकरणों पर, आप डेस्कटॉप और टैबलेट की तुलना में "बोल्ड" के लिए थोड़ी अलग मोटाई निर्धारित कर सकते हैं। कुछ सरल सीएसएस निर्देशों के साथ चर फ़ॉन्टअतिरिक्त फ़ॉन्ट डाउनलोड करने के लिए संसाधनों की लागत के बिना इसे अनुमति दें। DotCSS में हाल ही में , जेसन पैमेन्टल ने वैरिएबल फोंट के बारे में बात की और यह प्रदर्शित किया कि आप किस तरह से एक अलग तरह के फोंट के लिए एक सुंदर डिज़ाइन किया गया पेज प्राप्त कर सकते हैं - सभी एक ही फाइल का उपयोग करते हुए!

परिवर्तनशील फोंट का उपयोग करने का अर्थ है कि एक ही समय में सभी फ़ॉन्ट भिन्नताओं को लोड करना , पहले बताई गई समस्याओं के कारण होने वाले भ्रम से बचें। यह लेआउट के कम हिस्सों को भी ले जाता है: वेरिएबल फोंट के बिना, पृष्ठ को ब्राउज़र द्वारा फिर से फिर से और प्रत्येक व्यक्तिगत फॉन्ट वेरिएंट लोड के रूप में फिर से लिखा जाएगा ।

वेरिएबल फोंट को अच्छा समर्थन मिला हैआधुनिक ब्राउज़रों में, लेकिन उनकी खामी बड़े आकार की है, क्योंकि विभिन्न फ़ॉन्ट भिन्नताओं को संग्रहीत करने के लिए अधिक स्थान की आवश्यकता होती है, जैसा कि फ़ॉन्ट संकेत के साथ होता है। यह फ़ॉन्ट पर निर्भर करता है, लेकिन आमतौर पर वे संपीड़न के बाद दो बार बड़े होते हैं, इसलिए उनके उपयोग को सही ठहराने के लिए, आपको कम से कम दो शैलियों की आवश्यकता होगी। फिर भी, आप सभी पाठ प्रदर्शित करने के लिए एक बड़ी फ़ाइल के बजाय महत्वपूर्ण पाठ प्रदर्शित करने के लिए अपलोड की गई एक छोटी फ़ाइल को प्राथमिकता देकर बेहतर हो सकते हैं। और फिर, फ़ॉन्ट-डिस्प्ले का उपयोग कर सकते हैं: स्वैप एक कम समस्याग्रस्त समाधान हो सकता है? यह तय करने के लिए प्रत्येक साइट के मालिक पर निर्भर है!

प्रगतिशील फ़ॉन्ट संवर्धन

प्रगतिशील फ़ॉन्ट संवर्धन , संक्षेप में, एक नए स्तर पर ले जाता है और आपको अतिरिक्त चरित्र परिभाषाओं को डाउनलोड करने की अनुमति देता है, जो अतिरिक्त जानकारी की एक धारा के रूप में आवश्यक है जो वर्तमान में लोड किए गए फ़ॉन्ट को पूरक करता है, लेकिन एक अतिरिक्त नहीं जोड़ता है। यह हमें पश्चिमी देशों के लिए एक छोटे से लाभ की तरह लग सकता है, लेकिन अन्य भाषाओं के लिए - विशेष रूप से सुदूर पूर्व में - इन भाषाओं में वर्णों की विशाल संख्या के कारण फ़ॉन्ट फ़ाइलें बहुत बड़े पैमाने पर (उदाहरण के लिए, 2 एमबी ) हो सकती हैं। इस कारण से, वेब फोंट ऐसे देशों में कम उपयोग किए जाते हैं और प्रगतिशील फ़ॉन्ट संवर्धन स्थिति पर सकारात्मक प्रभाव डाल सकते हैं।

प्रगतिशील फ़ॉन्ट संवर्धन, जैसा कि मैं समझता हूं, यह वैरिएबल फोंट की तुलना में पहले के चरण में है, लेकिन हैंऑनलाइन डेमो । किसी भी मामले में, यह फोंट से संबंधित एक और संभावित दिलचस्प बदलाव है।

क्या Google फ़ॉन्ट्स में सुधार जारी रहेगा?

यह देखते हुए कि Google फ़ॉन्ट्स कैसे काम करता है, यह कल्पना करना आसान है कि यह नए संवर्द्धन के साथ बढ़ता रह सकता है, जैसे कि इस लेख में वर्णित (या कई अन्य!), बस आपके द्वारा दिए गए CSS को बदलकर। और वह इसे समझदारी से कर सकता है। उदाहरण के लिए, यह निर्धारित करना कि क्या आपका ब्राउज़र नई तकनीक का समर्थन करता है (जैसा कि अब यह फ़ॉन्ट प्रारूप - WOFF या WOFF2 के साथ होता है), या अन्य तरीकों से। उदाहरण के लिए, यदि आप दो से अधिक फ़ॉन्ट का अनुरोध करते हैं और चर फ़ॉन्ट को कम संसाधन-गहन देते हैं, तो आप कई फ़ॉन्ट-फेस विज्ञापनों में उसी फ़ॉन्ट फ़ाइल को स्वचालित और लिंक कर सकते हैं, और यदि आप केवल एक विकल्प का अनुरोध करते हैं, तो अधिक हल्के वाले का संदर्भ लें, पारंपरिक फ़ॉन्ट। दूर की आवाज लगती है? उन्होंने पहले से ही एक फ़ॉन्ट के साथ ऐसा किया था।(ओसवाल्ड)! ईमानदारी से, मुझे नहीं पता कि क्या यह प्रगतिशील फ़ॉन्ट संवर्धन के साथ संभव है, क्योंकि मैं इसके काम के सिद्धांत को पूरी तरह से नहीं समझता, लेकिन यह देखना दिलचस्प होगा।

इसके अलावा, यह ध्यान देने योग्य है कि Google फोंट का उपयोग करते समय, फ़ॉन्ट को अपडेट करते समय, उदाहरण के लिए, नए वर्ण सेट या ग्लिफ़ में सही त्रुटियों को जोड़ने के लिए, आपको स्वचालित रूप से नए फ़ॉन्ट मिलते हैं। स्थानीय भंडारण के साथ, यह काम नहीं करेगा - कम से कम एक-हाथ के हस्तक्षेप के बिना नहीं। शायद आप अपने डोमेन के माध्यम से अनुरोधों की दिशा में देख सकते हैं और इस तरह दोनों विकल्पों में से सबसे अच्छा ले सकते हैं, लेकिन यह सबसे अधिक संभावना है कि यह धीमा होगा और अतिरिक्त कॉन्फ़िगरेशन और प्रबंधन की आवश्यकता होगी।

दूसरी ओर, स्थानीय भंडारण स्थिरता प्रदान करता है, क्योंकि कुछ अपडेट आपके डिजाइन को प्रभावित कर सकते हैं, उदाहरण के लिए, यदि एक पंक्ति में एक शीर्षक फ़ॉन्ट परिवर्तन के कारण दो तक फैलने लगता है। ऐसे लोगों की एक श्रेणी है जो इस वजह से बहुत परेशान हैं

स्थानीय फ़ॉन्ट संग्रहण के लाभ

इसलिए, हमने बहुत सारे सिद्धांत पर चर्चा की है, और यद्यपि स्थानीय भंडारण के स्पष्ट संभावित लाभ हैं, पर विचार करने में भी मुश्किलें हैं, और इसलिए Google फ़ॉन्ट्स का उपयोग करने के कुछ स्पष्ट लाभ भी हैं। तो क्या स्व-मेजबानी इसके लायक है? यह किसी विशेष स्थिति में वास्तविक सुविधाओं पर निर्भर करता है। यदि प्रदर्शन में अंतर नगण्य है, तो यह Google फ़ॉन्ट्स का उपयोग जारी रखने के लायक हो सकता है, यदि बड़े, क्रमशः।

वेब पंचांग के लिए, हमने हाल ही में Google फ़ॉन्ट्स स्थानीय संग्रहण का चयन किया , और परीक्षण में नाटकीय परिवर्तन दिखाई दिए:

निचली छवि में हमारे परीक्षण सर्वर पर स्थानीय फ़ॉन्ट शामिल हैं, और आप देख सकते हैं कि डाउनलोड का समय आधा हो गया था - 6 से 3 सेकंड से! एक गहन विश्लेषण के बाद, मैंने देखा कि उत्पादकता और भी अधिक बढ़ गई (बचत के 3 सेकंड)!

इतना स्पष्ट नहीं है (लेकिन बाद में हम क्या देखेंगे) - इस बिंदु पर, फोंट किसी भी छवियों पर पूरी तरह से लोड नहीं हैं - स्थानीय भंडारण के साथ Google फ़ॉन्ट्स का उपयोग करते समय 7.5 सेकंड और 10.5 सेकंड लगते हैं। हालांकि, उपयोग किए जाने वाले फोंट मानक लोगों के समान हैं, और लेआउट में ध्यान देने योग्य कूदता नहीं हैं। इसे नीचे दिए गए आरेख में देखा जा सकता है:

आरेख से पता चलता है कि स्थानीय भंडारण (लाल रंग में) वाला पृष्ठ लगभग 2.4 सेकंड में पूरी तरह से लोड हो गया है, और फिर छवियों को लोड करने के बाद कई बार अपडेट किया जाता है, जिसके बाद फोंट भी प्रदर्शित होते हैं। हां, मैं सबकुछ सुचारू बनाना चाहूंगा, लेकिन फिर भी कुछ फ़ॉन्ट डाउनलोड लागतों को अनुकूलित करना असंभव है।

सुधार वास्तव में ठोस हैं इसका कारण यह है कि एक और चीज की वजह से मैं पहली बार में सीएसएस को ब्लॉक करता हूं। इसलिए अगर Google फ़ॉन्ट्स CSS में कोई लिंक है, तो ब्राउज़र केवल पाठ के प्रदर्शन में देरी नहीं करता है - यह पृष्ठ की संपूर्ण सामग्री के प्रदर्शन में देरी करता है! फ़ॉन्ट एक प्रगतिशील सुधार है, इसलिए हम शेष पेज को सुरक्षित रूप से प्रस्तुत कर सकते हैं, और यहां तक कि स्वयं पाठ (मानक / फ़ॉलबैक फोंट के साथ), लेकिन ब्राउज़र नहीं करता है - यह सिर्फ देखता है कि कुछ सीएसएस है और इसे लोड करने की कोशिश करता है, डाउनलोड को स्थगित कर रहा है। शेष पृष्ठ CSS के लिए अतुल्यकालिक लोडिंग नहीं है- लेकिन शायद यह ऐसे मामलों के लिए होना चाहिए? फिर भी, हम जोखिम उठाते हैं कि Google फ़ॉन्ट्स से जुड़ी समस्याओं के मामले में, आपकी पूरी साइट दुर्गम होगी जब तक कि ब्राउज़र लिंक को संसाधित करने की कोशिश करना बंद नहीं कर देता!

ऊपर दिए गए तुलना चार्ट में, ऊर्ध्वाधर ग्रीन लाइन स्टार्ट रेंडर 6 सेकंड के रूप में जल्दी होता है - चूंकि इसे Google फ़ॉन्ट्स CSS 12 लाइन पर लोड होने तक इंतजार करना पड़ता है, जो आधा समय डोमेन से कनेक्ट करने में खर्च करता है और दूसरा आधा वास्तव में लोड हो रहा है।

इसकी तुलना स्थानीय संस्करण से करें:

यहां हम जैसे ही 2.5 सेकंड में साइट के सीएसएस को लोड और संसाधित करना शुरू कर सकते हैं। ऐसा इसलिए है क्योंकि Google फ़ॉन्ट्स डोमेन से जुड़ने में कोई देरी नहीं है।

दोनों ही मामलों में, हम देखते हैं कि फोंट लोड होने से पहले रेंडरिंग की शुरुआत होती है, और फॉन्ट-डिस्प्ले के जादू की बदौलत: स्वैप, टेक्स्ट अभी भी दिखाई देता है। इसलिए, फ़ॉन्ट-प्रदर्शन का उपयोग करते समय कम से कम: स्वैप, यह बेहतर होगा यदि Google फ़ॉन्ट्स को CSS अवरुद्ध प्रतिपादन का उपयोग करके लोड नहीं किया गया है, लेकिन, उदाहरण के लिए, अतुल्यकालिक जावास्क्रिप्ट के माध्यम से लोड किया गया, जो पृष्ठ के बाद ही सीएसएस फोंट को सम्मिलित करता है। उन्हें कैसे डाउनलोड किया जाता है। यदि प्रक्रिया को इस तरह लागू किया गया था, तो रेंडरिंग देरी नहीं होगी, हालांकि, कनेक्ट करते समय अभी भी देरी होती है और पाठ के सही ढंग से प्रदर्शित होने के लिए लंबा इंतजार करना पड़ता है।

UPD: मैंने GitHub Google फ़ॉन्ट्स पर रेंडर को अवरुद्ध किए बिना Google फ़ॉन्ट्स डाउनलोड करने का एक तरीका जोड़ने के प्रस्ताव के साथ एक मुद्दा बनाया - अगर आप भी चाहते हैं तो वोट करें!

Zach Leatherman ने redraws की संख्या को कम करने के लिए इस दृष्टिकोण की वकालत की , और दिखाता है कि यह CSS फ़ाइल की आवश्यकता के बिना अकेले जावास्क्रिप्ट के साथ भी संभव है। फिर यह जावास्क्रिप्ट के साथ अपने फोंट को प्रबंधित करने के अन्य फायदे दिखाता है, उदाहरण के लिए, यदि आप साइट को धीमे नेटवर्क ( नेटवर्क सूचना एपीआई का उपयोग करके ) से खोलते हैं , या यदि उपयोगकर्ता के पास सेव-डेटा या प्रीफ़र्ड-कम-मोशन सेटिंग्स सक्षम हैं , तो आप फ़ोंट डाउनलोड करने से इनकार कर सकते हैं। । दिलचस्प विशेषताएं!

फ़ॉन्ट लोड करना

एक बार जब आप Google के हैशेड URL से दूर चले जाते हैं, तो आप प्रदर्शन को और बेहतर बनाने के लिए फ़ॉन्ट को लोड नहीं कर पाएंगे। हालांकि, इस विकल्प में कुछ संभावित खामियां हैं, जैसा कि एंडी डेविस ने लेख में पहले से लोड किए गए फ़ॉन्ट्स और प्राथमिकताओं की पहेली पर चर्चा की है । मूल रूप से, फोंट प्रीलोड करने और उन्हें प्राथमिकता क्रम में ऊपर ले जाने से, आप अन्य महत्वपूर्ण डाउनलोड (उदाहरण के लिए, CSS) की प्राथमिकता को कम करते हैं, और क्रोम में त्रुटि के कारण, फोंट भी उनमें से कुछ से ऊपर कूद सकते हैं।

इसके अलावा, जब फॉन्ट का उपयोग नहीं किया जाएगा तब प्रीलोड करना अनावश्यक अनुचित लोड का कारण होगा - उदाहरण के लिए, यदि स्थानीय संस्करण मौजूद है और प्राथमिकता के साथ उपयोग किया जा सकता है, या यदि ब्राउज़र इस फ़ॉन्ट प्रारूप का समर्थन नहीं करता है (हालांकि प्री-लोडिंग का समर्थन करने वाले सभी ब्राउज़र भी OOFF2 का समर्थन करते हैं ) प्री-लोडिंग का उपयोग करने की सिफारिश के साथ, Google आपको इस बारे में स्पष्ट रूप से चेतावनी देता है , और यह देखकर अच्छा लगता है कि वे इस पर ध्यान देते हैं।

फ़ॉन्ट-डिस्प्ले: स्वैप फ़ंक्शन का उपयोग करते समय, प्रीलोड की आवश्यकता उतनी मजबूत नहीं हो सकती है। हालाँकि इस मामले में, आप अभी भी फोंट की न्यूनतम आवश्यक संख्या को डाउनलोड करके और इस प्रकार फ़्यूज़ और रिड्रॉइंग से बचकर समय प्राप्त कर सकते हैं। फिलहाल, हम वेब पंचांग में प्रीलोडिंग का उपयोग नहीं करते हैं और शुरू करने से पहले, हमें कुछ और परीक्षणों की आवश्यकता है, लेकिन अब मैं जो है उससे संतुष्ट हूं।

निष्कर्ष

लेख के शीर्षक में एक प्रश्न का उत्तर देते हुए: हां, यह इसके लायक है, क्योंकि प्रदर्शन लाभ महत्वपूर्ण है। बेशक, आपके परिणाम भिन्न हो सकते हैं, क्योंकि यह सभी विशेष साइट पर निर्भर करता है, इसलिए परीक्षण, परीक्षण और फिर से परीक्षण करें। लेकिन, मुझे लगता है, अधिकांश साइटों के लिए, प्रदर्शन के मामले में यह अभी भी सबसे अच्छा विकल्प है।

हालांकि, Google फ़ॉन्ट्स सैकड़ों मुक्त फोंट का सिर्फ एक भंडार नहीं है - यह एक स्मार्ट डिलीवरी तंत्र भी है जो साइट के मालिक की ओर से न्यूनतम प्रयास के साथ सबसे उपयुक्त फोंट को प्रस्तुत करने के लिए कई नवीनतम अनुकूलन तकनीकों का उपयोग करता है। स्व-होस्ट करने के लिए स्विचिंग, आदर्श रूप से, आपको कई उपयोगी सुधारों को फिर से लागू करने की आवश्यकता है, जैसे कि फॉन्ट-डिस्प्ले: स्वैप, फ़ॉन्ट हिंटिंग को हटाना (कम से कम कुछ ब्राउज़रों के लिए), या अन्यथा, आप केवल भारी लोगों के प्रदर्शन को नुकसान पहुंचा सकते हैं फ़ॉन्ट फ़ाइलें।

यह एक आसान काम नहीं है (और Google फ़ॉन्ट्स यह आपके लिए करता है, हाँ)। लेकिन चूंकि अब केवल WOFF2 प्रारूप का उपयोग करना एकमात्र वास्तविक विकल्प है, और ब्राउज़र अच्छी तरह से अधिकांश अनुकूलन तकनीकों का समर्थन करते हैं, इसलिए सब कुछ पहले की तुलना में बहुत आसान हो गया है। फिर भी, इसे स्थापित करने से पहले वेब फोंट के बारे में कुछ ज्ञान होना आवश्यक है (मुझे उम्मीद है कि इस पोस्ट ने इसमें मदद की है!), और साथ ही फ़ॉन्ट दुनिया में नए बदलावों पर नज़र रखें, क्योंकि निस्संदेह इसमें और सुधार होगा।

खैर, शायद हम अनुकूलन के लिए बहुत उत्सुक थे और स्थानीय भंडारण के साथ हम पूर्ण फ़ॉन्ट का उपयोग कर सकते हैं, बिना सबसेटिंग और हिंटिंग के साथ? Google फ़ॉन्ट्स वेबसाइट पर, आप किसी भी फ़ॉन्ट को डाउनलोड कर सकते हैं और यह अपेक्षाकृत सरल है, हालांकि यह अजीब है कि संग्रह में WOFF और WOFF2 प्रारूप शामिल नहीं हैंइस लोडिंग विधि का उपयोग करते समय, जो मेरे लिए पूरी तरह से समझ से बाहर है! हालांकि, यदि आप वास्तव में प्रदर्शन को बेहतर बनाने में रुचि रखते हैं (और आपको रुचि होनी चाहिए!), तो आपको सही काम करने की कोशिश करनी चाहिए। यह लेख केवल यह दिखाता है कि यह केवल आपकी साइट पर फ़ॉन्ट डाउनलोड करने और रखने की तुलना में थोड़ा अधिक जटिल है, जैसा कि मैंने हमेशा उम्मीद की थी।

वाह, कुछ पाठ मेरी अपेक्षा से अधिक लंबा हो गया! लेकिन मुझे आशा है कि आप विषय को समझने में उतने ही इच्छुक थे जितना कि आप हैं और अब आपके पास अपनी साइट पर फ़ॉन्ट डाउनलोड को तेज करने के लिए कुछ नए विचार हैं। मैं आपको अत्यधिक फोंट के बारे में जानने के लिए ट्विटर पर जेसन और ज़ैच का अनुसरण करने की सलाह देता हूं , और एंडी समग्र वेब एप्लिकेशन गति के बारे में अधिक जानने के लिए।

क्या मुझे अपने सर्वर पर Google फ़ॉन्ट्स संग्रहीत करना चाहिए?