पेज स्पीड HTML चेकलिस्ट

पेज का HTML चिपकाकर render-blocking स्क्रिप्ट, बिना साइज़ या lazy loading की इमेज, अनुपस्थित viewport, @import, document.write और बहुत कुछ खोजें।

पेज खोलें, "पेज सोर्स देखें" (Ctrl+U) इस्तेमाल करें, सब कॉपी करके यहाँ पेस्ट करें।

HTML आकार 0.4 KB · 11 एलिमेंट · 2 स्क्रिप्ट · 1 स्टाइलशीट · 3 इमेज
संभावित सुधार: 8
ज़्यादा असर<head> में 1 रेंडर-ब्लॉकिंग स्क्रिप्ट

defer जोड़ें (स्वतंत्र स्क्रिप्ट के लिए async) ताकि स्क्रिप्ट डाउनलोड होने से पहले ब्राउज़र पेज दिखा सके।

<script src="https://cdn.example.com/analytics.js">
मध्यम असर1 इमेज बिना width और height

width और height (या CSS aspect-ratio) सेट करें ताकि ब्राउज़र जगह रखे और लेआउट न खिसके (CLS)।

<img src="/hero.jpg" alt="Hero">
कम असरपहली स्क्रीन के नीचे की 1 इमेज में loading="lazy" नहीं

जो इमेज पहली स्क्रीन में नहीं दिखतीं उनमें loading="lazy" जोड़ें।

<img src="/b.png" alt="B" width="300" height="200">
कम असर3 इमेज JPEG/PNG/GIF फ़ॉर्मेट में

WebP या AVIF दें (जैसे <picture> से) – समान गुणवत्ता पर आमतौर पर 25–50% छोटी।

<img src="/hero.jpg" alt="Hero">
<img src="/a.png" alt="A" width="300" height="200">
<img src="/b.png" alt="B" width="300" height="200">
कम असर1 iframe बिना loading="lazy"

वीडियो और मैप जैसे एम्बेड में loading="lazy" जोड़ें।

<iframe src="https://www.youtube.com/embed/xyz">
ज़्यादा असरviewport मेटा टैग नहीं है

मोबाइल पर सही दिखाने के लिए <meta name="viewport" content="width=device-width, initial-scale=1"> जोड़ें।

<meta name="viewport">
कम असर<head> में charset घोषित नहीं

<head> के पहले एलिमेंट के रूप में <meta charset="UTF-8"> जोड़ें।

<meta charset="UTF-8">
कम असर1 थर्ड-पार्टी ओरिजिन बिना preconnect

ज़रूरी थर्ड-पार्टी ओरिजिन के लिए <link rel="preconnect"> जोड़ें ताकि कनेक्शन पहले बन जाए।

cdn.example.com
पास हुई जाँचें (8)
  • ✓ कम रेंडर-ब्लॉकिंग स्टाइलशीट
  • ✓ कोई CSS @import नहीं
  • ✓ इनलाइन @font-face नियमों में font-display है
  • ✓ पहली इमेज लेज़ी-लोड नहीं होती
  • ✓ कोई document.write() नहीं
  • ✓ इनलाइन कोड छोटा है
  • ✓ DOM का आकार ठीक है
  • ✓ HTML का आकार ठीक है
यह आपके पेस्ट किए HTML की स्थिर चेकलिस्ट है – यह पेज लोड नहीं करती, JavaScript नहीं चलाती और असली स्पीड नहीं मापती। लैब और फ़ील्ड माप (Core Web Vitals) के लिए Lighthouse या PageSpeed Insights इस्तेमाल करें।

पेज स्पीड चेकलिस्ट क्या है?

यह टूल पेज के HTML सोर्स को फ़्रंट-एंड परफ़ॉर्मेंस की आम समस्याओं की चेकलिस्ट से परखता है और हर एक को ठीक करने का तरीक़ा समझाता है: render-blocking स्क्रिप्ट और स्टाइलशीट, CSS @import, font-display के बिना @font-face, बिना आयाम या lazy loading वाली इमेज, lazy-loaded हीरो इमेज, पुराने इमेज फ़ॉर्मेट, lazy loading के बिना iframe, अनुपस्थित viewport या charset, document.write, बड़ा इनलाइन कोड, अनुपस्थित preconnect और बहुत बड़ा DOM या HTML।

