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