🐦 🤦 🥃 वेब परियोजना के प्रदर्शन पर परिवर्तनशील फोंट के सकारात्मक प्रभाव पर 🌊 👝 👩🏿‍🎓

वेब फोंट के बारे में सोचते समय, और साइट के प्रदर्शन पर उनका क्या प्रभाव पड़ता है, वे अक्सर निम्नलिखित तीन संकेतकों पर ध्यान देते हैं:

फ़ॉन्ट फ़ाइलों को डाउनलोड करने के लिए अनुरोधों की संख्या।
फ़ॉन्ट फ़ाइलों का आकार।
पहले पेज रेंडरिंग तक का समय।

मैं यह जानना चाहता था कि चर फोंट का उपयोग इन संकेतकों को कैसे प्रभावित करता है। इसलिए, मैंने उनकी तुलना नियमित फोंट से की। वही मैंने किया।

फ़ॉन्ट फ़ाइलों को डाउनलोड करने के लिए अनुरोधों की संख्या कम करें

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

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

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

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

फ़ॉन्ट फ़ाइल का आकार कम करना

फ़ॉन्ट फ़ाइल आकार को कम करने के कई तरीके हैं। आमतौर पर इस प्रक्रिया में पहला कदम वेब फोंट के भंडारण के लिए सबसे कुशल प्रारूप चुनना है। उदाहरण के लिए - WOFF2।

▍Finding संदर्भ बिंदु

मैंने विभिन्न फ़ॉन्ट फ़ाइलों के आकार का अध्ययन किया। विशेष रूप से, Adobe से Sans Pro फ़ॉन्ट स्रोत का उपयोग करना । मैंने इस विशेष फ़ॉन्ट को चुना क्योंकि इसका कोड GitHub पर होस्ट किया गया है, और क्योंकि यह खुला स्रोत है।

स्रोत सैंस प्रो फ़ॉन्ट के ओटीएफ फ़ाइलों के आकारों की तुलना - एक फ़ाइल जो एक संतृप्ति के एक फ़ॉन्ट को संग्रहीत करती है और एक फ़ाइल जो एक चर फ़ॉन्ट संग्रहीत करती है।

संदर्भ बिंदु के रूप में, मैंने एक फाइल ली जिसमें स्रोत संस प्रो के मानक संस्करण के एक संतृप्ति के फ़ॉन्ट का वर्णन है। ओटीएफ प्रारूप में इसका आकार 248 Kb है। चर फ़ॉन्ट OTF फ़ाइल का आकार 405 Kb है। इसका अर्थ है कि चर फ़ॉन्ट का फ़ाइल आकार मानक स्रोत Sans Pro के एक संस्करण वाले फ़ाइल आकार से 73% बड़ा है।

लेकिन इस तथ्य पर विचार करते हुए कि चर फ़ॉन्ट फ़ाइल में किसी भी संतृप्ति के साथ फ़ॉन्ट वेरिएंट के लिए आवश्यक सभी जानकारी शामिल है, क्षमताओं के समान नियमित फ़ॉन्ट फ़ाइलों के एक सेट का आकार लगभग 1170 Kb होगा।

और यह चर फ़ॉन्ट फ़ाइल के आकार का लगभग 3 गुना है।

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

And ओटीएफ और WOFF2 प्रारूपों के सहयोग

ओटीएफ फाइलें, संकुचित प्रारूप WOFF और WOFF2 की तुलना में, काफी बड़ी हो जाती हैं।

एक फ़ॉन्ट विकल्प के साथ एक फ़ाइल: OTF - 234 Kb, WOFF2 - 111 Kb। चर फ़ॉन्ट फ़ाइल: OTF - 405 KB, WOFF2 - 112 KB।

यदि आप विभिन्न स्वरूपों के फ़ाइल आकारों की तुलना करते हैं, तो यह पता चला है कि आप बस WOFF2 प्रारूप का उपयोग करके फ़ाइल आकार को बहुत कम कर सकते हैं।

यह मुझे दिलचस्प लगा कि वेरिएबल फॉन्ट डेटा स्टोर करते समय WOFF2 फॉर्मेट का उपयोग करके कितनी बचत प्रदान की जाती है। तथ्य यह है कि फ़ाइल का आकार 405 Kb से घटकर 112 Kb है इस तथ्य की ओर जाता है कि चर फ़ॉन्ट फ़ाइल लगभग उसी आकार की फ़ाइल है जो मानक स्रोत प्रो के केवल एक संस्करण को संग्रहीत करता है।

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

फोंट के सबसेट का उपयोग कर फ़ाइल का आकार कम करना

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

फोंट का सबसेट बनाने से कुछ जोखिम होता है। सबसेट का उपयोग करने से पाठ के कुछ हिस्से फ़ॉलबैक फ़ॉन्ट का उपयोग करके प्रदर्शित हो सकते हैं। यह तब हो सकता है यदि आवश्यक वर्ण गलती से उपयोग किए गए फ़ॉन्ट से हटा दिए गए थे।

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