पेज स्पीड चेकलिस्ट का उपयोग कैसे करें

  1. अपना पेज खोलें, View page source (Ctrl+U) इस्तेमाल करें, सब कुछ कॉपी करें।
  2. HTML चिपकाएं और Analyze दबाएं।
  3. प्रभाव के क्रम में छाँटे निष्कर्ष देखें, जिनमें दोषी टैग नमूने के रूप में दिखते हैं।
  4. जो पहले से ठीक है उसे देखने के लिए "Passed checks" खोलें।

उदाहरण

इनपुट
The sample page (analytics.js without defer, hero.jpg without size, iframe without lazy, no viewport)
आउटपुट
8 possible improvements: 1 render-blocking script, 1 image without width/height, 1 below-the-fold image without lazy loading, 3 JPEG/PNG images, 1 iframe without lazy loading, no viewport, no charset, 1 third-party origin without preconnect

पेज स्पीड चेकलिस्ट का उपयोग कब करें

इसे टेम्प्लेट या पेज की त्वरित स्टैटिक समीक्षा के लिए, या जब आप Lighthouse नहीं चला सकते तब इस्तेमाल करें। यह असली लोडिंग समय या Core Web Vitals नहीं नापता और JavaScript से जोड़े गए रिसोर्स नहीं देख सकता; लैब और फ़ील्ड डेटा के लिए Lighthouse या PageSpeed Insights इस्तेमाल करें।

पेज स्पीड चेकलिस्ट कैसे काम करता है

HTML टिप्पणियाँ हटाने के बाद आपके ब्राउज़र में हल्के टैग पार्सर से स्कैन होता है। हर नियम ख़ास टैग और एट्रिब्यूट जाँचता है – जैसे <head> में async, defer या type=module के बिना बाहरी <script> टैग, width और height दोनों के बिना <img>, पहली दो के बाद की loading="lazy" के बिना इमेज, या कुल 1,500 से ज़्यादा एलिमेंट। स्क्रिप्ट और स्टाइलशीट के थर्ड-पार्टी ओरिजिन की तुलना preconnect और dns-prefetch लिंक से की जाती है। कोई पेज लोड नहीं होता और कोई JavaScript नहीं चलती।

सामान्य उपयोग मामले

  • थीम के हेडर में रेंडरिंग रोकने वाली स्क्रिप्ट खोजना।
  • width और height के बिना लेआउट शिफ़्ट करने वाली इमेज पकड़ना।
  • जाँचना कि हीरो इमेज lazy-loaded नहीं है (LCP के लिए बुरा)।
  • लॉन्च से पहले HTML ईमेल या लैंडिंग पेज टेम्प्लेट की समीक्षा करना।

अक्सर पूछे जाने वाले प्रश्न

क्या यह Google PageSpeed Insights जैसा है?

नहीं। PageSpeed Insights पेज लोड करके नापता है। यह टूल सिर्फ़ आपका चिपकाया HTML पढ़ता है, इसलिए तुरंत और निजी है पर स्पीड नहीं नाप सकता।

पहली इमेज lazy-loaded क्यों नहीं होनी चाहिए?

fold के ऊपर की सबसे बड़ी इमेज आमतौर पर Largest Contentful Paint एलिमेंट होती है। Lazy loading उसे लेआउट तक देर करता है, जो LCP को नुक़सान पहुँचाता है।

क्या हर स्क्रिप्ट में defer होना चाहिए?

जिन स्क्रिप्ट को DOM चाहिए और जो क्रम में चलती हैं उनमें defer; एनालिटिक्स जैसी स्वतंत्र स्क्रिप्ट async इस्तेमाल कर सकती हैं। इनलाइन क्रिटिकल कोड छोटा रहना चाहिए।

और श्रेणियाँ देखें

CRC
त्रुटि का पता लगाने के लिए चक्रीय अतिरेक जांच एल्गोरिदम
MD
संदेश डाइजेस्ट एल्गोरिदम (MD2, MD4, MD5)
SHA-1
सुरक्षित हैश एल्गोरिथ्म 1 - 160-बिट हैश फ़ंक्शन
SHA-2
सुरक्षित हैश एल्गोरिथ्म 2 परिवार (SHA-224, SHA-256, SHA-384, SHA-512)