<head>
में <link>
s डालना
<head>
में <link>
s डालना एक अनुकूलित वेबसाइट बनाने में उचित विनिर्देश का हिस्सा है। जब एक पृष्ठ पहली बार लोड होता है, तो HTML और CSS को एक साथ पार्स किया जा रहा होता है; HTML DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) बनाता है और CSS CSSOM (CSS ऑब्जेक्ट मॉडल) बनाता है। दोनों एक वेबसाइट में दृश्यों को बनाने के लिए आवश्यक हैं, जिससे एक त्वरित "पहला सार्थक पेंट" समय मिलता है। यह प्रगतिशील रेंडरिंग एक श्रेणी अनुकूलन साइटें हैं जिन्हें उनके प्रदर्शन स्कोर में मापा जाता है। स्टाइलशीट को दस्तावेज़ के निचले भाग के पास रखना वह है जो कई ब्राउज़रों में प्रगतिशील रेंडरिंग को रोकता है। कुछ ब्राउज़र पृष्ठ के तत्वों को फिर से पेंट करने से बचने के लिए रेंडरिंग को अवरुद्ध करते हैं यदि उनकी शैलियाँ बदल जाती हैं। उपयोगकर्ता तब एक खाली सफेद पृष्ठ देखने के लिए फंस जाता है। अन्य समय में अनस्टाइल की गई सामग्री (FOUC) के फ्लैश हो सकते हैं, जो बिना स्टाइल लागू किए एक वेबपेज दिखाते हैं।
<script>
s को </body>
से ठीक पहले रखना
<script>
टैग HTML पार्सिंग को अवरुद्ध करते हैं जबकि उन्हें डाउनलोड और निष्पादित किया जा रहा है जो आपके पृष्ठ को धीमा कर सकता है। स्क्रिप्ट को नीचे रखने से HTML को पार्स किया जा सकता है और उपयोगकर्ता को पहले प्रदर्शित किया जा सकता है।
<script>
s को नीचे रखने का एक अपवाद तब होता है जब आपकी स्क्रिप्ट में document.write()
होता है, लेकिन आजकल document.write()
का उपयोग करना एक अच्छा अभ्यास नहीं है। साथ ही, <script>
s को नीचे रखने का मतलब है कि ब्राउज़र स्क्रिप्ट को तब तक डाउनलोड करना शुरू नहीं कर सकता जब तक कि पूरा दस्तावेज़ पार्स न हो जाए। यह सुनिश्चित करता है कि आपका कोड जिसे DOM तत्वों में हेरफेर करने की आवश्यकता है, वह त्रुटि नहीं फेंकेगा और पूरी स्क्रिप्ट को रोक देगा। यदि आपको <head>
में <script>
s डालने की आवश्यकता है, तो defer
विशेषता का उपयोग करें, जो HTML पार्स होने के बाद ही स्क्रिप्ट चलाने का समान प्रभाव प्राप्त करेगा लेकिन ब्राउज़र स्क्रिप्ट को पहले डाउनलोड कर सकता है।
ध्यान रखें कि क्लोजिंग </body>
टैग से ठीक पहले स्क्रिप्ट डालने से यह भ्रम पैदा होगा कि एक खाली कैश पर पृष्ठ तेजी से लोड होता है (चूंकि स्क्रिप्ट दस्तावेज़ के बाकी हिस्सों को डाउनलोड करने में बाधा नहीं डालेगी)। हालांकि, यदि आपके पास कुछ कोड है जिसे आप पृष्ठ लोड के दौरान चलाना चाहते हैं, तो यह पूरे पृष्ठ के लोड होने के बाद ही निष्पादित होना शुरू होगा। यदि आप उन स्क्रिप्टों को <head>
टैग में डालते हैं, तो वे पहले निष्पादित होना शुरू हो जाएंगे - तो एक प्राइम कैश पर पृष्ठ वास्तव में तेजी से लोड होता हुआ दिखाई देगा।
<head>
और <body>
टैग अब वैकल्पिक हैं
HTML5 विनिर्देश के अनुसार, <head>
और <body>
जैसे कुछ HTML टैग वैकल्पिक हैं। Google की शैली मार्गदर्शिका भी बाइट्स को बचाने के लिए उन्हें हटाने की सिफारिश करती है। हालांकि, यह अभ्यास अभी भी व्यापक रूप से अपनाया नहीं गया है और प्रदर्शन लाभ न्यूनतम होने की संभावना है और अधिकांश साइटों के लिए यह शायद ही मायने रखेगा।