கட்டுரை அடைவு
W3 Total Cache Minify-க்கு சரியான உட்பொதிப்பு வகையைத் தேர்ந்தெடுப்பதில் சிரமப்படுகிறீர்களா? இந்தக் கட்டுரை ஒரு வலைத்தள நிர்வாகியின் நிஜ உலக அனுபவத்தைப் பகிர்வதோடு, வலைத்தள வடிவமைப்புச் சிக்கல்களையும் ஏற்றும்போது ஏற்படும் செயலிழப்புகளையும் தவிர்த்து, சரியான Minify உட்பொதிப்பு வகையைத் துல்லியமாகத் தேர்ந்தெடுப்பதற்கான படிப்படியான வழிகாட்டியையும் வழங்குகிறது. மேலும், இது ஆரம்பநிலையாளர்கள் கூட எளிதாகப் பயன்படுத்தக்கூடிய, பிழையற்ற ஒரு அமைவுத் தீர்வையும் உள்ளடக்கியுள்ளது. இது ஒரு மென்மையான மற்றும் வேகமான வேர்ட்பிரஸ் அனுபவத்தை உறுதி செய்கிறது!
நான் ஒரு வலைத்தளத்தை மேம்படுத்திக் கொண்டிருந்தபோது, W3 Total Cache-இல் உள்ள Minify அமைப்புகளைத் திறந்ததும், முற்றிலும் திகைத்துப்போனேன். உட்பொதிந்த வகைக்கான கீழ்விரிப் பட்டியலில் நான்கு தேர்வுகள் இருந்தன: இயல்புநிலை (தடுப்பு), தடுப்பற்ற முறைக்கு JS-ஐப் பயன்படுத்து, தடுப்பற்ற முறைக்கு "ஒத்திசைவற்ற" முறையைப் பயன்படுத்து, மற்றும் தடுப்பற்ற முறைக்கு "தாமதமான" முறையைப் பயன்படுத்து.
நான் ஒரு கணம் யோசித்தேன், இதெல்லாம் என்ன?
என்னை நம்புங்கள், நீங்கள் தனியாக இல்லை. பல ஆண்டுகளாக வேர்ட்பிரஸ் பயன்படுத்தி வருபவரை விடுங்கள், இந்த நான்கு தெரிவுகளும் ஒரு புதியவரையே குழப்பத்தில் ஆழ்த்தக்கூடும். இந்தக் கட்டுரை, நான் சந்தித்த இடர்ப்பாடுகளையும் கற்றுக்கொண்ட பாடங்களையும் நேரடியாக உங்களிடம் முன்வைக்கிறது. நீங்கள் ஆவணங்களைப் பார்க்கத் தேவையில்லை; என் அறிவுறுத்தல்களைப் பின்பற்றினால் மட்டும் போதும்.
இந்த நான்கு உட்பொதிவு வகைகள் என்றால் என்ன?
முதலில் இந்த நான்கு தெரிவுகளும் எத்தகைய குணாதிசயங்களைக் கொண்டவை என்று பார்ப்போம்.
இயல்புநிலைத் தடுப்பு என்பது மிகவும் நேரடியான அணுகுமுறையாகும். உலாவி ஒரு ஸ்கிரிப்டை எதிர்கொள்ளும்போது, அது நின்று, அந்த ஸ்கிரிப்டை முழுமையாகப் பதிவிறக்கம் செய்து செயல்படுத்திவிட்டு, பின்னர் பக்கத்தை ரெண்டரிங் செய்யத் தொடர்கிறது. இது நம்பகமானதாகத் தெரிகிறது, இல்லையா? ஆனால் இதன் குறைபாடு என்னவென்றால், உங்கள் ஆரம்பப் பக்க ஏற்றுதல் தாமதமாகும்; பயனர்கள் எதையும் பார்ப்பதற்கு முன்பு, ஸ்கிரிப்ட் இயங்கி முடிக்கும் வரை காத்திருக்க வேண்டியிருக்கும்.
நான்-பிளாக்கிங்கிற்காக ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவது மிகவும் சுவாரஸ்யமானது. பக்கத்தில் நேரடியாக `<script>` டேக்குகளை எழுதுவதற்குப் பதிலாக, இது முதலில் ஒரு சிறிய ஸ்கிரிப்டை வெளியிடுகிறது, பின்னர் பக்கம் இயங்கத் தொடங்கிய பிறகு ஜாவாஸ்கிரிப்ட் வழியாகத் தேவையான ஸ்கிரிப்டுகளைப் பக்கத்தில் டைனமிக்காகச் செருகுகிறது. இந்த வழியில், பக்கம் முதலில் ரெண்டர் ஆகும், மேலும் ஸ்கிரிப்டுகள் படிப்படியாக லோட் ஆகும். கேட்பதற்கு அருமையாக இருக்கிறது, இல்லையா? இருப்பினும், இதில் உள்ள சிக்கல் என்னவென்றால், இந்த டைனமிக் செருகல் செயல்முறையானது ஸ்கிரிப்டுகளின் அசல் இயக்க வரிசையைச் சீர்குலைக்கக்கூடும். உங்கள் பக்கத்தில் உள்ள சில ஸ்கிரிப்டுகள் இயக்க வரிசையை மிகவும் சார்ந்திருந்தால், சிக்கல்கள் ஏற்படலாம்.
தடையற்ற செயலாக்கத்திற்கு "asynchronous" என்பதைப் பயன்படுத்துவது என்பது, `<script>` குறிச்சொல்லில் `async` பண்புக்கூறைச் சேர்ப்பதை மட்டுமே உள்ளடக்கியது. அந்த ஸ்கிரிப்ட் பின்னணியில் ஒத்திசைவற்ற முறையில் பதிவிறக்கப்பட்டு, பக்கம் அதற்காகக் காத்திருக்காமல், முடிந்தவுடன் உடனடியாகச் செயல்படுத்தப்படும். இருப்பினும், இதன் குறைபாடு என்னவென்றால், செயல்படுத்தும் வரிசையை முற்றிலும் கட்டுப்படுத்த முடியாது; குறியீட்டில் நீங்கள் குறிப்பிடும் வரிசையைப் பொருட்படுத்தாமல், முதலில் எது பதிவிறக்கப்படுகிறதோ அதுவே செயல்படுத்தப்படும்.
தடையற்ற செயலாக்கத்திற்காக 'தாமதம்' என்பதைப் பயன்படுத்துவதற்கு, `defer` என்ற பண்புக்கூறைச் சேர்க்க வேண்டும். முழுப் பக்கமும் பகுப்பாய்வு செய்யப்படும் வரை ஸ்கிரிப்ட் காத்திருக்கும், மேலும் முக்கியமாக, நீங்கள் அதை எழுதிய அசல் வரிசையை அது அப்படியே பராமரிக்கும். இது பயனருக்கு மிகவும் எளிதானது, ஏனெனில் இது முதல் திரையைத் தடுப்பதுமில்லை, ஸ்கிரிப்டின் வரிசையைச் சீர்குலைப்பதுமில்லை.
நான் எதைத் தேர்ந்தெடுக்க வேண்டும்?
எளிமையாகச் சொல்வதானால், இந்த நான்கு விருப்பங்களும் ஒரு பல்தேர்வு வினாவைப் போன்றவை: உங்களுக்கு வேகம் வேண்டுமா, அல்லது ஒழுங்கு வேண்டுமா?
எனது பரிந்துரை பின்வருமாறு:
உங்கள் இணையதளம் சிறியதாகவும், குறைவான ஸ்கிரிப்டுகளைக் கொண்டதாகவும், மேலும் ஏற்றுதல் வேகத்தில் உங்களுக்கு மிக உயர்ந்த எதிர்பார்ப்புகள் இல்லாமலும் இருந்தால், இயல்புநிலை (தடுக்கப்பட்ட) அமைப்பைப் பயன்படுத்துவதே மிகவும் எளிதான தேர்வாகும். இது சற்றே மெதுவாக இருந்தாலும், எந்தப் பிரச்சனைகளையும் ஏற்படுத்தாது.
முதல் திரையின் வேகத்தை நீங்கள் மேம்படுத்த விரும்பினால், மேலும் உங்கள் ஸ்கிரிப்டுகளுக்கு "A, B-க்கு முன் இயங்க வேண்டும்" என்பது போன்ற வலுவான சார்புநிலைகள் இல்லை என்றால், தடையற்ற செயலாக்கத்திற்காக "defer"-ஐப் பயன்படுத்துவதற்கு முன்னுரிமை கொடுங்கள் . இது தற்போதுள்ள தீர்வுகளில் ஏறக்குறைய மிகச் சிறந்ததாகும், ஏனெனில் இது செயலாக்க வரிசையைப் பராமரிக்கும் அதே வேளையில், ரெண்டரிங் தடைபடுவதைத் தவிர்க்கிறது.
defer-ஐ முயற்சி செய்த பிறகும் சில செயல்பாடுகளில் சிக்கல்கள் தொடர்வதை நீங்கள் கண்டறிந்தால், non-blocking-கிற்காக ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள் . இந்த அணுகுமுறை மிகவும் தீவிரமானது, ஆனால் அதன் இணக்கத்தன்மை சற்றே மோசமாக இருக்கும்.
தடையற்ற செயல்பாட்டிற்கு 'async'-ஐப் பயன்படுத்துவதை நான் மிகக் குறைவாகப் பரிந்துரைக்கிறேன். ஏனெனில், செயல்படுத்தும் வரிசை முற்றிலும் குழப்பமடைவதால், உங்கள் ஸ்கிரிப்டுகள் தனித்தனியாக இயங்கும் என்பதில் உங்களுக்கு முழு நம்பிக்கை இல்லாவிட்டால், அது எளிதில் செயலிழந்துவிடும்.
நான் சிக்கிக்கொண்ட இரண்டு பெரிய பள்ளங்கள்
பேச்சுக்கு மதிப்பில்லை. நான் செய்த இரண்டு தவறுகளை எழுதி வைத்திருக்கிறேன்; அவற்றை உங்கள் சொந்த அனுபவத்துடன் ஒப்பிட்டுப் பார்த்து, உங்களால் தவிர்க்க முடியுமா என்று தெரிந்துகொள்ளலாம்.
முதல் சிக்கல்: தனிப்பயன் வேர்ட்பிரஸ் தீம்களை நிகழ் நேரத்தில் முன்னோட்டமிட முடியாது.
சிறிது காலமாக, ஒரு தீம்மைத் தனிப்பயனாக்கும்போது, சேமி என்பதைக் கிளிக் செய்த பிறகு, முன்னோட்டம் புதுப்பிக்கப்படவில்லை. நான் சில மாற்றங்களைச் செய்து, பக்கத்தைப் புதுப்பித்தாலும், அது அப்படியேதான் இருந்தது.
சிறிது விசாரணைக்குப் பிறகு, மினிஃபையின் சுருக்கச் செயல்பாடுதான் இதற்குக் காரணம் என்பதைக் கண்டுபிடித்தேன். தீர்வு எளிமையானது:
W3 Total Cache plugin-இன் பொது அமைப்புகளுக்குச் சென்று, "Compression" விருப்பத்தைக் கண்டுபிடித்து , அதில் உள்ள குறியை நீக்கவும். பிறகு, மேல் வலது மூலையில் உள்ள "Save Settings" என்பதற்கு கீழே உள்ள சிறிய அம்புக்குறியைக் கிளிக் செய்து, " Save Settings and Clear Cache " என்பதைத் தேர்ந்தெடுக்கவும். இந்தப் படி மிகவும் முக்கியமானது; கேஷை அழிக்காமல் விட்டால், நீங்கள் பழைய பதிப்பையே தொடர்ந்து பார்க்க நேரிடும்.
நீங்கள் முடித்த பிறகு, தீம் தனிப்பயனாக்கத்திற்குத் திரும்பிச் செல்லுங்கள், நேரலை முன்னோட்டம் மீண்டும் இயல்பு நிலைக்குத் திரும்பிவிடும்.
இரண்டாவது சிக்கல்: அஸ்ட்ரா தீம் தேடல் பெட்டியைக் கிளிக் செய்யும்போது அது செயல்படுவதில்லை.
நான் இந்தச் சிக்கலை வெகு காலத்திற்கு முன்பே எதிர்கொண்டேன். நான் ஆஸ்ட்ரா தீம்-ஐப் பயன்படுத்திக் கொண்டிருந்தேன், ஒரு நாள் திடீரென்று, நான் எப்படி கிளிக் செய்தாலும் தேடல் பெட்டி செயல்படவில்லை. முதலில், இது தீம்-இன் சிக்கல் என்று நினைத்தேன், ஆனால் பின்னர் W3TC-இன் மினிஃபை அமைப்புகளால் இது ஏற்பட்டது என்பதைக் கண்டுபிடித்தேன்.
தீர்வு பின்வருமாறு:
W3 Total Cache → General Settings → Advanced Compression Settings → JS → Minify Engine Settings → Locale Settings என்பதற்குச் சென்று, உட்பொதிப்பு வகையை (embedding type) இந்த இரண்டில் ஒன்றாக மாற்றவும்:
- முன்னதாக, ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி தடையற்ற செயல்பாடு அடையப்பட்டது.
- அதன்பிறகு, தடையற்ற செயல்பாட்டிற்கு ஜாவாஸ்கிரிப்டைப் பயன்படுத்தவும்.
அதேபோல், கேச்-ஐ அழித்து பக்கத்தைப் புதுப்பித்தால், தேடல் பெட்டி சரியாகச் செயல்படும்.
மற்ற விருப்பங்களுக்குப் பதிலாக இந்த இரண்டு விருப்பங்கள் ஏன் தேர்ந்தெடுக்கப்பட்டன என்பது குறித்து, நான் சில ஆய்வுகளைச் செய்துள்ளேன். எளிமையாகச் சொன்னால், ஆஸ்ட்ரா தீமின் ஃப்ரண்ட்-எண்ட் கூறுகள் ஸ்கிரிப்ட் செயல்படுத்தப்படும் நேரத்திற்கு மிகவும் உணர்திறன் கொண்டவை, மேலும் சில நான்-பிளாக்கிங் முறைகள் நிகழ்வுப் பிணைப்பு தோல்வியடையக் காரணமாகலாம். "நான்-பிளாக்கிங் வித் ஜேஎஸ்" (non-blocking with JS) பயன்முறையைப் பயன்படுத்துவது, பக்கம் முழுமையாக ஏற்றப்பட்ட பின்னரே ஸ்கிரிப்ட் செயல்படுத்தப்படுவதை உறுதி செய்கிறது, அதே நேரத்தில் அசிங்க் (async) முறையில் காணப்படும் ஒழுங்கற்ற செயல்பாட்டையும் தவிர்க்கிறது.
பார்க்க வேண்டிய இடங்களின் பட்டியல்
இறுதியாக, நீங்கள் நேரடியாகப் பின்பற்றக்கூடிய சரிபார்ப்புப் பட்டியல் இதோ:
உங்கள் இலக்கைத் தெளிவுபடுத்துவதே முதல் படியாகும். நீங்கள் மிக வேகமான ஆரம்பப் பக்க ஏற்றுதலை விரும்புகிறீர்களா, அல்லது நிலைத்தன்மைக்கும் பிழையற்ற செயல்பாட்டிற்கும் முன்னுரிமை அளிக்கிறீர்களா? இதுவே நீங்கள் எந்த உட்பொதிப்பு வகையைப் பயன்படுத்த வேண்டும் என்பதைத் தீர்மானிக்கும்.
இரண்டாவது படி என்னவென்றால், எல்லாவற்றையும் ஒரே நேரத்தில் மாற்றிவிடக் கூடாது. முதலில், முக்கியத்துவம் குறைந்த ஒரு பக்கத்தைக் கண்டறிந்து அதைச் சோதித்துப் பாருங்கள், ஓரிரு நாட்களுக்கு அதைக் கவனியுங்கள், பின்னர் எந்தப் பிரச்சனைகளும் இல்லை என்று நீங்கள் உறுதியாக அறிந்தால் மட்டுமே அதை முழு வலைத்தளத்திற்கும் கொண்டு வாருங்கள்.
மூன்றாவதாக, ஒவ்வொரு மாற்றத்திற்கும் பிறகு கேச்-ஐ எப்போதும் அழிக்கவும். W3TC-யின் கேச்சிங் பொறிமுறையானது, சமீபத்திய மாற்றங்களை நீங்கள் பார்ப்பதைத் தடுக்கும், எனவே "கேச்-ஐ அழித்து மீண்டும் சோதிக்கவும்" என்ற படிநிலை முற்றிலும் அவசியமானது.
நான்காவதாக, உங்கள் உலாவியின் டெவலப்பர் கருவிகள் அல்லது PageSpeed Insights போன்ற கருவிகளைப் பயன்படுத்தி, முன்பும் பின்பும் உள்ள ஏற்றுதல் வேகத்தை ஒப்பிட்டுப் பாருங்கள். உங்கள் உள்ளுணர்வை மட்டும் நம்பாமல், தரவுகளே பேசட்டும்.
இறுதியில் எழுதுங்கள்
உண்மையைச் சொல்லப்போனால், நான் முதன்முதலில் இந்த எம்பெடட் டைப் செட்டிங்கைப் பார்த்தபோது, நீண்ட நேரம் திகைத்துப்போனேன். இயல்புநிலை பிளாக்கிங் மோடு மிகவும் மெதுவாக இருப்பதாகத் தோன்றியது, அதே சமயம் அசிங்க்ரோனஸ் மோடு செயல்பாடுகளின் வரிசைக்கு உத்தரவாதம் அளிக்கவில்லை, மேலும் டிஃபர்லிங் செய்வதால் இணக்கச் சிக்கல்கள் ஏற்படக்கூடும். எந்த விருப்பத்தைத் தேர்ந்தெடுப்பது என்பதில் எனக்குத் தயக்கம் இருந்தது.
ஆனால், இது ஒரு சமரசம் என்பதை நான் பின்னர் உணர்ந்தேன். மிக வேகமானதையும், மிக நிலையானதையும் ஒரே நேரத்தில் பெற முடியாது; நீங்கள் எப்போதும் இரண்டில் ஒன்றை தியாகம் செய்ய வேண்டியிருக்கும். எனது அனுபவத்தில், முதலில் 'defer'-ஐப் பயன்படுத்துவதுதான் வழக்கம். தற்போதுள்ளவற்றில் இதுவே மிகவும் பாதுகாப்பான, தடைசெய்யாத (non-blocking) தீர்வாகும். பின்னர், சிக்கல்கள் ஏற்பட்டால் '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