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

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

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

शुरुआत हो रही है

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

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

और अंत में, फ़ॉन्ट फ़ाइल का लिंक HTML कोड में, पृष्ठ में एम्बेडेड सीएसएस कोड में रखा गया था, न कि बाहरी सीएसएस फ़ाइल में।

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

अचरज

चूंकि पाठ प्रदर्शित करने के लिए विशेष फोंट आवश्यक हैं, इसलिए ब्राउज़र को उन्हें उच्च प्राथमिकता वाले संसाधनों के रूप में मानना ​​चाहिए।

नतीजतन, मुझे उम्मीद थी कि फ़ॉन्ट फ़ाइल बहुत जल्दी लोड होगी। मेरे संसाधन के पृष्ठ किसी भी मामले में, काफी "हल्के" थे, इसलिए मैंने सोचा कि कुछ भी फ़ॉन्ट फ़ाइल को लोड करने से नहीं रोकना चाहिए।

जब मैंने साइट का विश्लेषण किया, तो मुझे थोड़ा झटका लगा।

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


फ़ॉन्ट डाउनलोड से पहले छवियाँ डाउनलोड की जाती हैं

यह मुझे पूरी बकवास लग रही थी।

मुझे पता था कि फॉन्ट डाउनलोड करने से पहले ब्राउजर तब तक इंतजार कर सकता है जब तक यह पता नहीं लग जाता है कि पेज प्रदर्शित करने के लिए फॉन्ट की जरूरत है। लेकिन जिस तत्व में मेरे फ़ॉन्ट का उपयोग किया गया था, वह पृष्ठ के शीर्ष पर स्थित था <header> font <header> अंदर, फ़ॉन्ट डाउनलोड होने से पहले लोड की गई छवियों वाले टैग की तुलना में बहुत अधिक। संबंधित तत्व न केवल पृष्ठ कोड में, बल्कि DOM ट्री में भी स्थित था।

फोंट को समस्या के समाधान के रूप में लोड करना

preload विशेषता ब्राउज़र को बताती है कि उसे वर्तमान पृष्ठ को प्रदर्शित करने के लिए आवश्यक संबंधित संसाधन को प्रीलोड करना है।

इस विशेषता का उपयोग महत्वपूर्ण संसाधनों को जल्दी से डाउनलोड करने का एक अच्छा तरीका है जो अन्यथा बाद में ब्राउज़र द्वारा खोजा जाएगा।

फ़ॉन्ट फ़ाइलें इस तंत्र का उपयोग करने का एक शानदार उदाहरण हैं। यदि फ़ॉन्ट फ़ाइल का लिंक बाहरी शैली शीट में बनाया गया है, तो ब्राउज़र फ़ॉन्ट का पता नहीं लगाएगा जब तक कि वह इस शैली शीट को लोड नहीं करता।

फ़ॉन्ट फ़ाइलों पर लागू preload पर preload विशेषता का उपयोग करना ब्राउज़र को बताता है कि पृष्ठ प्रदर्शित करते समय उसे उपयुक्त फ़ॉन्ट की आवश्यकता होगी।
इसके अलावा, यह तंत्र <link> तत्व का उपयोग करके लागू करना बहुत आसान है।

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

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

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

हालांकि, मुझे पता चला कि फ़ॉन्ट को लोड करने से न्याय की बहाली हो गई, इस तथ्य से कि फ़ॉन्ट फ़ाइल अब छवि फ़ाइलों को डाउनलोड करने से पहले लोड की गई थी।

यहाँ वेबपैगेट से झरना आरेख है - मैंने उन जगहों पर प्रकाश डाला, जहां फ़ॉन्ट फ़ाइल के साथ काम दिखाया गया है। आकृति के शीर्ष पर, प्रीलोडिंग का उपयोग नहीं किया जाता है। सबसे नीचे - प्रयोग किया जाता है।


फ़ॉन्ट फ़ाइल के साथ लोड करना और काम करना।

