GooglePage स्पीड के लिए वेबसाइट ऑप्टिमाइज़ेशन (सभी सुविधाओं को उसके अपडेट के बाद ध्यान में रखा जाता है) भाग 1

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

मैं स्वयं अधिक व्यावहारिक सलाह दूंगा, और आपकी बातों को सुनना और आपकी सर्वोत्तम प्रथाओं को देखना भी दिलचस्प होगा।

मैं इस लेख में इस बारे में बात करूंगा कि मैं क्या करूंगा:

1. सीएसएस और जेएस
   
   • फ़ाइल कनेक्शन
   • पुस्तकालयों को लोड करना
   • चाल
   
   
2. फ़ॉन्ट्स
   
   • फ़ॉन्ट कनेक्शन
   • पेज लोड के दौरान फोंट प्रदर्शित करें
   
   
3. छवि
   
   • विभिन्न प्रारूप (jpg, png, webp, base64)
   • प्रेत

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

सीएसएस और जेएस

जे एस

1. प्लग-इन स्क्रिप्ट (jQuery को छोड़कर) के लिए async संपत्ति की आवश्यकता होगी। यह निश्चित रूप से आपको एसिंक्रोनस स्क्रिप्ट लोडिंग के बारे में GPSpeed ​​की टिप्पणी से बचाएगा।
2. सलाह आम है, लेकिन यह बहुत समझदार है - जटिल और बड़े पैमाने पर पुस्तकालयों का उपयोग न्यूनतम करने के लिए करें।
3. अपनी js लाइब्रेरी सेटिंग्स (स्लीक, फैंसीबॉक्स) या कोड के छोटे टुकड़ों को अपलोड करना बेहतर है जो सर्वर पर एक फाइल के साथ विभिन्न कार्य करते हैं। मेरे मामले में, मेल भेजने के लिए स्क्रिप्ट, और इनपुट और एनीमेशन के लिए मुखौटा और सब कुछ एक ही build.js फ़ाइल में है (जिसके लिए मैंने async भी सेट किया है।
4. यह सलाह स्थितिजन्य है, अर्थात स्थिति को देखें। यदि आपके पास इसकी पहली स्क्रीन पर पेज खोलने के बाद किसी प्रकार की स्क्रिप्ट चल रही है, तो इसे अलग से कनेक्ट करने के लिए अधिक सही होगा और async न दें

सीएसएस

1. यहाँ थोड़ा और जटिल है। आपको लिंक टैग में ऐसी संपत्ति जोड़ने की आवश्यकता होगी।
   
   

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css> 

   
   यह इस रूप में है कि आपकी सीएसएस फाइलें डोम ट्री के बाद ही जुड़ी होंगी। मोटे तौर पर, यह केवल .css के लिए समान async है
2. बहुत महत्वपूर्ण और प्रभावी सलाह! वह 5 से 10 अंकों की गारंटी देता है। आपको अपने main.css को दो फ़ाइलों में विभाजित करने की आवश्यकता है। पहले में केवल वे शैलियाँ होंगी जो पृष्ठ खोलने के तुरंत बाद दिखाई देने वाली सामग्री के लिए भरी हुई हैं। यह शीर्ष पट्टी, शीर्ष लेख, पहला चित्र, पहला फ़ॉर्म आदि है। सामान्य तौर पर, आप अपनी साइट के "चेहरे" पर क्या डालते हैं। दूसरे में, बाकी सब कुछ पहले से ही है।

फोंट

मैंने फोंट के लिए एक नई सीएसएस संपत्ति की खोज की

 font-display 

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

यह इस तरह दिखेगा

  @font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } 

ऐसी एक स्क्रिप्ट भी है (आपको इसके संचालन के लिए fontfaceobserver.js कनेक्ट करना होगा):

 <script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script> 

व्यक्तिगत रूप से, मैंने वास्तव में मदद नहीं की, लेकिन आप कोशिश करते हैं, शायद आप इसे बेहतर तरीके से नियंत्रित कर सकें। आखिरकार, मैंने उसे विशाल में पाया, और लोगों ने कहा कि वास्तव में मदद करता है।

फ़ॉन्ट कनेक्शन

