तेजी से वेबसाइटों का निर्माण कैसे करें

Sep 11, 2025

कैसे करना है

उसकी बात से आगे लंदन जेनरेट करें 21 सितंबर को हमने साथ पकड़ा पैट्रिक हामान , एक वेब प्रदर्शन इंजीनियर पर तेजी , जो सभी के लिए एक तेज वेब बनाने के लिए एक मिशन पर है।

आपकी भूमिका में तेजी से शामिल है?
पैट्रिक हामान: तेजी से एक किनारे क्लाउड प्लेटफॉर्म है जो दुनिया के कुछ सबसे बड़े ब्रांडों को कम करता है। मेरी भूमिका मुख्य रूप से आर & amp; डी पर केंद्रित है; हमारे उत्पादों के प्रदर्शन और वितरण में सुधार करने के लिए क्लाइंट-साइड प्रौद्योगिकियों और वेब मानकों का उपयोग करने के लिए तेजी से टीमों के साथ काम करना और - सबसे महत्वपूर्ण बात - हमारे ग्राहकों की सेवाएं। कुछ मौजूदा परियोजनाओं में ब्राउज़र प्रदर्शन निगरानी, मीट्रिक और सेवा श्रमिकों के आसपास की पहल शामिल हैं।

इससे पहले कि आप तेजी से जुड़ गए, आपने गार्जियन और वित्तीय समय दोनों में समय बिताया। वे वेब प्रदर्शन कैसे पहुंचे?
पीएच: प्रदर्शन अब एक पोस्ट-तैनाती ऐड-ऑन या चेकलिस्ट आइटम नहीं है। इसे निरंतर प्रयास करने की आवश्यकता है कि संगठन में हर व्यक्ति को डिजाइन से डिलीवरी तक मानता है। यह कुछ ऐसा है जो इन समाचार संगठनों को बहुत जल्दी एहसास हुआ, अन्य सुविधाओं पर सामग्री की डिलीवरी को प्राथमिकता देने और सेवा कार्यकर्ताओं जैसे प्रौद्योगिकियों का उपयोग करने के लिए प्रतिद्वंद्वियों को मापने और तुलना करने के लिए निगरानी बुनियादी ढांचे के निर्माण जैसे प्रथाओं को पेश किया।

अभी एक तेजी से अनुभव के लिए सबसे बड़ी बाधा क्या है?
पीएच: एक शब्द: जावास्क्रिप्ट। मुझे लगता है कि मुझे थोड़ा सा ध्यान देना चाहिए: वेब एक जावास्क्रिप्ट मोटापा संकट की चोटी पर है। औसत वेब पेज अब 500kb स्क्रिप्ट प्रदान करता है। स्क्रिप्ट जो केवल पार्स करने के लिए एक सेकंड से अधिक लेती है - अकेले निष्पादित करें - कम संचालित डिवाइस पर और उस राज्य को प्राप्त करने के लिए पांच सेकंड से अधिक जो उपयोगकर्ता पृष्ठ के साथ बातचीत कर सकता है। इसलिए, हमारी साइट के उपयोगकर्ता अनुभव को बेहतर बनाने का एकमात्र तरीका यह है कि हमारे जावास्क्रिप्ट को मापना, अनुकूलित और कम करना - अन्य सभी के ऊपर।

WebPageTest runs a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds — वेबपैगेटेस्ट वास्तविक ब्राउज़रों और वास्तविक उपभोक्ता कनेक्शन की गति पर दुनिया भर के कई स्थानों से एक मुफ्त वेबसाइट गति परीक्षण चलाता है

वेब प्रदर्शन को अनुकूलित करने के लिए आपके पसंदीदा टूल क्या हैं?
पीएच: मैं एक मजबूत आस्तिक हूं जिसे आप अनुकूलित नहीं कर सकते कि आपने अभी तक क्यों नहीं मापा है। तो मेरा टूलबॉक्स माप और प्रोफाइलिंग उपकरणों के लिए भारी भारित है। सिंथेटिक माप के लिए, मैं हमेशा तक पहुंचूंगा वेबपैजेटेस्ट और ब्राउज़र डेवलपर उपकरण (नेटवर्क और प्रदर्शन पैन) पहले। हालांकि, वास्तविक उपयोगकर्ता अनुभवों को मापने में कुछ भी नहीं (R.U.M), इसलिए ब्राउज़र प्रदर्शन समय एपीआई का एक अच्छा ज्ञान भी मदद करता है।

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

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

इस समय सामने के विकास में आप क्या उत्साहित हैं?
पीएच: वेब खतरे में है। उपयोगकर्ता मूल रूप से अधिक समय व्यतीत कर रहे हैं - और इस प्रकार soled - ऐप वेब के खुलेपन से दूर अनुभव करता है। फिर भी हम अभी भी ऐसी साइटें बनाते हैं जो 20 सेकंड लेते हैं और मेरे रोमिंग कनेक्शन पर £ 1.20 प्रति लोड खर्च करते हैं, अंततः हमारे उपयोगकर्ताओं को और भी दूर कर देते हैं।

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

In his talk at Generate London Patrick Hamann will explore the current, past, and future best-practices for loading assets in the browser — जेनरेट लंदन पैट्रिक हामान में अपनी बात में ब्राउज़र में संपत्तियों को लोड करने के लिए वर्तमान, अतीत और भविष्य के सर्वोत्तम प्रथाओं का पता लगाएगा

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

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

लंदन जेनरेट करें [12 9] 21/22 सितंबर को वेब एनिमेशन, यूएक्स रणनीति, प्रोटोटाइप, अभिगम्यता, उत्तरदायी सीएसएस घटकों को कवर करने वाले 15 अन्य प्रस्तुतियां, और भी बहुत कुछ शामिल हैं। सम्मेलन से पहले दिन से चुनने के लिए चार कार्यशालाएं भी हैं लेकिन टिकट बहुत सीमित हैं। [12 9] अब अपना स्थान आरक्षित करें [12 9] ! [12 9]

तेजी से वेबसाइटों का निर्माण कैसे करें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Compositing in animation: Learn the basics

फोटोग्राफी को चित्रण में कैसे चालू करें

How to draw a bird

Create a WebGL 3D landing page

Create an animated steam text effect

Create a flexible carousel component

एक हाथ से तैयार देखो बनाने के लिए डिजिटल उपकरण का उपयोग कैसे करें

How to add data to your Sketch designs

श्रेणियाँ