मैंने स्रोत सैंस प्रो के मानक और चर संस्करणों को ग्लिफ़ेंजर और लैटिन वर्णमाला के लोअरकेस और अपरकेस वर्णों के साथ-साथ संख्याओं और विशेष वर्णों जैसे विस्मयादिबोधक बिंदुओं के साथ संसाधित किया।

फ़ाइल आकार को कम करने के लिए फोंट के सबसेट का उपयोग करना।

इस ऑपरेशन ने हमें एक फ़ाइल के आकार को कम करने की अनुमति दी जिसमें 111 केबीटी से 16 केबीटी तक एक संतृप्ति का फ़ॉन्ट है (85% की बचत बहुत अच्छी है)। एक चर फ़ॉन्ट के मामले में, फ़ाइल का आकार 112 Kb से घटकर 27 Kb (75% बचत का स्वीकार्य स्तर) है।

फिर, इन परिणामों ने मुझे चौंका दिया। मुझे उम्मीद थी कि एक वैरिएबल फॉन्ट फाइल बड़ी होगी। यह देखते हुए कि सामान्य स्थितियों में वे सामान्य और बोल्ड संतृप्ति के समान फ़ॉन्ट का उपयोग करते हैं, यह पता चलता है कि 27 KB की एक चर फ़ॉन्ट फ़ाइल दो फ़ाइलों से छोटी है, जिनमें से प्रत्येक में अलग-अलग संतृप्ति के एक ही फ़ॉन्ट के बारे में जानकारी है। नतीजतन, मेरा मानना है कि यह दृष्टिकोण बहुत अच्छी बचत प्रदान करता है।

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

। फ़ाइल आकार के संबंध में अतिरिक्त विचार

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

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

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

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

पहले रेंडर करने के लिए समय कम करें

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

▍FOIT

यह वही है जो एफओआईटी जैसा दिखता है।

एफओआईटी के दृश्य अभिव्यक्ति का एक उदाहरण

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

▍FOUT

और यहाँ FOUT का एक उदाहरण है।

"गैर-शैली वाले पाठ के फ्लैश" के FOUT के दृश्य प्रकटन का एक उदाहरण तब होता है यदि पाठ को पहली बार बैकअप फ़ॉन्ट का उपयोग करके प्रदर्शित किया जाता है, और फिर जब वांछित फ़ॉन्ट उपलब्ध होता है, तो यह इसे स्विच करता है या पहले उपयोग किए गए फ़ॉन्ट को बदल देता है।

मेरा मानना है कि यदि उपयोगकर्ता पृष्ठ की सामग्री को पढ़ने में असमर्थता के बजाय FOUT से सामना करता है तो यह बेहतर है। इसलिए, यह सबसे अच्छा है, अगर एक तरफ, हम उपयोगकर्ता के सामने फ़्यूज़ की उपस्थिति के साथ एक विकास परिदृश्य की परिकल्पना करते हैं, और दूसरी ओर, हम इसे यथासंभव कम बनाने की कोशिश करते हैं जो परियोजना की प्रयोज्यता को प्रभावित करते हैं।

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

font-display: swap;

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

मानक फोंट के साथ काम करते समय, हम इस तरह के गुणों को संशोधित कर सकते हैं line-height, font-sizeऔर letter-spacingऐसा करने के लिए फ़ॉन्ट को बदलने के लिए पाठ को अनुकूलित करने और इस प्रक्रिया के दौरान होने वाली सामग्री की शिफ्ट को कम करने के लिए। आप इसे शानदार फ़ॉन्ट स्टाइल मिलान उपकरण के साथ कर सकते हैं । यह मोनिका डिंकल्सस्कु द्वारा बनाया गया था , जो हेलेन होम्स के इस उत्कृष्ट लेख से प्रेरित था (गंभीरता से - एक अद्भुत लेख - मैं इसे पढ़ने की सलाह देता हूं)।

मुझे उम्मीद है कि समय के साथ, चर फोंट ऑपरेटिंग सिस्टम के लिए व्यापक समर्थन का आनंद लेंगे। यह आपको बैकअप के रूप में सिस्टम चर फ़ॉन्ट का उपयोग करके लेआउट में परिवर्तन को कम करने की अनुमति देगा।

बैकअप चर फ़ॉन्ट की

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

यह सिर्फ अद्भुत होगा, और मुझे आशा है कि ऐसा होगा।

सारांश

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

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

यदि हम मौजूदा प्रदर्शन चुनौतियों में से कुछ को संभाल सकते हैं, तो यह हमें डिजाइन पर अधिक ध्यान देने की अनुमति देगा। यही है, अब आपको डिज़ाइन और पृष्ठ प्रदर्शन के बीच समझौता करने की आवश्यकता नहीं है।

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

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

वेब परियोजना के प्रदर्शन पर परिवर्तनशील फोंट के सकारात्मक प्रभाव पर