🥑 🗃️ 👩🏿 फ्रंट एंड परफॉर्मेंस भाग 3 - फ़ॉन्ट अनुकूलन 🕺🏽 🧝 👩‍🏭

एक अनुवादक से: यह मोज़िला आइडेंटिटी टीम से Node.js श्रृंखला में आठवां लेख है, जो पर्सोना प्रोजेक्ट में शामिल है।

श्रृंखला के सभी लेख:

हम फोंट के सबसेट का उपयोग करके, 300% से 45 किलोबाइट तक पर्सन के लिए फ़ॉन्ट आकार 85% तक कम करने में सक्षम थे। यह आलेख इस बारे में बात करता है कि हमने यह कैसे किया और हमने कौन से उपकरण का उपयोग किया।

कनेक्ट-फोंट का परिचय

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

यदि आप इंटरनेट पर फोंट के साथ काम करने में बहुत अच्छे नहीं हैं, तो हमने विषय @font-face पर लिंक का एक छोटा संग्रह एकत्र किया है । [ अनुवादक से: और Habré पर वेब फोंट की उत्पादकता के लिए समर्पित लेख बहुत उपयोगी है ]

स्थिर और गतिशील फ़ॉन्ट लोड हो रहा है

जब आप सभी उपयोगकर्ताओं को बस एक बड़ी फ़ॉन्ट फ़ाइल देते हैं, तो सब कुछ काफी सरल होता है:

अपनी CSS फ़ाइल में @font-face block लिखें;
TTF या OTF में स्रोत से वेब के लिए फॉन्ट फाइल्स जेनरेट करें और एक डायरेक्टरी में रखें, जिस तक वेब सर्वर की पहुँच हो;
यदि आप फ़ायरफ़ॉक्स और IE9 + की एक ही स्रोत नीति से फोंट पर लागू होते हैं, तो कॉर्स हेडर कॉन्फ़िगर करें यदि आप एक अलग डोमेन से फोंट का संदर्भ लेते हैं।

ये सरल कदम हैं। पहले दो को और भी आसान बनाया जा सकता है, उदाहरण के लिए, FontSquirrel , एक ऑनलाइन फ़ॉन्ट जनरेटर जो स्वचालित रूप से फ़ॉन्ट फ़ाइलें और CSS कोड बनाएगा। CORS हेडर जोड़ने के लिए, आपको Apache या Nginx प्रलेखन पढ़ना होगा, लेकिन यह बहुत मुश्किल नहीं है।

लेकिन अगर आप फोंट के सबसेट का पूरा फायदा उठाना चाहते हैं, तो चीजें जटिल हो जाती हैं। आपको प्रत्येक स्थान के लिए अलग फ़ॉन्ट फ़ाइलों की आवश्यकता होगी, और आपको गतिशील रूप से @font-face घोषणाओं को बदलने की आवश्यकता होगी ताकि वे सही URL पर इंगित करें। आपको कॉर्स से भी निपटना होगा। यह ऐसी समस्याएं हैं जो कनेक्ट-फोंट को हल करती हैं।

फ़ॉन्ट सबस्क्रिप्शन: एक अवलोकन

डिफ़ॉल्ट रूप से, प्रत्येक फ़ॉन्ट में कई वर्ण होते हैं - लैटिन वर्णमाला, फ्रेंच या जर्मन जैसी भाषाओं के लिए डायट्रीटिक्स, ग्रीक या सिरिलिक जैसे अतिरिक्त अक्षर। कई फोंट में वर्ण भी होते हैं, खासकर यदि वे यूनिकोड का समर्थन करते हैं (उदाहरण के लिए, एक स्नोमैन चरित्र - )। चित्रलिपि के लिए समर्थन के साथ फोंट भी हैं। यह सब फ़ॉन्ट फ़ाइल में निहित है, ताकि यह व्यापक संभव दर्शकों के लिए उपयोगी हो। यह लचीलापन बड़े फ़ाइल आकार की ओर जाता है। Microsoft एरियल यूनिकोड, जिसमें सभी Uncode 2.1 अक्षर हैं, का वजन अविश्वसनीय 22 मेगाबाइट है!

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

फोंट के सबसेट का उपयोग करते समय प्रदर्शन लाभ

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

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

विभिन्न स्थानों के लिए उपसमुच्चय के साथ ओपन सैन्स की नियमित पूर्ण फ़ॉन्ट आकार की तुलना:

Gzip संकुचित रूप में समान:

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

कनेक्ट-फोंट का उपयोग करते हुए, हमने मोज़िला पर्सन में 300 से 45 किलोबाइट तक 85% की कमी हासिल की। यह एक विशिष्ट 3 जी कनेक्शन पर 2 सेकंड के बूट समय और 2 जी पर एक दर्जन सेकंड के बराबर है।

आगे अनुकूलन

यदि आप हर अतिरिक्त बाइट से छुटकारा चाहते हैं, तो आप कनेक्ट-फोंट को कॉन्फ़िगर कर सकते हैं ताकि यह सीएसएस को एक फ़ाइल के रूप में नहीं लौटाए, लेकिन एक स्ट्रिंग के रूप में जिसे साझा फ़ाइल में शामिल किया जा सके। इसके अलावा, डिफ़ॉल्ट रूप से कनेक्ट-फोंट एक न्यूनतम @font-face घोषणा उत्पन्न करता है, बिना उन स्वरूपों में फ़ाइलों को शामिल किए जो एक विशेष ब्राउज़र स्वीकार नहीं करता है।

