लेख निर्देशिका
W3 Total Cache Minify साठी योग्य एम्बेडिंग प्रकार निवडताना अडचण येत आहे का? हा लेख एका वेबमास्टरचा प्रत्यक्ष अनुभव सांगतो आणि वेबसाइटच्या शैलीतील चुका व लोडिंग क्रॅश टाळून, योग्य Minify एम्बेडिंग प्रकार अचूकपणे निवडण्यासाठी एक सविस्तर मार्गदर्शन देतो. यात एक अचूक सेटअप सोल्यूशन देखील समाविष्ट आहे, जे अगदी नवशिक्यासुद्धा सहजपणे लागू करू शकतात, ज्यामुळे एक सुरळीत आणि वेगवान वर्डप्रेस अनुभव सुनिश्चित होतो!
मी एक वेबसाइट ऑप्टिमाइझ करत होतो आणि जेव्हा मी W3 Total Cache मध्ये मिनिफाय सेटिंग्ज उघडल्या, तेव्हा मी पूर्णपणे चकित झालो. एम्बेडेड प्रकारासाठी असलेल्या ड्रॉपडाउन मेन्यूमध्ये चार पर्याय होते: डिफॉल्ट (ब्लॉक), नॉन-ब्लॉकिंगसाठी JS वापरा, नॉन-ब्लॉकिंगसाठी "असिंक्रोनस" वापरा आणि नॉन-ब्लॉकिंगसाठी "डिलेड" वापरा.
मी क्षणभर विचार केला, की हे सगळं काय आहे?
माझ्यावर विश्वास ठेवा, तुम्ही एकटे नाही आहात. हे चार पर्याय अगदी नवशिक्यालाही गोंधळात टाकतील, मग अनेक वर्षांपासून वर्डप्रेस वापरणाऱ्या व्यक्तीबद्दल तर बोलायलाच नको. या लेखात, मला आलेल्या अडचणी आणि त्यातून मी शिकलेले धडे थेट मांडले आहेत. तुम्हाला डॉक्युमेंटेशन पाहण्याची गरज नाही; फक्त माझ्या सूचनांचे पालन करा.
हे चार एम्बेडिंग प्रकार नेमके काय आहेत?
चला, आधी हे चार पर्याय कोणत्या प्रकारचे पात्र आहेत याबद्दल बोलूया.
डिफॉल्ट ब्लॉकिंग हा सर्वात सोपा मार्ग आहे. जेव्हा ब्राउझरला एखादी स्क्रिप्ट आढळते, तेव्हा तो थांबतो, ती स्क्रिप्ट पूर्णपणे डाउनलोड करून कार्यान्वित करतो आणि नंतर पेज रेंडर करणे सुरू ठेवतो. हे विश्वसनीय वाटते, नाही का? पण याचा तोटा असा आहे की तुमचे पेज सुरुवातीला लोड होण्यास विलंब होईल; वापरकर्त्यांना काहीही दिसण्यापूर्वी स्क्रिप्ट पूर्ण होण्याची वाट पाहावी लागेल.
नॉन-ब्लॉकिंगसाठी जावास्क्रिप्ट वापरणे खूपच मनोरंजक आहे. पेजवर थेट `<script>` टॅग लिहिण्याऐवजी, ते आधी एक छोटी स्क्रिप्ट आउटपुट करते आणि नंतर पेज चालू झाल्यावर जावास्क्रिप्टद्वारे आवश्यक स्क्रिप्ट्स पेजमध्ये डायनॅमिकली इंजेक्ट करते. यामुळे, पेज आधी रेंडर होते आणि स्क्रिप्ट्स हळूहळू लोड होतात. हे छान वाटते, नाही का? तथापि, समस्या अशी आहे की ही डायनॅमिक इंजेक्शन प्रक्रिया स्क्रिप्ट्सच्या मूळ एक्झिक्युशन क्रमात व्यत्यय आणू शकते. जर तुमच्या पेजवरील काही स्क्रिप्ट्स एक्झिक्युशन क्रमावर मोठ्या प्रमाणात अवलंबून असतील, तर समस्या निर्माण होऊ शकतात.
नॉन-ब्लॉकिंग एक्झिक्यूशनसाठी "असिंक्रोनस" वापरण्याकरिता, फक्त `<script>` टॅगमध्ये `async` ॲट्रिब्यूट जोडला जातो. स्क्रिप्ट बॅकग्राउंडमध्ये असिंक्रोनसपणे डाउनलोड होईल आणि पूर्ण झाल्यावर, पेजला वाट न पाहता, लगेचच कार्यान्वित होईल. तथापि, याचा तोटा असा आहे की कार्यान्वित होण्याचा क्रम पूर्णपणे अनियंत्रित असतो; तुम्ही कोडमध्ये कोणताही क्रम नमूद केला असला तरी, जे काही आधी डाउनलोड होते तेच कार्यान्वित होते.
नॉन-ब्लॉकिंग एक्झिक्यूशनसाठी 'डिले'चा वापर `defer` ॲट्रिब्यूट जोडून साधला जातो. संपूर्ण पेज पार्स होईपर्यंत स्क्रिप्ट कार्यान्वित होण्यापूर्वी थांबेल आणि महत्त्वाचे म्हणजे, तुम्ही ती ज्या मूळ क्रमाने लिहिली आहे तोच क्रम ती कायम ठेवेल. हे वापरकर्त्यासाठी खूप सोयीचे आहे, कारण ते पहिली स्क्रीन ब्लॉक करत नाही किंवा स्क्रिप्टच्या क्रमात व्यत्यय आणत नाही.
मी कोणता निवडू?
सोप्या भाषेत सांगायचं तर, हे चार पर्याय एका बहुपर्यायी प्रश्नासारखे आहेत: तुम्हाला वेग हवा आहे, की सुव्यवस्था?
माझी सूचना पुढीलप्रमाणे आहे:
जर तुमची वेबसाइट लहान असेल, त्यात कमी स्क्रिप्ट्स असतील आणि तुम्हाला लोडिंग स्पीडबद्दल खूप जास्त अपेक्षा नसतील, तर डीफॉल्ट (ब्लॉक केलेले) सेटिंग वापरणे हा सर्वात सोपा पर्याय आहे. जरी ते थोडे संथ असले तरी, त्यामुळे कोणतीही अडचण येणार नाही.
जर तुम्हाला फर्स्ट-स्क्रीनचा वेग वाढवायचा असेल आणि तुमच्या स्क्रिप्ट्समध्ये 'A हे B च्या आधी कार्यान्वित झालेच पाहिजे' यासारखी तीव्र अवलंबित्वे नसतील, तर नॉन-ब्लॉकिंग एक्झिक्यूशनसाठी 'defer' वापरण्यास प्राधान्य द्या . हा सध्या उपलब्ध असलेला जवळजवळ सर्वोत्तम उपाय आहे, कारण तो कार्यान्वयनाचा क्रम कायम ठेवत ब्लॉकिंग रेंडरिंग टाळतो.
defer वापरून पाहिल्यानंतरही काही फंक्शन्समध्ये समस्या येत असल्याचे आढळल्यास, नॉन-ब्लॉकिंगसाठी जावास्क्रिप्ट वापरण्याचा विचार करा . ही पद्धत अधिक आक्रमक आहे, परंतु तिची सुसंगतता थोडी कमी आहे.
नॉन-ब्लॉकिंगसाठी 'असिंक' (async) वापरणे हा पर्याय मी सर्वात कमी सुचवतो. कारण अंमलबजावणीचा क्रम पूर्णपणे विस्कळीत होतो, त्यामुळे तुमचे स्क्रिप्ट्स स्वतंत्रपणे चालतात याची तुम्हाला पूर्ण खात्री असल्याशिवाय प्रोग्राम क्रॅश होण्याची शक्यता असते.
मी दोन मोठ्या सापळ्यांमध्ये अडकलो.
बोलणे सोपे आहे. मी केलेल्या दोन चुका मी लिहून ठेवल्या आहेत; तुम्ही त्या टाळू शकता का हे पाहण्यासाठी तुमच्या स्वतःच्या अनुभवाशी त्यांची पडताळणी करू शकता.
पहिली अडचण: सानुकूलित वर्डप्रेस थीम्सचे प्रत्यक्ष वेळेत पूर्वावलोकन करता येत नाही.
काही काळ, थीम कस्टमाइझ करताना, सेव्ह बटणावर क्लिक केल्यावर प्रिव्ह्यू रिफ्रेश होत नसे. मी काही बदल करून पेज रिफ्रेश करायचो, तरीही ते तसेच राहायचे.
थोडी तपासणी केल्यावर माझ्या लक्षात आले की, मिनिफायचे कॉम्प्रेशन फंक्शनच यामागील कारण होते. यावरचा उपाय सोपा आहे:
W3 Total Cache प्लगइनच्या जनरल सेटिंग्जमध्ये जा, "कॉम्प्रेशन" (Compression) पर्याय शोधा आणि त्यावरील खूण काढा. त्यानंतर, वरच्या उजव्या कोपऱ्यातील "सेव्ह सेटिंग्ज" (Save Settings) च्या खाली असलेल्या लहान बाणावर क्लिक करा आणि " सेव्ह सेटिंग्ज अँड क्लिअर कॅशे" (Save Settings and Clear Cache ) निवडा . ही पायरी अत्यंत महत्त्वाची आहे; कॅशे साफ केल्याशिवाय, तुम्हाला जुनी आवृत्तीच दिसत राहील.
तुमचे काम झाल्यावर, थीम कस्टमायझेशनवर परत जा, म्हणजे लाइव्ह प्रिव्ह्यू पुन्हा सामान्य होईल.
दुसरी समस्या: अ‍ॅस्ट्रा थीमच्या सर्च बॉक्सवर क्लिक केल्यावर तो प्रतिसाद देत नाही.
मला ही समस्या बऱ्याच काळापूर्वी आली होती. मी 'एस्ट्रा' (Astra) थीम वापरत होतो, आणि एके दिवशी अचानक माझ्या लक्षात आले की, मी कसेही क्लिक केले तरी सर्च बॉक्स प्रतिसाद देत नव्हता. सुरुवातीला मला वाटले की ही थीमचीच समस्या आहे, पण नंतर माझ्या लक्षात आले की हे W3TC च्या 'मिनिफाय' (Minify) सेटिंग्समुळे होत होते.
याचे उत्तर खालीलप्रमाणे आहे:
W3 Total Cache → General Settings → Advanced Compression Settings → JS → Minify Engine Settings → Locale Settings येथे जा आणि एम्बेडिंग प्रकार या दोनपैकी एकामध्ये बदला:
- पूर्वी, जावास्क्रिप्ट वापरून नॉन-ब्लॉकिंग साध्य केले जात होते.
- त्यानंतर, नॉन-ब्लॉकिंगसाठी JS वापरा
त्याचप्रमाणे, कॅशे साफ करून आणि पृष्ठ रिफ्रेश केल्याने शोध बॉक्स व्यवस्थित काम करू लागेल.
इतर पर्यायांऐवजी हे दोनच पर्याय का निवडले गेले, याबद्दल मी थोडे संशोधन केले आहे. सोप्या भाषेत सांगायचे तर, अ‍ॅस्ट्रा थीमचे फ्रंट-एंड घटक स्क्रिप्ट कार्यान्वित होण्याच्या वेळेबाबत खूप संवेदनशील असतात आणि काही नॉन-ब्लॉकिंग पद्धतींमुळे इव्हेंट बाइंडिंग अयशस्वी होऊ शकते. "नॉन-ब्लॉकिंग विथ जेएस" मोड वापरल्याने हे सुनिश्चित होते की, पेज पूर्णपणे लोड झाल्यानंतरच स्क्रिप्ट कार्यान्वित होईल आणि त्याच वेळी असिंक्रोनस (async) पद्धतीमध्ये दिसणारी अव्यवस्थित अंमलबजावणी टाळली जाईल.
भेट देण्याच्या ठिकाणांची यादी
शेवटी, येथे एक चेकलिस्ट आहे ज्याचे तुम्ही थेट पालन करू शकता:
पहिली पायरी म्हणजे तुमचे ध्येय स्पष्ट करणे. तुम्हाला सर्वात जलद प्रारंभिक पेज लोड हवे आहे, की तुम्ही स्थिरता आणि त्रुटी-मुक्त कार्याला प्राधान्य देता? यावरून तुम्ही कोणता एम्बेडिंग प्रकार वापरावा हे निश्चित होईल.
दुसरी पायरी म्हणजे एकदम सर्व काही न बदलणे. प्रथम, चाचणीसाठी एक कमी महत्त्वाचे पान शोधा, एक-दोन दिवस त्याचे निरीक्षण करा आणि कोणतीही समस्या नाही याची खात्री झाल्यावरच ते संपूर्ण साइटवर लागू करा.
तिसरे, प्रत्येक बदलानंतर नेहमी कॅशे साफ करा. W3TC ची कॅशिंग यंत्रणा तुम्हाला नवीनतम बदल पाहण्यापासून रोखेल, त्यामुळे "कॅशे साफ करा आणि पुन्हा तपासा" ही पायरी अत्यंत आवश्यक आहे.
चौथे, आधी आणि नंतरच्या लोडिंग वेगाची तुलना करण्यासाठी तुमच्या ब्राउझरचे डेव्हलपर टूल्स किंवा पेजस्पीड इनसाइट्ससारखी साधने वापरा. केवळ तुमच्या अंतर्ज्ञानावर अवलंबून न राहता, डेटाला स्वतःच बोलू द्या.
शेवटी लिहा
खरं सांगायचं तर, जेव्हा मी हे एम्बेडेड टाइप सेटिंग पहिल्यांदा पाहिलं, तेव्हा मी बराच वेळ चकित झालो होतो. डीफॉल्ट ब्लॉकिंग मोड खूपच संथ वाटत होता, तर असिंक्रोनस मोडमध्ये क्रमाची खात्री नव्हती आणि डिफरिंगमुळे सुसंगततेच्या समस्या निर्माण होऊ शकत होत्या. कोणता पर्याय निवडावा याबद्दल मला खात्री वाटत नव्हती.
पण नंतर माझ्या लक्षात आले की ही एक तडजोड आहे. तुम्हाला सर्वात वेगवान आणि सर्वात स्थिर दोन्ही गोष्टी मिळू शकत नाहीत; तुम्हाला नेहमी एकाचा त्याग करावा लागतो. माझ्या अनुभवानुसार, आधी 'डिफर' (defer) वापरावे, जो सध्या सर्वात सुरक्षित नॉन-ब्लॉकिंग उपाय आहे, आणि नंतर समस्या उद्भवल्यास 'कॉलबॅक' (callback) वापरावा.
जर तुम्हाला अशाच प्रकारच्या समस्या आल्या, किंवा माझी पद्धत वापरल्यानंतरही इतर काही अडचणी येत असतील, तर त्यावर मोकळेपणाने चर्चा करा. वेबसाइट डेव्हलपमेंट हे सर्वस्वी प्रयत्न आणि चुकांमधूनच घडते; याला कोणीही अपवाद नाही.
माझा लेख वाचल्याबद्दल धन्यवाद. पुढच्या वेळी भेटूया.
मला आशा आहे की चेन वेइलियांगच्या ब्लॉगवर ( https://www.chenweiliang.com/ ) शेअर केलेला "W3 Total Cache Minify Plugin Settings: How to Choose the Embedding Type? My Pitfalls and Lifesaving Advice" हा लेख तुम्हाला उपयुक्त ठरेल.
या लेखाची लिंक शेअर करण्यास हरकत नाही: https://www.chenweiliang.com/cwl-34003.html