1. मूल रूप से, दो प्रकार के कनेक्शन होते हैं - एक लिंक का उपयोग करना (उदाहरण के लिए, Google फोंट, या स्थानीय रूप से, सर्वर पर। इसलिए, दूसरी विधि के संबंध में, इसे 2 में भी विभाजित किया जा सकता है: एक अलग सीएसएस फ़ाइल (लिंक का उपयोग करके हम फोंट कनेक्ट करते हैं।) ) और कोड के माध्यम से सीधे (अपने style.css के माध्यम से)।
   और जब से अब हम GPSpeed ​​के लिए साइट को अनुकूलित करने के बारे में बात कर रहे हैं, मैंने यह सुनिश्चित किया कि फॉन्ट को आपकी मुख्य css फ़ाइल के माध्यम से जोड़ना बेहतर है।
2. और एक अन्य टिप जो आपकी सीएसएस फ़ाइल के बगल में फ़ॉन्ट फ़ाइलों (woff, ttf, आदि) को डालने में मदद करती है जो इसे अनुरोध करती है। मैं फोंट के लिए सर्वर पर एक अलग फ़ोल्डर हुआ करता था, लेकिन फिर मैंने उनकी फ़ॉन्ट डाउनलोड गति 2 गुना बढ़ा दी। (GPSpeed ​​के अनुसार, मुलर फ़ॉन्ट को जोड़ने के लिए मुझे पहले 180ms लगे, अब 70-90ms)

चित्र, चित्र आदि।

मैं अगले 2 सुझावों की गारंटी देता हूं, उन्होंने न केवल मुझे, बल्कि पूरे कार्यालय और यहां तक ​​कि मेरे दोस्तों को भी दूर से काम करने में मदद की।

1. आलसी लोडिंग का उपयोग करके बिल्कुल सभी <img > चित्र डाउनलोड करें। यह इस तरह दिखेगा

 <img class="yourClass lazy" data-src="../images/image.jpg" alt=""/> 

और lazyload.min.js कनेक्ट करना न भूलें

2. यदि आपके पास पृष्ठ पर कई sv जी तत्व हैं, तो उन्हें img टैग के अनावश्यक उपयोग के बिना, स्वच्छ कोड के साथ जोड़ना बेहतर है। इसके अलावा, इस साइट jakearchibald.imtqy.com/svgomg (विज्ञापन नहीं) का उपयोग करके, उदाहरण के लिए, svg को निचोड़ने की आवश्यकता है।

3. ट्राइट, लेकिन साइट पर सभी चित्रों को निचोड़ना मत भूलना। वो भी जिनका वजन 5kb है। यद्यपि ये 3 kb जो आप जीतते हैं, किसी भी तरह से डाउनलोड की गति को प्रभावित नहीं करेंगे, आपको GPSpeed ​​पर त्रुटि से छुटकारा मिल जाएगा, और अपने आप को 10 अंकों तक जोड़ देंगे।

! अब समस्या बिंदु छवि प्रारूप है। अर्थात्, हम webp, JPEG 2000, JPEG XR के बारे में चिंतित हैं। दरअसल, अब यह अनुशंसित GPSpeed ​​एक्सटेंशन में से एक है। जैसा कि आप जानते हैं, वे अभी भी कुछ ब्राउज़रों द्वारा समर्थित नहीं हैं, जिनमें से काफी लोकप्रिय मोज़िला फ़ायरफ़ॉक्स है। हालांकि उन्होंने घोषणा की कि मार्च में इस प्रारूप के लिए पूर्ण समर्थन मिलेगा , फिर भी हमें एक और वर्ष इंतजार करना होगा जब तक कि इस ब्राउज़र के सभी उपयोगकर्ताओं को नवीनतम संस्करण में अपडेट नहीं किया जाता है ... मैंने साइटों के एक समूह, लिपियों के झुंड के माध्यम से अफवाह की, लेकिन मुझे कुछ भी अनुकूल नहीं मिला। तो अब आपका प्रश्न पूछने का मेरा समय है: क्या आप वेब प्रारूप या किसी अन्य नए छवि प्रारूप का उपयोग कर रहे हैं? और आप इसे कैसे करते हैं?