संक्षेप में जवाब
साइट की गति आमतौर पर चार चीजों के लिए नीचे आती है: चित्र, वेब फोंट, तीसरे पक्ष की स्क्रिप्ट और प्रतिपादन अवरुद्ध कार्य। यहां प्रत्येक परत क्या करता है, कैसे अपने आप को दूषण के बिना एक परिवर्तन को मापने के लिए, और क्या एक लक्षित निर्धारण लागत है।
संक्षिप्त उत्तर: क्या वास्तव में यह तय करता है कि कैसे तेजी से एक पृष्ठ महसूस करता है
साइट की गति उन चार चीजों से नीचे आती है जिन्हें आप इंगित कर सकते हैं: लेआउट की जरूरतों की तुलना में अधिक डेटा ले जाने वाली छवियां, वेब फोंट जो पाठ को वापस पकड़ती हैं, तीसरे पक्ष की लिपियां एनालिटिक्स और चैट के लिए जोड़ती हैं, और रेंडर-ब्लॉकिंग कार्य - शैलियों और स्क्रिप्ट एक ब्राउज़र बिना पेंट करने से इनकार कर देता है।
अन्य सभी - होस्टिंग, कैशिंग, प्रोटोकॉल, डेटाबेस - मामले भी, लेकिन यह बातचीत की दूसरी परत से संबंधित है। सबसे पहले पृष्ठ डाउनलोड और किस क्रम में देखें, फिर जहां यह उन फ़ाइलों को प्राप्त करता है और कितनी जल्दी सर्वर जवाब देता है।
एक मालिक के लिए यह तय करना कि क्या किसी को नियुक्त करना है, यह अच्छी खबर है। सूची लघु और चेकेबल है। आपको यह समझने की जरूरत नहीं है कि कैसे एक ब्राउज़र चार ठोस प्रश्नों को पूछने के लिए काम करता है और यह सुनने के लिए कि क्या जवाब तथ्यों से बना है या फिर आश्वासन देता है।
नीचे दिए गए अनुभाग प्रत्येक परत को बदले में लेते हैं: क्या होता है, आगंतुक इसे क्यों नोटिस करता है, सामान्य रूप से इसके बारे में क्या किया जाता है, और जहां डेवलपर की जिम्मेदारी समाप्त होती है। तकनीकी अंक MDN के प्रदर्शन प्रलेखन का पालन करते हैं और अंत में W3C अभिगम्यता मार्गदर्शन जुड़े हुए हैं।
क्या एक आगंतुक वास्तव में नोटिस करता है?
आगंतुक मिलीसेकेंड की गणना नहीं करते हैं। वे तीन क्षण दर्ज करते हैं: जब कुछ स्क्रीन पर दिखाई देता है, जब वह हिस्सा दिखाई देता है - एक हेडलाइन, एक कीमत, एक उत्पाद फोटो - और जब पृष्ठ अपने नल का जवाब देना शुरू कर देता है।
MDN इसे कथित प्रदर्शन के रूप में व्यवहार करता है: किसी पेज को कितनी तेजी से महसूस होता है, इस पर निर्भर करता है कि क्या दिखाया गया है और किस क्रम में, न केवल कुल लोड समय पर। एक पृष्ठ अब समग्र रूप से ले सकता है और फिर भी जल्दी महसूस कर सकता है यदि यह उपयोगी किस्तों में अर्थ प्रदान करता है।
व्यावहारिक परिणाम यह है कि आप एक रिपोर्ट में औसत के बजाय पहली उपयोगी स्क्रीन के रास्ते को अनुकूलित करते हैं। जब कोई व्यक्ति पिछले आने के लिए आया था, तो उसके आसपास सब कुछ तेजी से अनुभव को बदलने के बिना एक नंबर बदल जाता है।
इसके विपरीत भी विपरीत है। एक ऐसा पेज जो टेक्स्ट को तुरंत पेंट करता है लेकिन दूसरे के लिए टैप को अनदेखा करता है। उत्तरदायित्व गति का एक हिस्सा है, और यह मुख्य धागे को मुक्त रखने के बजाय आपके चित्रों को कितने छोटे हैं।
छवियाँ: वजन, आयाम और प्रारूप
छवियाँ एक पूर्वानुमानित तरीके से गलत हो जाती हैं। एक फ़ाइल अपने मूल संकल्प पर लेआउट में जाती है और उस आकार के एक अंश पर प्रदर्शित होती है। ब्राउज़र सभी को डाउनलोड करता है और फिर परिणाम को स्केल करता है: बाइट्स के लिए भुगतान किया जाता है, पिक्सल कभी नहीं देखा जाता है।
तीन आदतें तय करती हैं कि। Srcset और आकारों के माध्यम से कई आकारों की सेवा करें ताकि एक फोन को एक फोन-आकार की फ़ाइल मिलती है। ऐसे WebP या AVIF जहां समर्थन की अनुमति देता है के रूप में वर्तमान प्रारूपों का उपयोग करें। और आयामों पर निर्यात करें, वास्तव में कंटेनर को चीजों को सिकुड़ने के लिए सीएसएस पर भरोसा करने की बजाय जरूरत है।
आलसी लोडिंग अपनी खुद की सजा के लायक है। लोड हो रहा है="lazy" विशेषता फोल्ड के नीचे की छवियों को सूट करती है, लेकिन पेज के शीर्ष पर एक नहीं: निश्चित करें कि और आप वास्तव में उस क्षण को स्थगित कर दें जब आगंतुक ने पृष्ठ को खोला।
हमेशा चौड़ाई और ऊंचाई निर्धारित करें, या एक पहलू अनुपात। इसके पास फ़ाइल वजन के साथ कुछ भी नहीं करना है और ब्राउज़र को अग्रिम रूप से अंतरिक्ष आरक्षित करने की अनुमति देने के लिए सब कुछ करना है, इसलिए अंततः चित्र आने पर पाठ कूद नहीं जाता है।
क्यों पाठ सीधे दूर दिखाई नहीं देता
एक ब्राउज़र तुरंत वेब फ़ॉन्ट की खोज नहीं करता है। यह पहली बार सीएसएस लाने और पार्स करने के लिए है, और उसके बाद ही पता चलता है कि कौन से फ़ॉन्ट फ़ाइल अनुरोध करने के लिए। इसलिए एक लिंक्ड फ़ॉन्ट में सेट किया गया पाठ इसके चारों ओर मार्कअप की तुलना में बाद में आता है।
उस अंतराल के दौरान क्या होता है? इसके डिफ़ॉल्ट रूप से बाएं, एक ब्राउज़र टेक्स्ट को अदृश्य रख सकता है जबकि यह इंतजार करता है। swap मान यह बताता है कि सिस्टम गिरने को तुरंत दिखाने के लिए और बाद में प्रतिस्थापित करने के लिए, इसलिए पाठक स्टाइल से पहले शब्द प्राप्त करता है।
फिर वहाँ मात्रा है। एक साइट को प्रत्येक वर्णमाला युक्त एक फ़ॉन्ट फ़ाइल की आवश्यकता नहीं होती है; वास्तव में उपयोग में वर्णों को सबसेट करना वास्तविक वजन में कटौती करता है। एक परिवर्तनीय फ़ॉन्ट तीन या चार स्थैतिक भार को प्रतिस्थापित कर सकता है, और एक महत्वपूर्ण फ़ाइल को प्रीलोड करने से एक हेडलाइन पर रोकें।
प्रतिस्थापन की लागत उस समय वास्तविक फ़ॉन्ट भूमि पर एक बदलाव है। आप इसी तरह के मैट्रिक्स के साथ एक गिरावट का चयन करके इसे कम करते हैं। यह एक दोष के बजाय एक व्यापार बंद है: विकल्प अदृश्य पाठ और पाठ के बीच है जो थोड़ा चल रहा है।
थर्ड पार्टी स्क्रिप्ट: एनालिटिक्स, चैट, पिक्सेल और विजेट
एनालिटिक्स, विज्ञापन पिक्सेल, एक समर्थन चैट, एक नक्शा, एक समीक्षा विजेट, एक टैग मैनेजर। प्रत्येक व्यक्ति किसी और के डोमेन और कोड के लिए एक कनेक्शन जोड़ता है जो अपने स्वयं के इंटरफ़ेस के रूप में उसी मुख्य धागे पर चलता है।
यह मुश्किल नहीं है कि वे मौजूद हैं लेकिन आप उन्हें नियंत्रित नहीं करते हैं। उनका आकार और व्यवहार उस विक्रेता द्वारा निर्धारित किया जाता है जो उन्हें जहाज करते हैं, और उस पक्ष पर किए गए बदलाव उसी दिन आपके पृष्ठ की समस्या बन जाती है।
इसलिए एक सूची रखें: लोड क्या है, जिसने इसके लिए पूछा, और यह क्या रिटर्न देता है। कंपनी के अंदर कोई मालिक के साथ स्क्रिप्ट आमतौर पर एक ऐसे अभियान से बच जाते हैं जो एक साल पहले समाप्त हो गया था और उन्हें हटाने के लिए लंबे समय तक बहस की जरूरत नहीं है।
जो भी रहता है उसे स्थगित कर दिया जा सकता है। पेज लोड के बजाय एक उपयोगकर्ता कार्रवाई पर चैट और मानचित्र को लोड करें। एक "Message us" बटन जो अपने विजेट को केवल एक क्लिक लागत के बाद हर किसी को जो आने वाले किसी विजेट की तुलना में कम खींचता है।
रेंडर-ब्लॉकिंग कार्य: सीएसएस और सिंक्रोनस जावास्क्रिप्ट
कुछ भी पेंटिंग से पहले, एक ब्राउज़र को स्टाइल ट्री का निर्माण करना पड़ता है। सिर में स्टाइलशीट इसलिए रेंडर-ब्लॉकिंग हैं: जब तक वे प्राप्त हो जाते हैं और उन्हें पार कर जाते हैं, तब तक पृष्ठ खाली रहता है जब एचटीएमएल पूर्ण हो गया है।
स्क्रिप्ट समान रूप से लेकिन अधिक कड़ाई से व्यवहार करते हैं। एक सादे स्क्रिप्ट टैग HTML पार्सिंग को बंद कर देता है जबकि यह डाउनलोड और रन करता है। निश्चित विशेषता क्रम को पार्सिंग और संरक्षित करने के बाद निष्पादन को आगे बढ़ाती है; async प्रत्येक फ़ाइल को जितनी जल्दी हो सके चलाता है, और ऑर्डर की गारंटी नहीं है।
कुछ शैलियों मीडिया विशेषताओं के माध्यम से महत्वपूर्ण पथ छोड़ सकते हैं: प्रिंट शैलियों या एक संकीर्ण ब्रेकपॉइंट को पहली स्क्रीन को पकड़ने की आवश्यकता नहीं है। बाकी थोक का सवाल है, क्योंकि पूरी साइट के लिए एक स्टाइलशीट हर पेज को नियमों के लिए इंतजार करता है, जिसका उपयोग कभी नहीं किया जाएगा।
यह परत है कि कोई भी बाहर से न्याय कर सकता है और लगभग कोई भी अंदर से सुधार कर सकता है। जब एक आपूर्तिकर्ता की गति के बारे में एकमात्र जवाब "हम छवियों को संपीड़ित करेंगे", तो उन्होंने यह नहीं देखा है कि क्या अनुरोध और पहला पिक्सेल के बीच बैठता है।
लेआउट शिफ्ट: वह पृष्ठ जो आपके अंगूठे के नीचे कूदता है
एक कूद पृष्ठ एक कॉस्मेटिक मुद्दा नहीं है। कोई एक बटन तक पहुंचता है, एक बैनर इसके ऊपर लोड हो रहा है, और अंगूठे कहीं और उतरता है। यह एक इंटरफ़ेस विफलता है, और लोग इसे इंतजार करने के दूसरे से स्पष्ट रूप से याद करते हैं।
कारण पूर्वानुमान योग्य हैं: बिना घोषित आयामों के छवियां और एम्बेड, परिवर्तनीय ऊंचाई के विज्ञापन, विभिन्न मैट्रिक्स के साथ एक फ़ॉन्ट स्वैप, और जो पहले से ही दिखाई दे रहा है उससे ऊपर इंजेक्ट की गई सामग्री। प्रत्येक मामले में उपाय पहले से ही अंतरिक्ष को आरक्षित करना है।
यहां की गति पहुंच को पूरा करती है। WCAG 2.2 के लिए W3C त्वरित संदर्भ में Reflow (1.4.10) शामिल है, जो उस सामग्री को एक संकीर्ण स्क्रीन पर ज़ूम किया जाता है या दिखाया जाता है जब उपयोग करने योग्य रहता है।
साझा सिद्धांत भविष्यवाणी है। मीडिया के लिए स्थान आरक्षित करना और स्वचालित गति को नियंत्रित करना गति की भावना और पृष्ठ की पहुंच को एक बार में सुधार करना: एक असामान्य मामला जहां एक संपादन दो आवश्यकताओं का जवाब देता है।
क्या सर्वर योगदान देता है: कैश, संपीड़न और पहली बाइट में समय
सर्वर साइड पहले बाइट के लिए समय का मालिक है: कितने समय तक बैकेंड एक प्रतिक्रिया को इकट्ठा करने के लिए लेता है। एक धीमी डेटाबेस क्वेरी, हर यात्रा पर एक पूर्ण रेंडर, कोई कैशिंग नहीं - उनमें से प्रत्येक उस क्षण में देरी करता है जब ब्राउज़र के साथ काम करने के लिए कुछ भी है।
डिलिवरी अगले आता है। पाठ प्रतिक्रियाओं के लिए संपीड़न, संस्करण वाले नामों के साथ स्थिर फ़ाइलों के लिए कैश हेडर, आगंतुक के करीब एक नेटवर्क से वितरण। ये पुनर्लेखन के बजाय विन्यास निर्णय लेते हैं, और वे आमतौर पर जल्दी से उतरते हैं।
आधुनिक प्रोटोकॉल कतार के हिस्से को हटा देते हैं: HTTP / 2 और HTTP / 3 एक कनेक्शन पर कई अनुरोधों को पूरा करते हैं। इससे ज्यादा डाउनलोड करने का कोई बहाना नहीं है; यह प्रतीक्षा में कुछ को हटा देता है कि अनुरोध खुद को बनाने के लिए इस्तेमाल किया जाता है।
परतों को भ्रमित न करें। एक तेज़ सर्वर एक ऐसा पेज को बचा नहीं देगा जो दस तृतीय-पक्ष लिपियों में खींचता है, और ध्यान से निर्मित फ्रंटेंड अगर जवाब दो सेकंड लगते हैं तो मदद नहीं करेगा। दोनों को देखने की जरूरत है।
फोन और नेटवर्क: जहां ईमानदार परीक्षण होता है
एक डेवलपर साइट को एक वायर्ड कनेक्शन पर देखा गया है, एक शक्तिशाली मशीन पर, पहले से ही कैश्ड सब कुछ। आगंतुक पहली बार एक मोबाइल नेटवर्क पर मिड-रेंज फोन पर पहुंचता है। वे दो अलग-अलग साइट हैं, और दूसरा एक गिनती है।
अंतर केवल बैंडविड्थ नहीं है। एक कमजोर प्रोसेसर उसी जावास्क्रिप्ट को निष्पादित करने के लिए लंबे समय तक सीएसएस को पार करने और छवियों को डिकोड करने के लिए लंबे समय तक लेता है। क्या एक लैपटॉप पर unnoticed गुजरता स्क्रीन एक टैप जवाब देने से पहले एक ठहराव बन जाता है।
तो एक ठंडा कैश के साथ एक वास्तविक डिवाइस पर परीक्षण करें: एक निजी विंडो, थ्रॉटलिंग स्विच्ड ऑन, एक वापसी यात्रा घंटे बाद। डेवलपर टूल में डिवाइस अनुकरण उपयोगी है, लेकिन यह उन्हें फिर से उत्पन्न करने के बजाय स्थितियों को मॉडल करता है।
एक और आदत: स्प्रेड को देखें, औसत नहीं। यदि पृष्ठ कई लोगों के लिए स्वीकार्य रूप से खुलता है और शायद कुछ लोगों के लिए खराब हो जाता है, तो उपयोगी सवाल यह है कि कौन लोग हैं - कौन-सा उपकरण वर्ग, कौन-सा क्षेत्र, जो साइट का अनुभाग है।
अपने आप को उलझाए बिना कैसे मापें
दो प्रकार के डेटा होते हैं। लैब डेटा एक नियंत्रित रन से आता है: दोहराने योग्य, पहले और बाद में तुलना के लिए अच्छा है, लेकिन स्थितियां आपके द्वारा चुने गए हैं। फील्ड डेटा वास्तव में आगंतुकों, noisier और अपने स्वयं के उपकरणों द्वारा आकार में क्या हुआ है।
MDN ब्राउज़र माप इंटरफ़ेस को दस्तावेज करता है - प्रदर्शन पर्यवेक्षक के माध्यम से नेविगेशन समय से - जो अर्थपूर्ण घटनाओं के दौरान पृष्ठ रिकॉर्ड करने देता है। यही कारण है कि फील्ड डेटा किस पर रहता है: माप लिया जाता है जहां उपयोगकर्ता बैठे हैं।
कार्य क्रम सरल है। किसी भी संपादन से पहले एक बेसलाइन कैप्चर करें, उसी स्थिति में उसी पृष्ठ पर। एक समय में एक परत बदलें। फिर से उपाय करें। अन्यथा आप एक सुधार के साथ समाप्त होते हैं और कोई विचार नहीं जो इसे बदलता है।
अग्रिम में क्या एक परिणाम के रूप में गणना करता है। "यह तेजी से महसूस करता है" एक स्वीकृति मानदंड नहीं है। संपादन, नामित पृष्ठों की एक सूची, एक दोहराने योग्य माप प्रक्रिया और एक पहले और बाद में तुलना एक तीसरे व्यक्ति को पढ़ सकता है - यह एक है।
क्या गति कार्य लागत पर VITON13
जब समस्या स्थानीय होती है - भारी छवियाँ, भूले हुए स्क्रिप्ट्स, कोई गिरावट के साथ एक फ़ॉन्ट - $ 70 में साइट फिक्स पैक फिट बैठता है: 5 सहमत फिक्स तक, एक मोबाइल और डेस्कटॉप चेक, एक पहले / बाद में सूची में हैंडओवर, 1 राउंड ऑफ संशोधन, 1-2 कार्य दिवसों में वितरित किया गया।
साइट फिक्स पैक जानबूझकर नए पृष्ठों, फिर से डिजाइन और माइग्रेशन को बाहर करता है। यह लक्षित कार्य के लिए एक साधन है। यदि निदान से पता चलता है कि धीमेपन साइट की संरचना में बनाया गया है, तो बातचीत फिर से इसे पैच करने के बजाय इसे बनाने के लिए चलती है।
यह $380 पर लॉन्च साइट है: एक उत्तरदायी निर्माण, कोर सीएमएस या डेटा वायरिंग और तैनाती सेटअप, लॉन्च से पहले संशोधन के 2 राउंड के साथ 3-5 कार्य दिवसों में वितरित किया गया। सामग्री और अनुवाद ग्राहक द्वारा आपूर्ति की जाती है, क्योंकि हम उन्हें नहीं लिखते हैं।
जब गति को बाद में रहना पड़ता है, तो ऑनगोइंग देव सपोर्ट $290 / मो पर चलता है: प्राथमिकता अपडेट, साप्ताहिक रिलीज लय और तकनीकी रखरखाव। यह एक मासिक चक्र पर काम करता है, वॉल्यूम प्रत्येक चक्र की शुरुआत में सहमत हो जाता है, और 30 दिन नोटिस इसे बंद कर देता है।
सीमाएँ: जहां गति का उत्तर होना बंद हो जाता है
स्पीड एक बाधा को हटा देता है; यह मांग नहीं बनाता है। यदि पृष्ठ आपको बताता है कि आप क्या बेच रहे हैं और क्यों यह पैसे के लायक है, तो तत्काल लोडिंग केवल पहले से कहीं अधिक unconvincing पाठ दिखाता है।
कुछ सीमाएं बाहरी हैं। एक एम्बेडेड खिलाड़ी, एक भुगतान फॉर्म, एक पार्टनर की बुकिंग विजेट - जब वे लोड करते हैं, तो वे कितना वजन करते हैं। कभी-कभी उनके कोड को अनुकूलित करने के बजाय विक्रेता को बदलने का ईमानदार जवाब होता है।
कुछ सीमाएं हमारी हैं, और उन्हें अग्रिम में जानना बेहतर है। VITON13 ग्राहक की सामग्री या अनुवाद नहीं लिखते हैं और मूल मोबाइल ऐप नहीं बनाते हैं। यदि यह कार्य है तो यह किसी अन्य आपूर्तिकर्ता या किसी अन्य अनुबंध के अंतर्गत आता है।
अंत में, गति कार्य कभी भी एक ही घटना नहीं है। प्रत्येक अभियान एक स्क्रिप्ट जोड़ता है और हर नया पेज छवियों को जोड़ता है। तो अब फिक्स पर ही सहमत नहीं है, लेकिन जो बाद में पृष्ठ को देखता है और उसके साथ वे क्या करते हैं।
व्यावहारिक चेकलिस्ट
- साइट पर हर तीसरे पक्ष की स्क्रिप्ट की सूची और प्रत्येक के लिए एक मालिक का नाम दें।
- कई आकारों में और एक मौजूदा प्रारूप में छवियों को सर्व करें।
- प्रत्येक छवि और एम्बेड के लिए चौड़ाई और ऊंचाई, या एक पहलू अनुपात घोषित करें।
- जांचें कि लिंक्ड फ़ॉन्ट्स फ़ॉन्ट-प्रदर्शन का उपयोग करें: स्वैप और उन पात्रों को सबसेट कर रहे हैं जिनकी आपको आवश्यकता है।
- किसी भी शैली या स्क्रिप्ट को बंद करने के लिए पहली स्क्रीन बिना कर सकती है।
- इससे पहले और बाद में, उसी पृष्ठ पर, एक वास्तविक फोन पर, एक ठंडे कैश के साथ।
सवाल और जवाब
क्या वास्तव में एक वेबसाइट को धीमा कर देता है?
आमतौर पर यह चार परतें होती हैं: लेआउट की जरूरतों की तुलना में भारी छवियां, पाठ में देरी करने वाले वेब फ़ॉन्ट्स, मुख्य धागे पर कब्जा करने वाले तीसरे पक्ष की स्क्रिप्ट, और शैलियों या तुल्यकालिक लिपियां प्रतिपादन को अवरुद्ध करती हैं। सर्वर और प्रोटोकॉल बातचीत की दूसरी परत बनाते हैं।
एक लक्षित गति निर्धारण लागत क्या है?
साइट फिक्स पैक $ 70 है: 5 सहमत फिक्स तक, एक मोबाइल और डेस्कटॉप चेक और हैंडओवर पर पहले / बाद की सूची। यह 1-2 दिनों में वितरित किया जाता है और इसमें संशोधनों का 1 राउंड शामिल है। नए पृष्ठ, फिर से डिजाइन और माइग्रेशन इस पैकेज का हिस्सा नहीं हैं।
यदि साइट कैसे बनाई गई है, तो क्या होगा?
फिर उत्तर एक पुनर्निर्माण है। लॉन्च साइट $ 380 है: एक उत्तरदायी निर्माण, कोर सीएमएस या डेटा वायरिंग और तैनाती सेटअप। इसे लॉन्च से पहले संशोधन के 2 राउंड के साथ 3-5 कार्य दिवसों में वितरित किया जाता है। क्लाइंट द्वारा सामग्री और अनुवाद की आपूर्ति की जाती है।
जब हम तय करते हैं तो हमें समर्थन की आवश्यकता होती है?
ऑनगोइंग देव सपोर्ट $290 / मो है: प्राथमिकता अपडेट, साप्ताहिक रिलीज लय और तकनीकी रखरखाव। यह मासिक चक्र पर चलता है, वॉल्यूम प्रत्येक चक्र की शुरुआत में सहमत हो जाता है, और 30 दिन नोटिस इसे बंद कर देता है। एक नया निर्माण या एक फिर से डिज़ाइन अलग-अलग होता है।
यदि हमें एक निश्चित के बजाय नई कार्यक्षमता की आवश्यकता है?
उत्पाद बिल्ड $ 880 है: सुविधा वितरण, राज्य और मार्ग तर्क, परीक्षण और सख्त। यह 2-3 सप्ताह में वितरित किया जाता है जिसमें प्रति दी गई सुविधा में संशोधन के 2 राउंड होते हैं। मूल मोबाइल ऐप और भुगतान लाइसेंसिंग पैकेज में शामिल नहीं हैं।