शुरुआती जानकारी
HTML5 के ज़्यादातर हिस्से का मकसद, JavaScript लाइब्रेरी से मिले कॉम्पोनेंट और तकनीकों के लिए अब तक नेटिव ब्राउज़र का इस्तेमाल करना है. इन सुविधाओं के मौजूद होने पर, इनका इस्तेमाल करने से आपके उपयोगकर्ताओं को ज़्यादा तेज़ी से अनुभव मिल सकता है. इस ट्यूटोरियल में, मैं Yahoo की बेहतरीन परफ़ॉर्मेंस साइट या Google की Page Speed Docs और चलिए वेब को ज़्यादा तेज़ बनाएं साइट पर देखी गई बेहतरीन परफ़ॉर्मेंस रिसर्च को फिर से नहीं बताऊंगी. इसके बजाय, मैं इस बात पर फ़ोकस करूंगा/करूंगी कि मौजूदा समय में HTML5 और CSS3 का इस्तेमाल करने से, आपके वेब ऐप्लिकेशन को बेहतर कैसे बनाया जा सकता है.
पहली सलाह: कुकी के बजाय वेब स्टोरेज का इस्तेमाल करना
हालांकि, कुकी का इस्तेमाल, यूनीक उपयोगकर्ता के डेटा को ट्रैक करने के लिए कई सालों से किया जा रहा है, लेकिन इसके गंभीर नुकसान हैं. इसमें सबसे बड़ी गड़बड़ी यह है कि आपका पूरा कुकी डेटा, हर एचटीटीपी अनुरोध के हेडर में जोड़ दिया जाता है. इससे जवाब देने के समय पर असर पड़ सकता है, खास तौर पर XHRs के दौरान. इसलिए, सबसे सही तरीका है कि कुकी का साइज़ कम करें. HTML5 में हम इससे बेहतर कर सकते हैं: कुकी की जगह sessionStorage और localStorage का इस्तेमाल करें.
इन दो वेब स्टोरेज ऑब्जेक्ट का इस्तेमाल, उपयोगकर्ता के डेटा को क्लाइंटसाइड पर सेशन के दौरान या हमेशा के लिए बनाए रखने के लिए किया जा सकता है. उनका डेटा भी हर एचटीटीपी अनुरोध के ज़रिए, सर्वर पर ट्रांसफ़र नहीं किया जाता. इनमें ऐसा एपीआई मौजूद है जो आपको कुकी से छुटकारा दिलाने में मदद करता है. यहां दोनों एपीआई के बारे में बताया गया है, जो कुकी का इस्तेमाल फ़ॉलबैक के तौर पर करते हैं.
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
} else {
// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
' expires='+expires+'; path=/';
document.cookie = cookiestr;
}
दूसरी सलाह: JavaScript ऐनिमेशन के बजाय सीएसएस ट्रांज़िशन का इस्तेमाल करें
सीएसएस ट्रांज़िशन की मदद से, दो स्थितियों के बीच एक आकर्षक विज़ुअल ट्रांज़िशन मिलता है. ज़्यादातर स्टाइल प्रॉपर्टी को बदला जा सकता है, जैसे कि टेक्स्ट की शैडो, पोज़िशन, बैकग्राउंड या रंग में बदलाव करना. :hover जैसी बदली हुई या HTML5 फ़ॉर्म, :invalid और :valid (फ़ॉर्म की पुष्टि की स्थितियों के साथ) से ट्रांज़िशन का इस्तेमाल किया जा सकता है. हालांकि, ये ज़्यादा असरदार होते हैं. किसी एलिमेंट में कोई क्लास जोड़ने पर ये ट्रिगर हो सकते हैं.
div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }
totheleft और totheright की क्लास को टॉगल करके जोड़कर, बॉक्स को इधर-उधर ले जाया जा सकता है. कोड की इस मात्रा की तुलना किसी JavaScript ऐनिमेशन लाइब्रेरी के कोड से करें. साफ़ तौर पर, सीएसएस आधारित एनिमेशन का इस्तेमाल करने पर ब्राउज़र को भेजे जाने वाले बाइट की संख्या बहुत कम होती है. साथ ही, जीपीयू लेवल की रफ़्तार से, ये विज़ुअल ट्रांज़िशन आसान हो जाएंगे.
तीसरी सलाह: सर्वर की राउंडट्रिप के बजाय क्लाइंट-साइड डेटाबेस का इस्तेमाल करना
वेब एसक्यूएल डेटाबेस और IndexedDB, क्लाइंटसाइड में डेटाबेस उपलब्ध कराते हैं. XMLHttpRequest या फ़ॉर्म सबमिशन की मदद से सर्वर पर डेटा पोस्ट करने के सामान्य पैटर्न के बजाय, इन क्लाइंटसाइड डेटाबेस का फ़ायदा लिया जा सकता है. एचटीटीपी अनुरोधों को कम करना, सभी परफ़ॉर्मेंस इंजीनियर का मुख्य टारगेट होता है. इसलिए, इनका इस्तेमाल डेटास्टोर के तौर पर करने से, XHR के ज़रिए कई यात्राएं सेव की जा सकती हैं या फ़ॉर्म पोस्ट को वापस सर्वर पर सेव किया जा सकता है. कुछ मामलों में localStorage और sessionStorage का इस्तेमाल किया जा सकता है, जैसे कि फ़ॉर्म सबमिट करने की प्रोग्रेस को कैप्चर करना. साथ ही, ये क्लाइंट-साइड डेटाबेस एपीआई की तुलना में काफ़ी तेज़ी से काम करते हैं.
उदाहरण के लिए, अगर आपके पास डेटा ग्रिड वाला कॉम्पोनेंट है या सैकड़ों मैसेज वाला इनबॉक्स है, तो डेटा को डेटाबेस में स्थानीय तौर पर सेव करने से, जब उपयोगकर्ता खोज, फ़िल्टर या क्रम से लगाना चाहता है, तब आपके एचटीटीपी राउंडट्रिप सेव हो जाएंगे. दोस्तों की सूची या टेक्स्ट इनपुट ऑटोकंप्लीट की सुविधा को हर कीस्ट्रोक पर फ़िल्टर किया जा सकता है, जिससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है.
सलाह 4: JavaScript में सुधार करने से परफ़ॉर्मेंस में काफ़ी सुधार होते हैं
JavaScript 1.6 में, कलेक्शन प्रोटोकॉल में कई और तरीके जोड़े गए. IE को छोड़कर, ये अब ज़्यादातर ब्राउज़र में उपलब्ध हैं. उदाहरण के लिए:
// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]
// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
var linksList = document.querySelector('#links');
var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
linksList.innerHTML += newLink;
});
// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
return number < 2;
});
// [1.618]
// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});
ज़्यादातर मामलों में, इन स्थानीय तरीकों का इस्तेमाल करने से लूप के लिए आपके सामान्य तरीकों की तुलना में काफ़ी तेज़ स्पीड मिलती है, जैसे कि: for (var i = 0, len = arr.length; i < len; i++).
JSON.parse() के ज़रिए, नेटिव JSON पार्सिंग उस json2.js फ़ाइल की जगह ले लेती है जिसका इस्तेमाल हम काफ़ी समय से कर रहे हैं. नेटिव JSON, बाहरी स्क्रिप्ट का इस्तेमाल करने से ज़्यादा तेज़ और सुरक्षित है. यह IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3, और Chrome में पहले से मौजूद है.
नेटिव String.trim एक और अच्छा उदाहरण है. यह न सिर्फ़ लंबे समय से काम करने वाले JS से ज़्यादा तेज़ है, बल्कि ज़्यादा सही भी है. इनमें से कोई भी JavaScript परिशिष्ट तकनीकी रूप से HTML5 नहीं है, लेकिन वे हाल ही में उपलब्ध होने वाली तकनीकों के समूह में आते हैं.
सलाह 5: कैश मेनिफ़ेस्ट का इस्तेमाल सिर्फ़ ऑफ़लाइन ऐप्लिकेशन के साथ-साथ लाइव साइटों के लिए भी करें
दो साल पहले, Wordpress ने Wordpress Turbo नाम की सुविधा जोड़ने के लिए Google गियर का इस्तेमाल किया. यह एडमिन पैनल में इस्तेमाल होने वाले कई संसाधनों को कैश मेमोरी में सेव करता है, ताकि उन संसाधनों को तेज़ी से ऐक्सेस किया जा सके. हम ऐसा करने के लिए HTML5 के ऐप्लिकेशन कैश और cache.manifest का इस्तेमाल कर सकते हैं.
Expires हेडर सेट करने के मुकाबले ऐप्लिकेशन कैश मेमोरी का थोड़ा फ़ायदा होता है. आप कैश मेमोरी में सेव किए जा सकने वाले स्टैटिक संसाधनों को दिखाने वाली डिक्लेरेटिव फ़ाइल बनाते हैं. इस वजह से, ब्राउज़र उन्हें अच्छी तरह ऑप्टिमाइज़ कर सकते हैं. साथ ही, आपके इस्तेमाल से पहले ही उन्हें ऑप्टिमाइज़ कर सकते हैं.
अपनी साइट के बेसिक स्ट्रक्चर को टेंप्लेट के तौर पर देखें. आपके पास ऐसा डेटा है जो बदल सकता है, लेकिन आम तौर पर इसके आस-पास का एचटीएमएल हमेशा एक जैसा ही रहता है. ऐप्लिकेशन की कैश मेमोरी की मदद से, अपने एचटीएमएल को अलग-अलग टेंप्लेट की सीरीज़ के तौर पर देखा जा सकता है. इसके लिए, cache.manifest की मदद से मार्कअप को कैश मेमोरी में सेव किया जा सकता है. इसके बाद, कॉन्टेंट को अपडेट करने के लिए, वायर पर JSON डिलीवर किया जा सकता है. यह मॉडल, iPhone या Android के स्थानीय समाचार ऐप्लिकेशन से काफ़ी मिलता-जुलता है.
सलाह 6: विज़ुअल अनुभव को बेहतर बनाने के लिए, हार्डवेयर से तेज़ी लाने की सुविधा चालू करें
जाने-माने ब्राउज़र में, कई विज़ुअल ऑपरेशन जीपीयू लेवल की रफ़्तार का फ़ायदा ले सकते हैं, जिससे बहुत ज़्यादा डाइनैमिक विज़ुअल ऑपरेशन और आसान हो सकते हैं. Firefox Minefield और IE9 के लिए हार्डवेयर से तेज़ी लाने की सूचना दी गई है और Safari ने वर्शन 5 में हार्डवेयर-लेवल की रफ़्तार बढ़ाने की सुविधा जोड़ी है. (यह Mobile Safari में पहले आ गया है.) Chromium ने Windows के लिए, 3D ट्रांसफ़ॉर्म और हार्डवेयर से तेज़ी लाने की सुविधा अभी-अभी जोड़ी है. हालांकि, बाकी दो प्लैटफ़ॉर्म जल्द ही आने वाले हैं.
जीपीयू से तेज़ी लाने की प्रोसेस, कुछ खास स्थितियों में ही काम करती है. हालांकि, 3D ट्रांसफ़ॉर्मेशन और ऐनिमेशन की ओपैसिटी को कम करने के सबसे आम तरीके हैं. इसे चालू करने का कुछ हैकी, लेकिन रुकावट न डालने वाला तरीका यह है:
.hwaccel { -webkit-transform: translateZ(0); }
हालांकि, कोई गारंटी नहीं होती. :) हार्डवेयर ऐक्सेलरेशन के साथ काम करने और चालू होने के साथ-साथ ऐनिमेशन वाला अनुवाद, रोटेशन, स्केलिंग, और ओपैसिटी से जीपीयू कंपोज़िटिंग बेहतर हो जाएगी. इन्हें सीधे जीपीयू पर हैंडल करने का फ़ायदा मिलेगा. साथ ही, लेयर के कॉन्टेंट को फिर से बनाने की ज़रूरत नहीं होगी. हालांकि, पेज के लेआउट पर असर डालने वाली किसी भी प्रॉपर्टी की वजह से, पेज की परफ़ॉर्मेंस में अब भी बहुत ज़्यादा देरी होगी.
सलाह 7: सीपीयू से ज़्यादा लोड होने वाली कार्रवाइयों के लिए, वेब वर्कर डिलीवर करते हैं
वेब वर्कर के दो अहम फ़ायदे हैं: 1) वे तेज़ी से काम करते हैं. 2) जब तक वे आपके टास्क पूरे कर रहे हों, तब तक ब्राउज़र रिस्पॉन्सिव बना रहता है. काम करने वाले लोगों के लिए HTML5 स्लाइड डेक देखें. कुछ ऐसी संभावित स्थितियां जिनमें वेब वर्कर का इस्तेमाल किया जा सकता है:
- किसी लंबे दस्तावेज़ का टेक्स्ट फ़ॉर्मैट
- सिंटैक्स को हाइलाइट करना
- इमेज प्रोसेसिंग
- इमेज सिंथेसिस
- बड़े कलेक्शन को प्रोसेस किया जा रहा है
सलाह 8: HTML5 फ़ॉर्म के एट्रिब्यूट और इनपुट के टाइप
HTML5, इनपुट के नए सेट को लॉन्च करता है. इसमें text, password, और file के सेट को अपग्रेड किया जाता है, ताकि search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, और color को शामिल किया जा सके. इनके अलग-अलग ब्राउज़र पर काम करता है, क्योंकि इस समय Opera सबसे ज़्यादा काम करता है. सुविधा की पहचान करने की सुविधा से यह पता लगाया जा सकता है कि ब्राउज़र में नेटिव सपोर्ट है या नहीं. साथ ही, डेटपिकर या कलर पिकर जैसे यूज़र इंटरफ़ेस (यूआई) की सुविधा भी देता है. अगर ऐसा नहीं है, तो इन सामान्य टास्क को पूरा करने के लिए JS विजेट का इस्तेमाल जारी रखा जा सकता है.
टाइप के अलावा, हमारे सामान्य इनपुट फ़ील्ड में कुछ काम की सुविधाएं जोड़ी गई हैं. placeholder इनपुट, डिफ़ॉल्ट टेक्स्ट देता है. यह टेक्स्ट पर क्लिक करने पर हट जाता है. साथ ही, autofocus कैरेट को पेज लोड पर फ़ोकस करता है, ताकि आप उस फ़ील्ड से तुरंत इंटरैक्ट कर सकें. इनपुट की पुष्टि, HTML5 के साथ काम करने वाली दूसरी चीज़ है. required एट्रिब्यूट जोड़ने का मतलब है कि ब्राउज़र, फ़ॉर्म को तब तक सबमिट नहीं करेगा, जब तक वह फ़ील्ड भरा नहीं जाता. साथ ही, pattern एट्रिब्यूट की मदद से, किसी ऐसे इनपुट के लिए कस्टम रेगुलर एक्सप्रेशन तय किया जा सकता है जिसकी जांच करनी है. इससे अमान्य वैल्यू से फ़ॉर्म सबमिशन को रोका जा सकता है. यह डिक्लेरेटिव सिंटैक्स, सोर्स को आसानी से समझने लायक बनाने के साथ-साथ, JavaScript में भी बहुत सुधार करता है. फिर से, अगर इन मौजूद के लिए मूल सहायता मौजूद न हो, तो फ़ॉलबैक समाधान देने के लिए, सुविधा की पहचान करने की सुविधा का इस्तेमाल किया जा सकता है.
यहां नेटिव विजेट का इस्तेमाल करने का मतलब है कि इन विजेट को हटाने के लिए, आपको भारी JavaScript और सीएसएस भेजने की ज़रूरत नहीं है. इससे, पेज लोड होने की रफ़्तार बढ़ जाएगी और विजेट का रिस्पॉन्स भी बेहतर हो सकता है. इनपुट को बेहतर बनाने के लिए, HTML5 स्लाइड डेक देखें.
सलाह 9: ज़्यादा इमेज के लिए स्प्राइट का अनुरोध करने के बजाय, CSS3 इफ़ेक्ट का इस्तेमाल करें
CSS3, स्टाइलिंग के लिए कई नई सुविधाएं उपलब्ध कराता है. इनकी मदद से, विज़ुअल डिज़ाइन को बेहतर तरीके से दिखाने के लिए, इमेज का इस्तेमाल किया जाता है. किसी 2k इमेज को 100 बाइट वाले सीएसएस से बदलना, एक बड़ी कामयाबी है. इसमें यह भी बताया गया है कि आपने अब तक दूसरा एचटीटीपी अनुरोध हटा दिया है. इनके बारे में जानने के लिए कुछ प्रॉपर्टी यहां दी गई हैं:
- लीनियर और रेडियल ग्रेडिएंट
- गोल कोनों के लिए बॉर्डर-दायरा
- ड्रॉप शैडो और ग्लो के लिए बॉक्स-शैडो
- ऐल्फ़ा ओपैसिटी के लिए RGBA
- रोटेशन के लिए ट्रांसफ़ॉर्म
- सीएसएस मास्क
उदाहरण के लिए, ग्रेडिएंट के ज़रिए बेहतर बटन बनाए जा सकते हैं और बिना इमेज के कई अन्य इफ़ेक्ट को कॉपी किया जा सकता है. इनमें से ज़्यादातर ब्राउज़र पर काम करने की सुविधा काफ़ी मज़बूत होती है. साथ ही, उन ब्राउज़र का पता लगाने के लिए Modernizr जैसी लाइब्रेरी का इस्तेमाल किया जा सकता है जो फ़ॉलबैक केस में इमेज का इस्तेमाल करने के लिए, सुविधाओं का इस्तेमाल नहीं करती हैं.
सलाह 10: XHR से कम बैंडविथ के साथ ज़्यादा तेज़ डिलीवरी के लिए WebSockets
WebSockets को Comet की बढ़ती लोकप्रियता को ध्यान में रखकर बनाया गया था. वाकई में XHR मॉडल पर धूमकेतु के बजाय, WebSockets इस्तेमाल करने के अब फ़ायदे हैं.
WebSockets में बहुत कम फ़्रेमिंग होती है. इसलिए, इसका इस्तेमाल करने वाला बैंडविथ अक्सर XHR के मुकाबले कम होता है. कुछ रिपोर्ट पूरे वायर से भेजी गई बाइट में 35% की कमी दिखाती हैं. इसके अलावा, जब मैसेज डिलीवरी की बात आती है, तो उसकी परफ़ॉर्मेंस में काफ़ी ज़्यादा अंतर होता है. XHR को इस टेस्ट में रिकॉर्ड किया गया है. इसे WebSockets से 3500% ज़्यादा समय मिला. आखिर में, Ericcson Labs ने WebSockets की परफ़ॉर्मेंस पर विचार किया. साथ ही, उन्हें पता चला कि WebSockets के मुकाबले, एचटीटीपी पर पिंग करने का समय तीन से पांच गुना ज़्यादा था. ऐसा प्रोसेस की ज़रूरी शर्तों की वजह से हुआ था. उन्होंने पाया कि WebSocket प्रोटोकॉल, रीयल टाइम ऐप्लिकेशन के लिए ज़्यादा सही है.
जानकारी पाने के दूसरे तरीके
मेज़रमेंट और परफ़ॉर्मेंस के सुझावों के लिए, आपको Firefox एक्सटेंशन पेज स्पीड और YSlow का इस्तेमाल ज़रूर करना चाहिए. इसके अलावा, Chrome के लिए स्पीड ट्रेसर और IE के लिए DynaTrace Ajax, विश्लेषण को लॉग करने के बारे में ज़्यादा जानकारी देते हैं.