Scripts

WordPress में प्रीलोडर कैसे जोड़ें: एक चरण-दर-चरण गाइड

Q: क्या प्रीलोडर प्लगइन Full Site Editing (Gutenberg) थीम के साथ काम करते हैं?

अधिकांश करते हैं, जब तक थीम wp_body_open() को कॉल करता है। WordPress ब्लॉक एडिटर खुद ब्राउज़र में पेज लोड इवेंट के काम करने के तरीके को नहीं बदलता। WordPress.org रिपॉजिटरी में प्लगइन के "Tested up to" वर्शन को जाँचकर अपने इंस्टॉल किए WordPress वर्शन के साथ संगतता की पुष्टि करें — संगतता की स्थिति बदलती है; इंस्टॉल के समय इसे सत्यापित करें।

Alejandro Rioja

29 मई 2026 7 मिनट पढ़ें

TL;DR

प्रीलोडर एनिमेशन भारी एसेट्स लोड होने के दौरान खाली स्क्रीन को भरता है। 2026 में सही प्लगइन WP Smart Preloader या एक हल्का कस्टम स्निपेट है — लेकिन इसे स्किप करें अगर आपकी साइट पहले से तेज़ है, क्योंकि खराब तरीके से ट्यून किया गया प्रीलोडर वास्तव में LCP को नुकसान पहुँचाता है।

मुफ़्त न्यूज़लेटर

हर बुधवार। 28,400+ पाठक। बिना फालतू बात।

विषय-सूची

मई 2026 में अपडेट किया गया।

TL;DR: प्रीलोडर एनिमेशन भारी एसेट्स लोड होने के दौरान खाली स्क्रीन को भरता है। 2026 में सही प्लगइन WP Smart Preloader या एक हल्का कस्टम स्निपेट है — लेकिन इसे स्किप करें अगर आपकी साइट पहले से तेज़ है, क्योंकि खराब तरीके से ट्यून किया गया प्रीलोडर वास्तव में LCP को नुकसान पहुँचाता है।

2026 में क्या आपको प्रीलोडर जोड़ना चाहिए?

तरीका बताने से पहले, मैं आपको पहले ईमानदार जवाब देना चाहता हूँ: अधिकांश साइट्स को प्रीलोडर नहीं जोड़ना चाहिए।

Google के Core Web Vitals, Largest Contentful Paint (LCP) मापते हैं — आपका सबसे दिखने वाला कंटेंट कितनी जल्दी दिखता है। एक प्रीलोडर एनिमेशन से स्क्रीन को ढककर उस पेंट को शाब्दिक रूप से देर करता है। अगर आपका प्रीलोडर सिर्फ 1.5 सेकंड चलता है, तो यह हर पेज लोड पर 1.5 सेकंड का गारंटीशुदा LCP पेनल्टी है।

जब प्रीलोडर समझ में आता है:

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

इसे पूरी तरह स्किप कब करें:

आपके पास एक सामान्य ब्लॉग, पोर्टफोलियो, या WooCommerce स्टोर है। इसके बजाय साइट को तेज़ करें — इमेज लेज़ी-लोड करें, CDN उपयोग करें, तेज़ होस्ट पर स्विच करें।
आपका LCP पहले से 2.5 सेकंड से कम है। प्रीलोडर जोड़ने से यह केवल बदतर होगा।

अगर आप फिर भी आगे बढ़ना चाहते हैं, तो यहाँ Gutenberg / Full Site Editing युग में इसे सही तरीके से करने का तरीका है।

प्रीलोडर क्या है?

प्रीलोडर एक UI एलिमेंट है — आमतौर पर एक एनिमेटेड स्पिनर, प्रगति बार, या ब्रांडेड लोगो एनिमेशन — जो ब्राउज़र द्वारा पेज संसाधनों को डाउनलोड और रेंडर करते समय प्रदर्शित होता है। टेक्स्ट और HTML तेज़ी से लोड होते हैं; इमेज और एम्बेडेड वीडियो में अधिक समय लगता है। प्रीलोडर उस अंतर को भरता है ताकि उपयोगकर्ता खाली या आंशिक रूप से रेंडर किए गए लेआउट के बजाय कुछ देखें।

पुराने WordPress (5.0 से पहले के क्लासिक एडिटर के दिनों में) में, प्रीलोडर आमतौर पर header.php को सीधे संपादित करके जोड़े जाते थे। 2026 में, Gutenberg और FSE थीम के साथ, थीम फ़ाइलों को सीधे संपादित करना दृढ़ता से हतोत्साहित किया जाता है — थीम अपडेट आपके बदलावों को मिटा देते हैं। इसके बजाय एक प्लगइन या Code Snippets दृष्टिकोण का उपयोग करें।

WordPress में प्रीलोडर कैसे जोड़ें (2026 के तरीके)

विधि 1 — WP Smart Preloader प्लगइन

WP Smart Preloader WordPress.org रिपॉजिटरी में एक मुफ्त प्लगइन है जो क्लासिक थीम और ब्लॉक थीम दोनों के साथ काम करता है। इंस्टॉल करने से पहले सत्यापित करें कि यह अभी भी सक्रिय रूप से मेंटेन किया जा रहा है और आपके मौजूदा WordPress संस्करण के साथ संगत है — प्लगइन रखरखाव की स्थिति बदल सकती है; इसके रिपॉजिटरी पेज पर “अंतिम अपडेट” तारीख जाँचें।

अपने WordPress डैशबोर्ड में प्लगइन्स → नया जोड़ें पर जाएं और “WP Smart Preloader” खोजें।
इंस्टॉल और सक्रिय करें।
सेटिंग्स → WP Smart Preloader पर जाएं।
बिल्ट-इन विकल्पों से एक प्रीलोडर स्टाइल चुनें, या अपना कस्टम HTML/CSS पेस्ट करें।
“केवल होम पेज पर दिखाएं” के अंतर्गत — इसे सक्षम करें अगर आप केवल होमपेज पर एनिमेशन चाहते हैं। हर पेज पर प्रीलोडर चलाने से आपकी पूरी साइट पर LCP लागत कई गुना बढ़ जाती है।
लोडर दिखाने की अवधि सेट करें। डिफ़ॉल्ट 1500 ms है। मैं इसे कम करने की सलाह दूंगा — अधिकतम 800–1000 ms। जितना अधिक चलेगा, LCP स्कोर उतना बुरा होगा।
परिवर्तन सहेजें पर क्लिक करें और पहले और बाद में PageSpeed Insights से परीक्षण करें। अगर LCP बढ़ता है, प्लगइन हटा दें।

विधि 2 — Code Snippets प्लगइन के माध्यम से कस्टम कोड

अगर आप एक समर्पित प्रीलोडर प्लगइन के बिना पूर्ण नियंत्रण चाहते हैं, तो थीम फ़ाइलों को छुए बिना मार्कअप और स्टाइल इंजेक्ट करने के लिए Code Snippets प्लगइन (मुफ्त, व्यापक रूप से मेंटेन किया गया) का उपयोग करें।

चरण 1 — HTML स्निपेट जोड़ें (PHP)

Code Snippets में, “केवल फ्रंट-एंड” पर चलाने के लिए सेट किया गया एक नया स्निपेट बनाएं:

php

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

नोट: wp_body_open केवल उन थीम पर काम करता है जो अपने टेम्पलेट में wp_body_open() को कॉल करते हैं। अधिकांश आधुनिक ब्लॉक थीम और मेंटेन किए गए क्लासिक थीम ऐसा करते हैं। अगर आपका प्रीलोडर दिखाई नहीं देता, तो जाँचें कि आपका थीम इस हुक को सपोर्ट करता है या नहीं।

चरण 2 — CSS जोड़ें

“केवल फ्रंट-एंड → CSS” पर सेट किया गया दूसरा स्निपेट बनाएं:

css

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

चरण 3 — डिसमिसल JavaScript जोड़ें

“केवल फ्रंट-एंड → JavaScript” पर सेट किया गया तीसरा स्निपेट बनाएं:

javascript

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

यह DOMContentLoaded के बजाय window.load इवेंट — इमेज और सबफ्रेम लोड होने के बाद — पर प्रीलोडर हटाता है, जो बहुत जल्दी फायर होता है।

विधि 3 — ब्लॉक थीम / FSE: लोडिंग ओवरले ब्लॉक या प्लगइन उपयोग करें

अगर आप Full Site Editing थीम (Twenty Twenty-Four, Kadence, GeneratePress ब्लॉक मोड, आदि) चला रहे हैं, तो कुछ पेज बिल्डर प्लगइन (Elementor, Kadence Blocks, Spectra) की सेटिंग्स में बिल्ट-इन प्रीलोडर या लोडिंग स्क्रीन विकल्प हैं। पहले अपने थीम या बिल्डर के दस्तावेज़ देखें — एक अलग प्लगइन के साथ बिल्ट-इन के ऊपर प्रीलोडर डुप्लिकेट करने से डबल-ओवरले होगा।

लाइव जाने से पहले परफॉर्मेंस चेकलिस्ट

प्रीलोडर शिप करने से पहले, निम्नलिखित सभी की जाँच करें:

प्रीलोडर के बिना एक पेज पर PageSpeed Insights टेस्ट चलाएं। अपना LCP नोट करें।
प्रीलोडर सक्षम करें और वही टेस्ट चलाएं। अगर LCP ~100 ms से अधिक खराब होता है, तो पुनर्विचार करें।
प्रीलोडर अवधि 1000 ms या उससे कम रखें। इससे अधिक कुछ भी UX और रैंकिंग देनदारी है।
मोबाइल 4G थ्रॉटल कनेक्शन पर परीक्षण करें (Chrome DevTools → नेटवर्क → Fast 4G)। धीमे कनेक्शन पर प्रीलोडर बहुत लंबे महसूस होते हैं।
सुनिश्चित करें कि प्रीलोडर स्क्रीन रीडर से छिपा हुआ है (aria-hidden="true") और कीबोर्ड फोकस को ट्रैप नहीं करता।

WordPress प्रीलोडर FAQ — 2026

क्या प्रीलोडर SEO को नुकसान पहुँचाता है?

हाँ, यह कर सकता है। Google के Core Web Vitals — विशेष रूप से LCP — एक पुष्टि किया गया रैंकिंग सिग्नल है। आपके कंटेंट के सामने बैठा प्रीलोडर LCP में देरी करता है। अधिकांश मानक WordPress साइट्स के लिए, मैं इसे पूरी तरह स्किप करने और इमेज ऑप्टिमाइज़ेशन और कैशिंग में समय निवेश करने की सलाह दूंगा। अगर आपकी साइट इतनी भारी है कि वास्तव में एक की जरूरत है, तो अवधि कम रखें और Google Search Console में CWV मॉनिटर करें।

क्या प्रीलोडर प्लगइन Full Site Editing (Gutenberg) थीम के साथ काम करते हैं?

अधिकांश करते हैं, जब तक थीम wp_body_open() को कॉल करता है। WordPress ब्लॉक एडिटर खुद ब्राउज़र में पेज लोड इवेंट के काम करने के तरीके को नहीं बदलता। WordPress.org रिपॉजिटरी में प्लगइन के “Tested up to” वर्शन को जाँचकर अपने इंस्टॉल किए WordPress वर्शन के साथ संगतता की पुष्टि करें — संगतता की स्थिति बदलती है; इंस्टॉल के समय इसे सत्यापित करें।

क्या मैं 2026 में बिना प्लगइन के प्रीलोडर जोड़ सकता हूँ?

हाँ — ऊपर की Code Snippets विधि बिना-प्लगइन का सबसे साफ दृष्टिकोण है। यह थीम अपडेट से बचती है, अक्षम करना आसान है, और मार्कअप और टाइमिंग पर पूर्ण नियंत्रण देती है। अपने सक्रिय या चाइल्ड थीम में header.php को सीधे संपादित करने से बचें; यह रखरखाव ऋण जोड़ता है और थीम स्विच करने पर टूट जाता है।

मेरा प्रीलोडर हर पेज पर दिखता है। मैं इसे केवल होमपेज तक कैसे सीमित करूं?

WP Smart Preloader में, सेटिंग्स में “केवल होम पेज पर दिखाएं” चेक करें। कस्टम कोड दृष्टिकोण के लिए, add_action कॉल को एक शर्त के साथ लपेटें:

php

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

संबंधित पठन:

यह गाइड alejandrorioja.com का हिस्सा है — Alejandro Rioja द्वारा लिखी गई, जो अब संस्थापकों के लिए AI एजेंट सिस्टम बनाते हैं। उस एजेंट सहित जो इस साइट को वर्तमान रखता है। यह कैसे काम करता है →

मई 2026 के लिए अपडेट किया गया

मई 2026 से एक छोटी नोट: इस पोस्ट में वर्णित वर्कफ़्लो को अंतर्निहित उपकरणों और प्लेटफ़ॉर्म की वर्तमान स्थिति के विरुद्ध जाँचा गया था। जहाँ विशिष्ट उपकरण, UI, या फीचर्स विकसित हुए हैं, संरचनात्मक सलाह अभी भी लागू होती है — 2026 में कार्यान्वयन थोड़ा अलग दिखेगा। अगर आपको कोई चरण मिलता है जो आप स्क्रीन पर देखते हैं उससे मेल नहीं खाता, तो यह संभवतः एक UI रिफ्रेश है, दृष्टिकोण में मौलिक परिवर्तन नहीं। संपर्क फ़ॉर्म के माध्यम से एक नोट छोड़ें और मैं इसे स्पष्ट रूप से ठीक करूंगा।

पढ़ते रहें

AI प्लेबुक अपने इनबॉक्स में पाएं

हर बुधवार। 28,400+ पाठक। बिना फालतू बात।