शायद पृष्ठ लोड करने की प्रक्रिया के स्टोरीबोर्ड पर विचार करने के लिए यह अधिक उपयोगी होगा (यहां, स्पष्टता के लिए, बहुत धीमी गति से कनेक्शन की नकल का उपयोग किया गया था)।


शीर्ष स्टोरीबोर्ड में, प्रीलोडिंग का उपयोग नहीं किया जाता है। नीचे में - इस्तेमाल किया

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

यह काम क्यों किया?

वेब पेज प्रदर्शित करने के लिए, ब्राउज़र को DOM ट्री और CSSOM ट्री बनाने की आवश्यकता होती है, जो बाद में रेंडरिंग ट्री बनाने के लिए उपयोग किए जाते हैं।

ऐसा preload कि फ़ॉन्ट को डाउनलोड करने के लिए preload विशेषता वाले <link> तत्व का उपयोग करने से ब्राउज़र को डोम पूरा होने से पहले CSSOM का निर्माण शुरू करने की अनुमति मिलती है।

आप इसे निम्न छवियों में देख सकते हैं, जो क्रोम डेवलपर टूल का उपयोग करके पेज लोड करने की प्रक्रिया का अन्वेषण दिखाते हैं।

यहाँ प्रीलोड का उपयोग किए बिना पृष्ठ सामग्री के साथ काम करना कैसा दिखता है। सबसे पहले, DOM बनाया जाता है और छवि लोड की जाती है, फिर CSSOM बनाई जाती है और फ़ॉन्ट लोड किया जाता है।


प्रीलोड का उपयोग किए बिना पृष्ठ के साथ काम करें

और यहाँ भी वही है, लेकिन प्रीलोडिंग के उपयोग के साथ। यहां, ब्राउज़र CSSOM बनाना शुरू करता है, फ़ॉन्ट डाउनलोड करना शुरू करता है, और फिर यह DOM बनाता है और छवियों को डाउनलोड करना शुरू करता है।


प्रीलोड का उपयोग करके पृष्ठ के साथ काम करना

क्या प्रीलोडिंग के विकल्प हैं?

मान लीजिए कि मैं फ़ॉन्ट फ़ाइल की प्राथमिकता बढ़ाने के लिए preload विशेषता का उपयोग नहीं कर सका। तब मैं क्या कर सकता था? आप छवियों की प्राथमिकता को कम कैसे कर सकते हैं?

जिज्ञासा से बाहर, मैंने उपरोक्त विचार को लागू करने की कोशिश की और छवियों का वर्णन करने वाले तत्वों के लिए विशेषता loading="lazy" को जोड़ा। Chrome 76 में (केवल ब्राउज़र जिसने लेखन के समय इसका समर्थन किया था), इससे पृष्ठ के मूल दृश्य क्षेत्र के बाहर छवियों की प्राथमिकता कम होगी।

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

अलग-अलग ब्राउज़र अलग-अलग व्यवहार करते हैं

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

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

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

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

परिणाम

यहां हमने इस बारे में बात की है कि पेज में एम्बेड किए गए CSS कोड में उनकी फ़ाइलों के लिंक होने पर भी प्रीलोडिंग फॉन्ट को नुकसान नहीं होता है।

ब्राउज़र हमेशा वैसा व्यवहार नहीं करते जैसा हम चाहते हैं, या जैसा हम उनसे अपेक्षा करते हैं। लेकिन हमारे पास ऐसे उपकरण हैं जो ब्राउज़रों के व्यवहार को प्रभावित करने में मदद करते हैं, उन्हें उस दिशा में झुकाव में मदद करते हैं जिसकी हमें ज़रूरत है।

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

अंत में, मैं कह सकता हूं कि वेब पेजों पर टेक्स्ट के आउटपुट को गति देने के लिए फोंट लोड करना एक शानदार तरीका है।

प्रिय पाठकों! क्या आप अपने वेब प्रोजेक्ट्स में फॉन्ट प्रीलोडिंग मैकेनिज्म का उपयोग करते हैं?