🧕🏾 🤳🏽 🚉 क्रोम ऑडिट 500: भाग 1. लैंडिंग 🍘 👩🏿‍🍳 🌤️

Chrome डेवलपर टूल में ऑडिट टैब है। इस पर लाइटहाउस नामक एक उपकरण है, जो यह विश्लेषण करने का कार्य करता है कि वेब एप्लिकेशन कितना अच्छा बना है।

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

यदि आपके पास क्रोम स्थापित करने की क्षमता नहीं है, तो आप npm से लाइटहाउस स्थापित कर सकते हैं और कंसोल से इसके साथ काम कर सकते हैं।

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

प्रदर्शन

सर्वर का चयन

यह सबसे आम सलाह है, लेकिन यह वह है जो सभी उत्पादकता के लिए नींव है। सौभाग्य से, एक अच्छा समाधान खोजना सरल है, यह किसी भी टियर 3 या टियर 4 डेटा सेंटर है। यह स्थिति स्वयं गति के बारे में कुछ नहीं कहती है, यह कहती है कि मालिकों ने गुणवत्ता का ध्यान रखा।

आवेदन आरंभीकरण

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

आदर्श रूप में, यह कुछ इस तरह दिखना चाहिए:

<!DOCTYPE html> <html lang="ru"> <head> <title> </title> <link rel="manifest" href="./manifest.webmanifest"> <link rel="shortcut icon" href="content/images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width" /> <meta name="theme-color" content="#425566"> <meta name="Description" content=" "> </head> <body> <div id="loader"> loading </div> <script async> // todo:     </script> </body> </html>

इसमें कोई भी सामग्री नहीं होनी चाहिए, केवल आवेदन को शुरू करने के लिए आवश्यक कोड, जो आवेदन को स्वयं और सामग्री को लोड करेगा।

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

छप स्क्रीन का उपयोग करें

हम सभी मोबाइल एप्लिकेशन में लोड होने पर स्क्रीन को स्पलैश करने के लिए उपयोग किए जाते हैं, और यहां तक कि ऑपरेटिंग सिस्टम लोड करते समय भी, लेकिन कुछ लोग वेब एप्लिकेशन में स्प्लैश स्क्रीन का उपयोग करते हैं। यह वही है जो हम लोडर ब्लॉक में रखेंगे ताकि उपयोगकर्ता खुद को लोड न करते हुए ऊब न जाए।

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

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

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

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

आवेदन आरंभीकरण

अब जब हम चित्रों के साथ उपयोगकर्ता का ध्यान भंग कर रहे हैं, तो यह एप्लिकेशन डाउनलोड करने का समय है। ऐसा करने के लिए, हम स्क्रिप्ट ब्लॉक के अंदर निम्नलिखित स्क्रिप्ट डालें।

 // 1.  ServiceWorker,     PWA if (navigator.serviceWorker && !navigator.serviceWorker.controller) { navigator.serviceWorker.register('pwabuider-sw.js', { scope: './' }); } // 2.    [ "./content/font.css", "./content/grid.css" ].forEach(function(url){ var style = document.createElement("link"); style.href = url; style.rel = "stylesheet"; document.head.appendChild(style); }); // 3.    [ "./scripts/polyfills.min.js", //  vendors.min.js "./scripts/main.min.js" // spa  ].forEach(function(url){ const script = document.createElement("script"); script.src = url; script.async = false; document.head.appendChild(script); });

इसमें क्या शामिल है:

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

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

आलसी लोडिंग और प्रतिपादन

एक बहुत महत्वपूर्ण पैरामीटर यह है कि पहली स्क्रीन कितनी जल्दी खींची जाती है और उपयोगकर्ता इस पृष्ठ के साथ बातचीत शुरू कर सकता है। और यहाँ यह निम्नलिखित अनुकूलन का उपयोग करने के लायक है:

1. आलसी प्रतिपादन। यह केवल उस पृष्ठ के उस हिस्से को खींचने के लिए आवश्यक है जहां उपयोगकर्ता देख रहा है, और भारी घटकों या चित्रों का प्रतिपादन पहले से ही किया जाना चाहिए जब उपयोगकर्ता उनके पास कूद गया हो।

