आपका React या Next.js ऐप एक-एक रिलीज़ के साथ धीमा होता गया। बंडल बड़ा हो गया, छवियां पूरे आकार में भेजी जाती हैं, एक तृतीय-पक्ष स्क्रिप्ट पहले पेंट को ब्लॉक करती है, एक सूची हर कीस्ट्रोक पर फिर से रेंडर होती है। मैं मापता हूं कि इनमें से कौन वास्तव में आपके उपयोगकर्ताओं का समय बर्बाद करता है, फिर उन लोगों को ठीक करता हूं जिन्हें ठीक करने लायक है।
मैं आपके React या Next.js ऐप का प्रोफाइल बनाऊंगा और इसे नंबरों के साथ तेज़ करूंगा
आपके ऐप के एक पेज पर लाइटहाउस और प्रोफाइलर, निष्कर्षों को लाभ के अनुसार रैंक किया गया।
- एक पेज प्रोफाइल किया गया, रैंक किया गया
ऑडिट, फिर वे सुधार जो संख्याओं को बदलते हैं, पहले और बाद में मापा जाता है।
- ऑडिट और मुख्य सुधार
- स्रोत कोड
5 मार्गों तक, रेंडरिंग और कैशिंग, CI में एक बंडल बजट, पूर्ण तुलना।
- गहरा पास, 5 मार्गों तक
- स्रोत कोड
एक कस्टम ऑफ़र का अनुरोध करें
कस्टम ऑफर का अनुरोध करने के लिए लॉग इन करें
इस Zinner से एक व्यक्तिगत प्रस्ताव का अनुरोध करने के लिए एक निःशुल्क खाता बनाएँ या लॉग इन करें।
लॉग इन / रजिस्टर करेंबिक्री-पूर्व प्रश्न पूछें
प्रश्न पूछने के लिए लॉग इन करें
प्लेटफ़ॉर्म स्पैम को कम करने के लिए, पूर्व-बिक्री संदेश केवल लॉग-इन उपयोगकर्ताओं द्वारा ही भेजे जा सकते हैं।
इस Zinner को सीधे संदेश भेजने के लिए एक निःशुल्क खाता बनाएँ या लॉग इन करें।
लॉग इन / रजिस्टर करेंलॉग इन आवश्यक है
इस Zinner को संदेश भेजने के लिए एक निःशुल्क खाता बनाएँ या लॉग इन करें।
लॉग इन / रजिस्टर करेंलॉग इन आवश्यक है
एक व्यक्तिगत ऑफ़र का अनुरोध करने के लिए एक निःशुल्क खाता बनाएँ या लॉग इन करें।
लॉग इन / रजिस्टर करेंएक नज़र में
यह तय करने में आपकी मदद करने के लिए इस सेवा के बारे में मुख्य विवरण। Zinn Hub द्वारा जेनरेट किया गया, विक्रेता द्वारा नहीं।
मूल्य स्थिति
Measurement Approach
कवर किए गए फ़्रेमवर्क
Metrics Reported
वितरण विधि
आपको क्या मिलेगा
पूर्ण विवरण
यदि आपको लगता है कि धीमे पेज आपको साइनअप या खोज ट्रैफ़िक में नुकसान पहुंचा रहे हैं और आप अपने पास मौजूद ऐप को रखना चाहते हैं तो इसे ऑर्डर करें। React और Next.js पहले से ही एक तेज़ ऐप के लिए आवश्यक अधिकांश चीजें भेजते हैं, इसलिए लाभ स्टैक बदलने के बजाय उन उपकरणों का अच्छी तरह से उपयोग करने से आता है।
आपको संख्याएँ मिलती हैं, विशेषण नहीं: LCP, CLS, INP और प्रति मार्ग बंडल आकार, एक ही थ्रॉटल्ड कनेक्शन पर पहले और बाद में मापा जाता है, एक तालिका में।
स्टार्टर एक पेज का ऑडिट है: रन, लाभ के अनुसार रैंक किए गए निष्कर्ष, कोई कोड नहीं बदला गया। स्टैंडर्ड उस ऑडिट से शुरू होता है और बाकी समय उन सुधारों पर खर्च करता है जो उन संख्याओं को बदलते हैं। एडवांस्ड 5 मार्गों तक को कवर करता है, रेंडरिंग और कैशिंग को ट्यून करता है, और CI में एक बंडल बजट छोड़ता है ताकि अगली रिलीज़ चुपचाप काम को पूर्ववत न कर सके।
काम आपके रिपॉजिटरी में एक शाखा पर होता है, कमिट दर कमिट, प्रत्येक अपने कारण के साथ। मेरे द्वारा कुछ भी डिप्लॉय नहीं किया जाता है जब तक आप इसके लिए न कहें।
कोई कॉल नहीं। सब कुछ लिखित में, जिसमें वे माप भी शामिल हैं जो मुझसे असहमत हैं।
अपने प्रोजेक्ट को पूरा करने के लिए कदम
1. मापें कि आपके उपयोगकर्ता वास्तव में क्या प्राप्त करते हैं - आपके लाइव पृष्ठों पर लाइटहाउस और धीमी गति वाले पृष्ठों पर एक रिएक्ट प्रोफाइलर सत्र, एक थ्रॉटल्ड कनेक्शन पर। LCP, CLS, INP और प्रति मार्ग बंडल का आकार, कुछ भी छूने से पहले लिखा गया।
2. पता करें कि सबसे अधिक लागत क्या है - बंडल और नेटवर्क वॉटरफॉल: क्या शिप करता है जिसका कोई उपयोग नहीं करता है, क्या पहला पेंट ब्लॉक करता है, कौन से घटक फिर से रेंडर होते हैं और क्यों। प्रत्येक खोज में मिलीसेकंड या किलोबाइट में अनुमानित बचत होती है।
3. इसे ठीक करें, सबसे बड़ी जीत पहले - कोड स्प्लिटिंग, छवि और फ़ॉन्ट हैंडलिंग, रेंडर-ब्लॉकिंग कार्य, मेमोइज़ेशन जहां प्रोफाइलर इसे मांगता है, डेटा फ़ेचिंग को महत्वपूर्ण पथ से हटा दिया गया। प्रति परिवर्तन एक कमिट, प्रत्येक अपने कारण के साथ।
4. फिर से मापें, साथ-साथ - बदले हुए बिल्ड पर वही रन: एक तालिका में पहले और बाद में, प्रति मार्ग और प्रति मीट्रिक। यदि किसी परिवर्तन ने कुछ खराब कर दिया, तो तालिका ऐसा कहती है और परिवर्तन वापस चला जाता है।
5. आपके रिपॉजिटरी में हैंडओवर - आपके रिपो में एक शाखा या पैच, रिपोर्ट, और मैंने क्या नहीं किया और इसका क्या मूल्य होगा, इसकी एक ईमानदार सूची। परिनियोजन आपके हाथों में रहता है।
Zinner गुणवत्ता गारंटी
प्लेटफ़ॉर्म में शामिल होने से पहले हर Zinner की समीक्षा की जाती है और उसे अनुमोदित किया जाता है।
सभी सेवाएँ हमारी गुणवत्ता आश्वासन प्रतिबद्धता द्वारा समर्थित हैं।
आपके द्वारा दिए गए काम को मंज़ूरी देने तक आपका भुगतान सुरक्षित है।
पैकेजों की तुलना करें
| फ़ंक्शन | स्टार्टर | मानक | उन्नत |
|---|---|---|---|
| डिलीवरी का समय | 2 दिन | 4 दिन | 8 दिन |
| संशोधन | 0 | 2 | 3 |
| दायरा | एक पृष्ठ प्रोफाइल किया गया, रैंक किया गया | ऑडिट और मुख्य सुधार | गहरा पास, 5 मार्गों तक |
| स्रोत कोड | ✕ | ✓ | ✓ |
पोर्टफोलियो
इस Zinn से संबंधित विक्रेता के काम के उदाहरण।
फॉर्मलाइन: स्ट्राइप के साथ नेक्स्ट.जेएस स्टोर
एक स्टोरफ्रंट जिसे आप क्लिक कर सकते हैं: 16 संग्रह में 4 पोस्टर, फ़िल्टर और खोज जो URL में रहते हैं, एक कार्ट, लाइट और डार्क थीम, और एक चेकआउट जो एक डेमो ऑर्डर या टेस्ट मोड में एक वास्तविक स्ट्राइप चेकआउट सत्र में समाप्त होता है। मैंने इसे टेलविंड सीएसएस के साथ टाइपस्क्रिप्ट में एक नेक्स्ट.जेएस स्टैटिक एक्सपोर्ट के रूप में बनाया है। कार्ड भुगतान एक क्लाउडफ्लेयर वर्कर के माध्यम से होते हैं जो सर्वर पर कार्ट को फिर से कीमत देता है और स्ट्राइप के वेबहुक हस्ताक्षर को सत्यापित करता है।
नेक्स्ट.जेएस में द्विभाषी व्यक्तिगत साइट
अंग्रेजी और रूसी में एक-पृष्ठ की व्यक्तिगत साइट, जिसमें एक सेवा अनुभाग और मेरे डेमो प्रोजेक्ट्स के लिंक हैं। मैंने इसे नेक्स्ट.जेएस, रिएक्ट और टाइपस्क्रिप्ट के साथ एक स्टैटिक एक्सपोर्ट के रूप में डिज़ाइन और बनाया है, जिसे सादे सीएसएस मॉड्यूल और बिना किसी यूआई फ्रेमवर्क के स्टाइल किया गया है। इसमें लाइट और डार्क थीम हैं, और प्रत्येक भाषा के लिए एक सोशल प्रीव्यू इमेज बिल्ड टाइम पर जेनरेट की जाती है। गिटहब एक्शन्स इसे बिल्ड करता है और बनी सीडीएन पर डिप्लॉय करता है, जो सुरक्षा हेडर जोड़ता है और www और सादे HTTP को मुख्य HTTPS पते पर रीडायरेक्ट करता है।
सेवा विवरण
अक्सर पूछे जाने वाले प्रश्न
नहीं, और किसी ऐसे व्यक्ति से सावधान रहें जो आपके कोड को देखे बिना इसका वादा करता है। एक चेकआउट विजेट या एक विज्ञापन स्क्रिप्ट मेरे द्वारा किए गए स्कोर को सीमित कर सकती है। ऑडिट आपको आपकी सीमा और उसे प्राप्त करने की लागत बताता है।
नहीं। Vite, CRA, Remix या एक सादा SPA सभी एक ही तरह से प्रोफाइल करते हैं। केवल फ्रेमवर्क-विशिष्ट सुधार अलग-अलग होते हैं: Next.js रेंडरिंग मोड के बजाय रूट-लेवल स्प्लिटिंग और कैशिंग।
हाँ। स्टैंडर्ड उसी ऑडिट से शुरू होता है और शेष समय उसे ठीक करने में लगाता है जो उसे मिला। स्टार्टर उन टीमों के लिए मौजूद है जो खुद काम करेंगे और बस यह जानने की जरूरत है कि कहाँ खोदना है।
ऑडिट इसे देखता है: सर्वर प्रतिक्रिया समय रेंडर और स्क्रिप्ट लागत से अलग दिखाई देता है। API या प्रश्नों का प्रोफाइलिंग ऐड-ऑन है, Node, Express, NestJS या Rust में।
रिपॉजिटरी तक पढ़ने की पहुंच, या स्रोत का एक संग्रह, साथ ही पृष्ठ का URL। स्टैंडर्ड और एडवांस्ड पर मैं सुधारों को एक शाखा में धकेलता हूं, इसलिए मुझे एक बनाने की अनुमति चाहिए। यदि आप इसे नहीं देना चाहते हैं, तो मैं इसके बजाय एक पैच भेजता हूं। मुझे कभी भी डिप्लॉय एक्सेस की आवश्यकता नहीं होती है।
आपके लाइव उत्पादन पृष्ठों पर डिफ़ॉल्ट रूप से, ताकि संख्याएँ वही हों जो आपके उपयोगकर्ताओं को मिलती हैं। यदि पृष्ठ लॉगिन के पीछे है या अभी तक डिप्लॉय नहीं किया गया है, तो एक स्टेजिंग लिंक, एक परीक्षण खाता या इसे स्थानीय रूप से चलाने के चरण सभी काम करते हैं, और रिपोर्ट बताती है कि संख्याएँ कहाँ से आती हैं।
ग्राहक समीक्षाएँ
देखें कि हमारे ग्राहक इस Zinn के बारे में क्या कहते हैं
श्रेणियाँ
Zinner नीतियां
संबंधित Zinns
Next.js, React, Firebase और Node.js का उपयोग करके पेशेवर वेब एप्लिकेशन विकसित करें
