ऐसा इसलिए हो रहा है क्योंकि पृष्ठ वास्तव में प्रस्तुत करने से पहले DOMLoaded ईवेंट को पर्याप्त मिलीसेकंड निकाल दिया जाता है।
संक्षेप में, इसका मतलब है कि आपको अपनी वेबसाइट की गति को अनुकूलित करना होगा। इसका मतलब यह नहीं है कि इसे तेज डाउनलोड करें, लेकिन इसका मतलब गैर-अवरुद्ध तरीके से सही क्रम में डाउनलोड करना है।
चरण: आपका मार्कअप
1) ऐसा लगता है वहाँ एक बहुत आप अपने मार्कअप अनुकूलन करने के लिए कर सकते हैं। सबसे पहले, स्टाइलशीट्स और जावाकैंक का ऑर्डर अनुकूलित किया जा सकता है। यह सुनिश्चित करने के लिए कि सीएसएस फाइलें असीमित रूप से डाउनलोड की गई हैं, आपको बाहरी जावास्क्रिप्ट फ़ाइलों से पहले बाहरी सीएसएस को हमेशा शामिल करना होगा। style.css आपकी कुछ/सभी जावास्क्रिप्ट कॉल के बाद डाउनलोड किया गया है।
बाहरी सीएसएस फ़ाइल और अन्य संसाधन के बीच सिर में 1 स्क्रिप्ट ब्लॉक पाया गया है। समानांतर डाउनलोड करने की अनुमति देने के लिए, बाहरी सीएसएस फ़ाइल से पहले, या अगले संसाधन के बाद इनलाइन स्क्रिप्ट को ले जाएं।
2) आपकी मुख्य जावास्क्रिप्ट फ़ाइल आपके मार्कअप के भीतर इनलाइन है। स्क्रिप्ट समाप्त होने तक यह पेज डाउनलोड को अवरुद्ध नहीं करता है, लेकिन से पहले आपकी सामग्री शायद सफेद फ्लैश का कारण बन रही है (या जोड़ना)।
सिर में असीमित रूप से आपकी स्क्रिप्ट लोड करना मेरी पसंदीदा विधि है। जब डोम लोड हो गया है तो आपको अपनी स्क्रिप्ट को ट्रिगर करना होगा, या आप स्क्रिप्ट को बॉडी टैग के नीचे रखकर एक ही परिणाम प्राप्त कर सकते हैं।
चरण दो: हार्नेस ब्राउज़र की क्षमता
1) http हेडर को देखते हुए, वहाँ 28 आइटम अलग HTTP कॉल के रूप में सेवा की जा रही, (HTML पृष्ठों, JPG छवियों सहित ब्राउज़र पर कैश नहीं किया जा रहा है कर रहे हैं , स्टाइलशीट्स और जावास्क्रिप्ट फाइलें)।
ये आइटम स्पष्ट रूप से गैर-कैश करने योग्य हैं, और इसे आपके वेबसर्वर की कॉन्फ़िगरेशन को संपादित करके आसानी से ठीक किया जा सकता है।
2) gzip संपीड़न सक्षम करें। अधिकांश वेब ब्राउज़र (हाँ, यहां तक कि आईई) gzip decompression का समर्थन करता है, और अधिकांश (यदि नहीं सभी) वेब सर्वर gzip का उपयोग करके संपीड़न का समर्थन करते हैं। आप ओवरकिल भी जा सकते हैं और एसपीडीवाई में देख सकते हैं, जो एक वैकल्पिक लाइटर HTTP प्रोटोकॉल (क्रोम और फ़ायरफ़ॉक्स में समर्थित) है।
चरण तीन: सामग्री
की सेवा लगभग 30 अलग-अलग आइटम अपने डोमेन से सर्व किया जा रहा हैं। सबसे पहले, इस बात पर विचार करें कि आप इस अनुरोध की संख्या को कैसे कम कर सकते हैं। प्रति पृष्ठ दृश्य के 30 HTTP अनुरोध बहुत हैं। आप निम्न विधियों का उपयोग करके इसका मुकाबला कर सकते हैं:
1) एकाधिक होस्टनामों में समान डाउनलोड। ब्राउज़र वर्तमान में एक डोमेन में समवर्ती कनेक्शन की संख्या को सीमित करते हैं। अपनी छवियों को एक अलग डोमेन से सेवा देना (उदाहरण के लिए, img.bigtim.ca) उन्हें अन्य सामग्री के समानांतर में सेवा करने की अनुमति दे सकता है।
2) एकाधिक वस्तुओं को एक में मिलाएं। डाउनलोड किए गए कई आइटम पूरी तरह स्टाइल सामग्री हैं, जैसे कि लोगो, मेनू तत्व इत्यादि। इन्हें एक ही छवि (केवल एक बार डाउनलोड किया जा सकता है) में जोड़ा जा सकता है, और सीएसएस का उपयोग करके विभाजित किया जा सकता है। इसे सीएसएस स्प्राइटिंग कहा जाता है। स्टैक ओवरफ़्लो यह करता है: look here।
3) यदि आप डाउनलोड करने की आवश्यकता वाले आइटमों की मात्रा को कम नहीं कर सकते हैं, तो आप एक कुकीज डोमेन से स्थिर सामग्री की सेवा करके अपने सर्वर (और बदले में, क्लाइंट के ब्राउज़र) पर लोड को कम कर सकते हैं। स्टैक ओवरफ़्लो यह उनकी सभी स्थिर सामग्री जैसे छवियों, स्टाइलशीट्स और स्क्रिप्ट के साथ करता है।
चरण चार: का अनुकूलन अपने खुद के कोड
वहाँ केवल इतना है कि HTTP और ब्राउज़र तकनीक अपनी वेबसाइट की गति मदद कर सकता है। यह अंतिम कदम आप पर निर्भर है।
1) क्या आपके पास jquery होस्ट करने का कोई कारण है? Jquery का डाउनलोड पेज कई सीडीएन दिखाता है जहां आप तेजी से, कैश किए गए स्क्रिप्ट डाउनलोडिंग के लिए इंगित कर सकते हैं।
2) वर्तमान में आपके स्टाइलशीट्स में 20 से अधिक अप्रयुक्त सीएसएस नियम हैं (यह आपकी संपूर्ण सीएसएस फ़ाइल का 36% है)। वास्तव में क्या जरूरत है इसके बारे में फिर से सोचें।
3) जावास्क्रिप्ट का मुख्य हिस्सा (आपके शरीर टैग के शीर्ष पर) चीजों को गति देने का प्रयास करने के लिए एक हैक लगता है, लेकिन शायद कुछ भी मदद नहीं कर रहा है।
एक कुकी को यह निर्दिष्ट करने के लिए सेट किया जा रहा है कि पेज अभी तक फीका हुआ है या नहीं। न केवल आप एक संक्रमण करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हैं जो सीएसएस द्वारा खुशी से किया जा सकता है, लेकिन कुकी के पढ़ने और लिखने के लिए कार्यक्षमता को परिभाषित करने के लिए आधे से अधिक स्क्रिप्ट का उपयोग किया जाता है।
इस तरह देखकर बातें: $("body").css ("background-image", "url('images/background.png')"); और $("#website").show(); आमतौर पर मुझे "चिंताओं की जुदाई" के बारे में ranting हो जाता है, लेकिन इस सवाल का जवाब काफी लंबे समय अब इसलिए उम्मीद है कि आप देख सकते हैं कि यह बुरा व्यवहार एक ही कोड में शैली और कार्यक्षमता मिश्रण है।
अनुपूरक: कोड को देखते हुए, पर jquery की कोई आवश्यकता नहीं है जो आप कर रहे हैं। लेकिन फिर, करने की कोई आवश्यकता नहीं है जो आप कर रहे हैं, ताकि आप शायद जावास्क्रिप्ट के बिना बेहतर प्रदर्शन कर सकें।
वाह धन्यवाद यह कमाल है! –