यहाँ एक अच्छा समाधान है आलसी-ब्लॉक और आलसी-एएमजी घटक:

 <div> <p></p> <lazy-img src="..."/> </div> <lazy-block>   </lazy-block> <lazy-block>   </lazy-block> <lazy-block>   </lazy-block>

मुद्दा यह है कि वे उपयोगकर्ता की स्क्रॉलिंग की निगरानी करेंगे और यदि घटक स्क्रीन क्षेत्र में आता है तो इसे खींचा जाएगा। इसकी तुलना वर्चुअल स्क्रॉलिंग ( उदाहरण ) की तकनीक से की जा सकती है जो सामाजिक नेटवर्क की दीवारों पर सभी से परिचित है। हम हमेशा के लिए स्क्रॉल कर सकते हैं, लेकिन वे कभी धीमा नहीं होते।

लेकिन Google bot के बारे में मत भूलो, जो स्पा देखता है, लेकिन पूरे पृष्ठ को स्क्रॉल नहीं करता है। इसलिए, यदि आप ध्यान नहीं रखते हैं, तो वह आपकी सामग्री को नहीं देखेगा।

2. यदि कोई भी घटक बाहरी निर्भरता का उपयोग करता है, तो उसे आवश्यक रूप से स्वयं लोड करना होगा। उदाहरण के लिए, यह नक्शे, चार्ट या 3 डी ग्राफिक्स के साथ एक ब्लॉक हो सकता है। और हाल ही में, JS में ऐसा करने का एक तरीका बहुत आसान है:

 class Demo { constructor() { this.init(); } private async init() { const module = await import('./external.mjs'); //   module.default(); module.doStuff(); } }

नतीजतन, उपयोगकर्ता केवल वही लोड करता है जो उसे चाहिए, जो उपयोगकर्ता और सर्वर संसाधनों को बहुत बचाता है।

बंड न्यूनतम

और ... हाँ, आपने इसके बारे में नहीं सोचा था, यह Terser (UglifyJS) में खनन के बारे में नहीं है, लेकिन केवल एक विशिष्ट ब्राउज़र को इसकी आवश्यकता के बारे में देने के बारे में।

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

इस कोड के साथ समस्या यह है कि इसमें बहुत सारे अतिरिक्त पाठ हैं, और इसका प्रदर्शन मूल की तुलना में 3 गुना कम (मेरे व्यक्तिपरक अनुमान के अनुसार) है। ब्राउज़रों के विभिन्न संस्करणों के लिए कई बंडल बनाना अधिक तर्कसंगत है। Chrome 73 के लिए ES2017 कोड के साथ एक बंडल न्यूनतम पॉलीफ़ाइल्स के साथ, एक बंडल जो ES11 के साथ IE11 के लिए न्यूनतम पॉलीफ़ाइल्स के साथ होता है, आदि।

मैंने पिछले लेख में एक बार में विभिन्न संस्करणों के बंडलों को इकट्ठा करने के तरीके के बारे में लिखा था। और ब्राउज़र में सही संस्करण का चयन करने के लिए, हम प्रोग्राम कनेक्शन स्क्रिप्ट को थोड़ा संशोधित करते हैं:

 var esVersion = ".es2017"; try{ eval('"use strict"; class foo {}'); }catch(e){ esVersion = ".es5"; } [ "./scripts/polyfills" + esVersion + ".min.js", "./scripts/main" + esVersion + ".min.js" ].forEach(function(url){ const script = document.createElement("script"); script.src = url; script.async = false; document.head.appendChild(script); });

नतीजतन, आधुनिक ब्राउज़रों के उपयोगकर्ताओं को सबसे हल्का और उत्पादक कार्यक्रम प्राप्त होगा, और IE11 उपयोगकर्ताओं को वह मिलेगा जो उनके योग्य हैं।

छोटा करने का एक और दिलचस्प तरीका

50% से बंडलों को कम करने के लिए एक बहुत ही दिलचस्प पुस्तकालय , दुर्भाग्य से अप्रत्याशित परिणामों के साथ।

कोड न्यूनतम

एक बहुत ही लोकप्रिय समस्या है जब डेवलपर्स अपनी आंखों पर पड़ने वाली हर चीज को जोड़ना शुरू करते हैं। नतीजतन, कभी-कभी आप ऐसे प्रोग्राम देख सकते हैं जिनका वजन 5-15 एमबी या उससे अधिक होता है। इसलिए, पुस्तकालयों की पसंद को बुद्धिमानी से संपर्क किया जाना चाहिए।

एंगुलर या रिएक्ट जैसे भारी ढांचे के बजाय, उनके अधिक हल्के समकक्षों का चयन करना बेहतर होता है: वाउ, प्रॉपक्ट, मिथ्रिल, आदि। वे अपने प्रतिष्ठित समकक्षों से किसी भी तरह से कमतर नहीं हैं, लेकिन बंडल के आकार पर बचत कई बार हो सकती है।

भारी पुस्तकालयों के उपयोग से बचें। पुस्तकालयों जैसे कि jquery, lodash, क्षण, rxjs और किसी भी अन्य का उपयोग करके minified आकार> 100kb में उपयोग करने के बजाय, एल्गोरिदम का अधिक गहराई से अध्ययन करने और देशी JS में समाधान खोजने का प्रयास करें। एक नियम के रूप में, आप एक मूल स्क्रिप्ट पर सरल लिख सकते हैं, और आप अनावश्यक भारी निर्भरता से छुटकारा पा सकते हैं।

छवि का छोटाकरण

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

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

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

 gulp.task('core-min-images', async () => { const fs = require('fs'); const path = require('path'); const glob = require('glob'); const sharp = require('sharp'); // 1.          glob const files = await new Promise((resolve, reject) => { glob('src/content/**/*.{jpeg,jpg,png}', {}, async (er, files) => { !er ? resolve(files) : reject(er); }); }); // 2.      let completed = 1; await Promise.all(files.map(async (file) => { const outFile = file.replace(/^src/, 'www'); const outDir = path.dirname(outFile); // 2.1.       if (!fs.existsSync(outDir)) { fs.mkdirSync(outDir, { recursive: true }); } // 2.2.    const origin = sharp(file); // 2.3.     1920     //       jpg/png  webp    (80%) const size1920 = origin.resize({ width: 1920 }); await size1920.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-1920w.$1')); await size1920.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-1920w.webp')); // 2.4.    480   const size480 = origin.resize({ width: 480 }); await size480.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-480w.$1')); await size480.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-480w.webp')); // 2.5.    120   const size120 = origin.resize({ width: 120 }); await size120.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-120w.$1')); await size120.toFile(outFile.replace(/\.(jpeg|jpg|png)$/, '-120w.webp')); // 2.6.      console.log(`Complete image ${completed++} of ${files.length}:`, file); })); });

नतीजतन, हमें विभिन्न स्क्रीन आकारों के लिए अनुकूलित छवियां और विशाल आकार के प्रत्येक स्रोत छवि से अलग-अलग ब्राउज़र मिलते हैं। अब हमें यह सीखने की आवश्यकता है कि उनका उपयोग कैसे किया जाए। यहाँ भी, सब कुछ सरल है, अगर पहले हमने ऐसा लिखा था:

 <img src="sample.jpg"/>

अब हमें इस तरह लिखने की आवश्यकता है:

 <picture> <source srcset="img/sample-480w.webp" type="image/webp"> <source srcset="img/sample-480w.jpg" type="image/jpeg"> <img src="img/sample-480w.jpg" alt=" !"> </picture>

और फिर ब्राउज़र स्वयं इसके लिए सबसे सुविधाजनक प्रारूप का चयन करेगा। आप इस विकल्प को उत्तरदायी छवियों के साथ भी जोड़ सकते हैं:

 <picture> <source srcset="img/sample-480w.webp, img/sample-960w.webp 2x" type="image/webp"> <source srcset="img/sample-480w.jpg, img/sample-960w.webp 2x" type="image/jpeg"> <img src="img/sample-480w.jpg" alt=" !"> </picture>

और इस तथ्य को ध्यान में रखते हुए कि अब एप्लिकेशन असेंबली चरण में चित्र बनाना संभव है, यह पता चलता है कि सभी चित्रों में प्रारूपों और अनुमतियों का एक ही सेट होगा, जिसका अर्थ है कि हम इस तर्क को एकजुट कर सकते हैं और इसे कुछ घटक के पीछे छिपा सकते हैं, उदाहरण के लिए, वही <lazy-img src="img/sample.jpg">

स्टाइल मिनिमेशन

केवल उन शैलियों को डाउनलोड करें जो आपके घटकों का उपयोग करती हैं। आदर्श रूप से, जब शैलियों को घटकों से बांधा जाता है, और घर में केवल तब ही एम्बेडेड होता है जब घटक स्वयं खींचा जाता है।

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

घर पर कम से कम

हम सभी html से परिचित हैं, लेकिन कुछ ने सोचा है कि यह बहुत ही जटिल वस्तुओं के पेड़ पर एक साधारण अमूर्तता है। Div एलिमेंट के लिए इनहेरिटेंस चेन इस प्रकार है:

HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget

और इस श्रृंखला में प्रत्येक वस्तु में 10 से 100 गुण और विधियाँ हैं जो बहुत अधिक मेमोरी का उपभोग करती हैं। और यह सभी धन डोम इंजन द्वारा उस तस्वीर को बनाने के लिए ध्यान में रखा जाना चाहिए जिसे हम देखते हैं। इसलिए, कोशिश करें कि घर में अतिरिक्त तत्वों का उपयोग न करें।

HTML को छोटा करें। लेखन के समय HTML का उपयोग करने के लिए आपके द्वारा उपयोग की जाने वाली सभी चीज़ों को हटाएँ तथ्य यह है कि ब्राउज़र में कोड लिखते समय उपयोग किए जाने वाले रिक्त स्थान घर पर वस्तुओं में भी बदल जाते हैं:

TextNode -> Node -> EventTarget

टिप्पणियों को हटाएं। वे घर का एक तत्व भी हैं और बहुत सारे संसाधनों का उपभोग करते हैं:

Comment -> CharacterData -> Node -> EventTarget

Jsx टेम्पलेट इंजन का उपयोग करना एक अच्छा अभ्यास हो सकता है। तथ्य यह है कि इसे संकलित करते समय यह देशी js कोड में बदल जाता है जो रिक्त स्थान, टिप्पणियां उत्पन्न नहीं करता है और टैग खोलने और बंद करने में कभी गलत नहीं होता है।

बुरा व्यवहार, मैं एक बुरा सपना भी कहूँगा, facebook.com है । यहाँ HTML टुकड़े हैं:

एचटीएमएल पेज स्निपेट

 <!--  1 --> <div class=""> <div class="_42ef"> <div class="_25-w"> <div class="_17pg"> <div class="_1rwk"> <form class=" _129h"> <div class=" _3d2q _65tb _7c_r _4w79"> <div class="_5rp7"> <div class="_1p1t"> <div class="_1p1v" id="placeholder-77m1n" style="white-space: pre-wrap;">  ... </div> </div> </div> </div> <ul class="_1obb"> ...li... </ul> </form> </div> </div> </div> </div> </div> <!--  2 --> <div> <div> <div class="_3nd0"> <div class="_1mwp navigationFocus _395 _4c_p _5bu_ _34nd _21mu _5yk1" role="presentation" style="" id="js_u"> <div class="_5yk2" tabindex="-1"> <div class="_5rp7"> <div class="_1p1t" style=""> <div class="_1p1v" id="placeholder-6t6up" style="white-space: pre-wrap;">    ? </div> </div> <div class="_5rpb"> <div aria-autocomplete="list" aria-controls="js_1" aria-describedby="placeholder-6t6up" aria-multiline="true" class="notranslate _5rpu" contenteditable="true" data-testid="status-attachment-mentions-input" role="textbox" spellcheck="true" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"> <div data-contents="true"> <div class="" data-block="true" data-editor="6t6up" data-offset-key="6b02n-0-0"> <div data-offset-key="6b02n-0-0" class="_1mf _1mj"> <span data-offset-key="6b02n-0-0"> <br data-text="true"> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

जैसा कि आप देख सकते हैं, दस तत्वों के एक घोंसले के शिकार का उपयोग किया जाता है, लेकिन यह घोंसला कोई काम नहीं करता है। पहला टुकड़ा केवल पाठ "एक टिप्पणी लिखें ..." और आइकन प्रदर्शित करता है, दूसरा "नया क्या है?"। DOM के इस तरह के गैर-तर्कसंगत उपयोग के परिणामस्वरूप, रिएक्ट टेंपलेटिंग इंजन का संपूर्ण प्रदर्शन बस अशक्त हो जाता है, और साइट उस सबसे धीमी गति से एक बन जाती है जिसे मैं जानता हूं।

प्रगतिशील वेब ऐप

प्रकट फ़ाइल

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

साइट पर PWA समर्थन को सक्षम करना वास्तव में बहुत सरल है। Html पेज में मैनिफ़ेस्ट फ़ाइल का लिंक शामिल करना पर्याप्त है। मेनिफेस्ट फाइल pwabuilder.com पर जेनरेट की जा सकती है।

मैं कनेक्शन प्रक्रिया पर विस्तार से नहीं रोकूंगा, क्योंकि यह खंड एक अलग बड़े लेख के योग्य है, और हब पर पहले से ही काफी अच्छे हैं।

सेवा कार्यकर्ता

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

एक उदाहरण कोड वहाँ pwabuilder.com पर पाया जा सकता है:

 // This is the service worker with the Cache-first network const CACHE = "pwabuilder-precache"; const precacheFiles = [ /* Add an array of files to precache for your app */ ]; self.addEventListener("install", function (event) { console.log("[PWA Builder] Install Event processing"); console.log("[PWA Builder] Skip waiting on install"); self.skipWaiting(); event.waitUntil( caches.open(CACHE).then(function (cache) { console.log("[PWA Builder] Caching pages during install"); return cache.addAll(precacheFiles); }) ); }); // Allow sw to control of current page self.addEventListener("activate", function (event) { console.log("[PWA Builder] Claiming clients for current page"); event.waitUntil(self.clients.claim()); }); // If any fetch fails, it will look for the request in the cache and serve it from there first self.addEventListener("fetch", function (event) { if (event.request.method !== "GET") return; event.respondWith( fromCache(event.request).then( function (response) { // The response was found in the cache so we responde with it and update the entry // This is where we call the server to get the newest version of the // file to use the next time we show view event.waitUntil( fetch(event.request).then(function (response) { return updateCache(event.request, response); }) ); return response; }, function () { // The response was not found in the cache so we look for it on the server return fetch(event.request) .then(function (response) { // If request was success, add or update it in the cache event.waitUntil(updateCache(event.request, response.clone())); return response; }) .catch(function (error) { console.log("[PWA Builder] Network request failed and no cache." + error); }); } ) ); }); function fromCache(request) { // Check to see if you have it in the cache // Return response // If not in the cache, then return return caches.open(CACHE).then(function (cache) { return cache.match(request).then(function (matching) { if (!matching || matching.status === 404) { return Promise.reject("no-match"); } return matching; }); }); } function updateCache(request, response) { return caches.open(CACHE).then(function (cache) { return cache.put(request, response); }); }

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

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

सरल उपयोग

विशेष आवश्यकता वाले लोगों के लिए शुद्धता का समर्थन करें

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

पर्याप्त विपरीत रंगों का उपयोग करें। स्वास्थ्य मंत्रालय के आंकड़ों के अनुसार, 20% लोगों को दृष्टि की समस्या है। एक गरीब विपरीत साइटें केवल उनके जीवन को जटिल बनाती हैं, और स्वस्थ लोग थकान को बढ़ाते हैं।
टैबइंडेक्स की व्यवस्था करें। आपको माउस और टच डिवाइस के बिना साइट का उपयोग करने की अनुमति देता है। कीबोर्ड का उपयोग करके संक्रमण की उचित व्यवस्था रूपों को भरने की प्रक्रिया को बहुत सरल बनाती है।
लिंक पर Aria- लेबल विशेषता। स्क्रीन पाठकों को एक विशेषता के अंदर पाठ पढ़ने की अनुमति देता है।
चित्रों में पूरी विशेषता। पिछले एक के समान। इसके अलावा, यदि यह चित्र डाउनलोड करना संभव नहीं है तो यह पाठ प्रदर्शित करेगा।
दस्तावेज़ की भाषा। एचटीएमएल टैग को भाषा लैंग = "भाषा कोड" के साथ विशेषता के साथ चिह्नित करें। यह कार्य के लिए सहायक उपकरण स्थापित करने में मदद करेगा।

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

सर्वोत्तम अभ्यास

सर्वर एप्लिकेशन से फ्रंट-एंड एप्लिकेशन को अलग करें

सबसे पहले, यदि आप अभी भी सर्वर पर HTML प्रदान कर रहे हैं, तो पहले से ही ऐसा करना बंद कर दें।परिमाण के दो आदेशों द्वारा क्लाइंट को रेंडरिंग प्रक्रिया को स्थानांतरित करना सर्वर पर लोड को कम करता है और, परिणामस्वरूप, सर्वर एप्लिकेशन को समर्थन देने की लागत। और ग्राहकों को उनके कार्यों पर त्वरित प्रतिक्रिया के साथ एक आवेदन मिलता है।

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

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

प्रॉक्सी सर्वर, HTTP / 2, gzip, कैश को कॉन्फ़िगर करना

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

SSL. SSL , , , Nginx. Nginx Asp.Net Core , .
GZIP . .
Cache . Get, Head , .
.

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

एसईओ

Html में मेटा टैग बनाएं और सिमेंटिक मार्कअप का उपयोग करें

हर कोई पहले से ही इस बारे में जानता है, और एक नियम के रूप में वे इसका उपयोग करते हैं। इसलिए, इसे ठीक करने के लिए, बस लाइटहाउस की टिप्पणियों की सूची देखें और इसे ठीक करें।

अंत

पहली नज़र में, ऐसा लग सकता है कि बहुत सारी जानकारी यहाँ लिखी गई है जिसे देखना मुश्किल है, लेकिन वास्तव में ऐसा नहीं है। यह सब जानकारी फ्रंट-एंड डेवलपमेंट की वर्तमान स्थिति को दर्शाती है, और इन सभी नियमों के अनुपालन में लगभग कोई समय नहीं लगता है।

यह आलेख वर्णन नहीं करता है कि व्यवस्थापक क्षेत्र, फ़ॉर्म और अन्य उद्यम का अनुकूलन कैसे करें, लेकिन यह दूसरा भाग होगा।

क्रोम ऑडिट 500: भाग 1. लैंडिंग

प्रदर्शन

सर्वर का चयन

आवेदन आरंभीकरण

छप स्क्रीन का उपयोग करें

आवेदन आरंभीकरण

आलसी लोडिंग और प्रतिपादन

बंड न्यूनतम

कोड न्यूनतम

छवि का छोटाकरण

स्टाइल मिनिमेशन

घर पर कम से कम

प्रगतिशील वेब ऐप

प्रकट फ़ाइल

सेवा कार्यकर्ता

सरल उपयोग

विशेष आवश्यकता वाले लोगों के लिए शुद्धता का समर्थन करें

सर्वोत्तम अभ्यास

सर्वर एप्लिकेशन से फ्रंट-एंड एप्लिकेशन को अलग करें

प्रॉक्सी सर्वर, HTTP / 2, gzip, कैश को कॉन्फ़िगर करना

एसईओ

Html में मेटा टैग बनाएं और सिमेंटिक मार्कअप का उपयोग करें

अंत

More articles: