पृष्ठ रेंडरिंगला गती देण्यासाठी वर्डप्रेस आळशी लोड JavaScript कसे बनवायचे?

वर्डप्रेसपृष्ठ प्रस्तुत करण्याच्या पद्धतींना गती देण्यासाठी JavaScript चे आळशी लोडिंग.

JavaScript ची Defer मालमत्ता काय आहे?

प्रत्येकाला कदाचित ही परिस्थिती आली असेल:

डोक्यात N स्क्रिप्ट असतात आणि जेव्हा स्क्रिप्ट लोड केल्या जातात, तेव्हा पृष्ठ प्रस्तुतीकरण अवरोधित केले जाते, जे सहसा रिक्त असते.

अर्थात, सोर्स कोडमधील स्क्रिप्ट फूटरमध्ये टाकून आपण हे शोधू शकतो.

तथापि, काही जटिल विकास वातावरण हे सोपे कार्य विशेषतः जटिल बनवू शकतात.

या टप्प्यावर आपण Defer प्रॉपर्टी वापरू शकतो, जी JavaScript मधील तुलनेने दुर्मिळ गुणधर्म आहे.

तुम्ही कदाचित ते कधीच वापरणार नाही, पण हा परिचय वाचल्यानंतर तुम्ही ते सोडणार नाही याची मला खात्री आहे.

स्क्रिप्ट लोडवर पार्स करण्याऐवजी, संपूर्ण पृष्ठ लोड झाल्यानंतर स्क्रिप्टचे विश्लेषण करू देणे हे त्याचे मुख्य कार्य आहे, जे फक्त इव्हेंट-ट्रिगर केलेल्या JavaScript असलेल्या स्क्रिप्टसाठी पूर्ण पृष्ठ लोड गती प्रदान करते.

होय, स्क्रिप्ट टॅगमध्ये डिफर विशेषता असल्यास, HTML पृष्ठ हेडमध्ये ठेवले तरीही ते पार्स केल्यानंतर कार्यान्वित केले जाईल, जे पृष्ठाच्या तळाशी स्क्रिप्ट ठेवण्यासारखे आहे.

अर्थात, विलंबाचा वापर देखील मर्यादित आहे, सहसा 2 मुद्द्यांकडे लक्ष द्या:

1) डिफर्ड डिफर प्रकार स्क्रिप्ट ब्लॉकमध्ये document.write कमांडला कॉल करू नका;

• कारण document.write थेट आउटपुट इफेक्ट निर्माण करेल.

2) डिफर स्क्रिप्टमध्ये ग्लोबल व्हेरिएबल्स किंवा फंक्शन्स वापरू नका, कोणत्याही तात्काळ अंमलबजावणी स्क्रिप्टसह.

वर्डप्रेसमध्ये वापरलेल्या स्क्रिप्टमध्ये Defer विशेषता जोडा

वर्डप्रेसमध्ये, वर्डप्रेसद्वारे वापरल्या जाणार्‍या स्क्रिप्टमध्ये आपण डिफर विशेषता स्वयंचलितपणे कशी जोडू शकतो?

आम्ही सध्याच्या थीमच्या functions.php फाइलमध्ये खालील कोड जोडू शकतो ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• वरील कोड केवळ त्यानुसार कार्य करतेजावास्क्रिप्ट कोड वर्डप्रेसने सादर केलाप्रभावी होईल.

खबरदारी

थेट पूर्वावलोकन व्यवस्थापन रिक्त प्रदर्शित करू शकते:

तुम्ही वरील कोड वापरत असल्यास, जेव्हा तुम्ही रिअल-टाइम पूर्वावलोकन व्यवस्थापन (स्वरूप → सानुकूलित करा) उघडता, तेव्हा ते रिक्त प्रदर्शित होऊ शकते, म्हणून कृपया योग्य ते वापरा.

जेव्हा रिअल-टाइम पूर्वावलोकन व्यवस्थापन आवश्यक असेल, तेव्हा वरील कोडवर टिप्पणी द्या आणि सानुकूलन पूर्ण झाल्यानंतर टिप्पणी केलेला कोड हटवा.

PHP टिप्पणी कोड उदाहरण:

/*

这里是代码 

*/