कनेक्ट-फोंट आवेदन उदाहरण

मान लीजिए कि हमारे पास एक साधारण एक्सप्रेस एप्लिकेशन है जो क्लाइंट को वर्तमान समय बताता है:

 // app.js const ejs = require('ejs'), express = require('express'), fs = require('fs'); var app = express.createServer(), tpl = fs.readFileSync(__dirname, '/tpl.ejs', 'utf8'); app.get('/time', function(req, res) { var output = ejs.render(tpl, { currentTime: new Date() }); res.send(output); }); app.listen(8765, '127.0.0.1');

सबसे आदिम टेम्पलेट का उपयोग करना:

 // tpl.ejs <!doctype html> <p>the time is <%= currentTime %>

हम ओपन सेन्स के स्थानीयकृत सबसेट को रेंडर करने के लिए कनेक्ट-फोंट को जोड़ेंगे - पैकेज में शामिल कई तैयार सेटों में से एक।

आवेदन परिवर्तन

सबसे पहले, आवश्यक पैकेज स्थापित करें:

  $ npm install connect-fonts $ npm install connect-fonts-opensans

मिडलवेयर कनेक्ट करें:

  // app.js     connect-fonts const ejs = require('ejs'), express = require('express'), fs = require('fs'), // : connect_fonts = require('connect-fonts'), opensans = require('connect-fonts-opensans'); var app = express.createServer(), tpl = fs.readFileSync(__dirname, '/tpl.ejs', 'utf8');

हम मॉड्यूल को इनिशियलाइज़ करते हैं:

 //  app.js //    app.use: app.use(connect_fonts.setup({ fonts: [opensans], allow_origin: 'http://localhost:8765' })

connect_fonts.setup() निम्न तर्क लेता है:

fonts - आवश्यक फोंट की एक सरणी
allow_origin - वह स्रोत जिससे हम फ़ॉन्ट लेते हैं; कनेक्ट-फोंट फ़ायरफ़ॉक्स 3.5+ और IE9 + ब्राउज़रों के लिए Access-Control-Allow-Origin हेडर सेट करने के लिए इस जानकारी का उपयोग करता है।
ua (वैकल्पिक) - उपयोगकर्ता-एजेंटों की एक सूची जिसे हम फोंट देते हैं। डिफ़ॉल्ट रूप से, कनेक्ट-फोंट अनुरोध पर उपयोगकर्ता-एजेंट को निर्धारित करता है, यह स्वयं तय करता है कि कौन से फ़ाइल स्वरूपों को घोषणा में शामिल करना है। इस व्यवहार को बदला जा सकता है यदि आप ua: 'all' - तो सभी उपलब्ध प्रारूप शामिल होंगे।

मार्ग के अंदर, आपको टेम्पलेट को लोकेल पास करना होगा:

  //  app.js app.get('/time', function(req, res) { var output = ejs.render(tpl, { //    : userLocale: detectLocale(req), currentTime: new Date() }); res.send(output); });

Mozilla Persona लोकेल निर्धारित करने के लिए i18n- abide का उपयोग करता है। एक बहुत अच्छा लोकेल मॉड्यूल भी है, जो दोनों npm के माध्यम से उपलब्ध हैं। लेकिन, उदाहरण को जटिल नहीं करने के लिए, हम Accept-language अनुरोध क्षेत्र से पहले दो अक्षर लेते हैं:

  //    function detectLocale(req) { return req.headers['accept-language'].slice(0,2); } app.listen(8765, '127.0.0.1'); //  app.js

टेम्प्लेट परिवर्तन

अब आपको टेम्पलेट को अपडेट करने की आवश्यकता है। कनेक्ट-फोंट ग्रहण मार्गों को निम्नानुसार लिखा जाता है:

 /:locale/:font-list/fonts.css

उदाहरण के लिए:

 /fr/opensans-regular,opensans-italics/fonts.css

हमारे मामले में, हमें उस पथ के साथ स्टाइलशीट के लिए एक लिंक जोड़ना होगा जो कनेक्ट-फोंट की अपेक्षा रखता है:

 // tpl.ejs -   connect-fonts <!doctype html> <link href="/<%= userLocale %>/opensans-regular/fonts.css" rel="stylesheet">

और पेज कोड में एक फ़ॉन्ट शैली जोड़ें:

  //  tpl.ejs <style> body { font-family: "Open Sans", "sans-serif"; } </style> <p>the time is <%= currentTime %>

वह सब है। कनेक्ट-फोंट द्वारा उत्पन्न सीएसएस उपयोगकर्ता के स्थान और ब्राउज़र पर निर्भर करता है। अंग्रेजी लोकेल के लिए यहां एक उदाहरण दिया गया है:

  *      ua   'all' */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/fonts/en/opensans-regular.eot'); src: local('Open Sans'), local('OpenSans'), url('/fonts/en/opensans-regular.eot#') format('embedded-opentype'), url('/fonts/en/opensans-regular.woff') format('woff'), url('/fonts/en/opensans-regular.ttf') format('truetype'), url('/fonts/en/opensans-regular.svg#Open Sans') format('svg'); }

यदि आप किसी एकल HTTP अनुरोध को सहेजना चाहते हैं, तो आप CSS कोड को एक स्ट्रिंग के रूप में प्राप्त करने के लिए connect_fonts.generate_css() विधि का उपयोग कर सकते हैं और इसे एक सामान्य CSS फ़ाइल में शामिल कर सकते हैं।

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

Zklyuchenie

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

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