எப்படி செய்வது வழிகாட்டிகள்

உலாவி கேஷ் (Browser Caching) நேரத்தை எப்படி அமைப்பது?

  • 14 படிக்க நிமிடங்கள்
உலாவி கேஷ் (Browser Caching) நேரத்தை எப்படி அமைப்பது?

உலாவி கேஷ் நேரம் (browser caching duration) என்பது உங்கள் இணையதளத்தில் உள்ள நிலையான கோப்புகள், பார்வையாளரின் உலாவியில் எவ்வளவு நேரம் சேமித்து வைக்கப்பட வேண்டும் என்பதை நிர்ணயிக்கும் HTTP cache விதிகளால் கட்டுப்படுத்தப்படுகிறது. நடைமுறையில் CSS, JavaScript, படங்கள், font கோப்புகள், icon கோப்புகள் போன்ற static assets-களுக்கு கேச்-கட்டுப்பாடு header-கள், சில hosting சூழல்களில் Expires header-களும் அமைக்கப்படுகின்றன. உதாரணமாக version செய்யப்பட்ட CSS மற்றும் JS கோப்புகளுக்கு 1 வருடம், படங்களுக்கு 30 நாட்கள் முதல் 1 வருடம் வரை, HTML பக்கங்களுக்கு குறுகிய நேரம் அல்லது revalidation போன்ற அணுகுமுறை பொதுவாகப் பயன்படுத்தப்படுகிறது. சரியான browser caching அமைப்பு, அதே கோப்புகள் மீண்டும் மீண்டும் பதிவிறக்கம் ஆகாமல் தடுக்கிறது, பக்க திறப்பை வேகப்படுத்துகிறது, Core Web Vitals மதிப்பெண்களை மேம்படுத்துகிறது.

இந்த வழிகாட்டியில் உலாவி கேஷ் எப்படி வேலை செய்கிறது, எந்த வகை கோப்புக்கு எவ்வளவு cache நேரம் கொடுக்கலாம், Apache, Nginx, LiteSpeed, WordPress மற்றும் CDN சூழல்களில் அதை எப்படி அமைப்பது என்பதை படிப்படியாக பார்க்கலாம். நோக்கம் வெறும் speed test கருவியில் பச்சை நிற score பெறுவது மட்டும் அல்ல; பயனருக்கு புதுப்பிக்கப்பட்ட கோப்புகளைக் கொடுத்தபடியே server resource-களை சிக்கனமாக பயன்படுத்துவது, TTFB மற்றும் bandwidth பயன்பாட்டைக் குறைப்பது, மீண்டும் வரும் பயனர்களுக்கு உணரக்கூடிய வேக உயர்வை வழங்குவது. குறிப்பாக shared hosting, WordPress hosting, நிறுவன இணையதளங்கள், e-commerce தளங்கள் போன்றவற்றில் சரியான cache strategy என்பது குறைந்த செலவில் கிடைக்கும் மிகச் சிறந்த performance மேம்பாடுகளில் ஒன்றாகும். Hostragons வலை ஹோஸ்டிங் தொகுப்புகள்

உலாவி கேஷ் என்றால் என்ன?

உலாவி கேஷ் என்பது ஒரு web page திறக்கும் போது பதிவிறக்கம் செய்யப்படும் static resource-களை பயனரின் சாதனத்தில் தற்காலிகமாக சேமித்து வைப்பதாகும். ஒருவர் உங்கள் homepage-ஐ திறந்தால் logo, CSS file, JavaScript file-கள், font-கள், படங்கள் போன்றவை download ஆகும். இந்த கோப்புகளுக்கான cache header-கள் சரியாக இருந்தால், அந்த பயனர் இரண்டாவது பக்கத்திற்கு செல்லும் போதும் அல்லது சில நேரம் கழித்து மீண்டும் உங்கள் தளத்துக்கு வரும்போதும், browser அந்த கோப்புகளில் பலவற்றை server-இடமிருந்து மீண்டும் கேட்காமல் local cache-இலிருந்து பயன்படுத்தும். இதனால் page load வேகம் அதிகரிக்கும்.

உதாரணமாக உங்கள் homepage மொத்தமாக 2 MB அளவில் உள்ளது என்று நினைப்போம். அதில் 1.4 MB படங்கள், 300 KB CSS மற்றும் JS கோப்புகள், 100 KB font கோப்புகள் என்றால், முதல் வருகையில் இந்த resource-கள் அனைத்தும் download ஆகலாம். ஆனால் இரண்டாவது வருகையில் browser இந்த static resource-களை local cache-இலிருந்து எடுத்துக்கொண்டால் network வழியாக பரிமாறப்படும் data பெரிதும் குறையும். இந்த வித்தியாசம் mobile internet, மெதுவான இணைப்புகள், அதிக traffic கொண்ட தளங்கள் போன்ற சூழல்களில் இன்னும் தெளிவாக தெரியும்.

உலாவி கேஷ் மற்றும் server-side cache இரண்டையும் குழப்பக்கூடாது. Server cache என்பது PHP output, database query result அல்லது உருவாக்கப்பட்ட HTML output போன்றவற்றை server-ல் சேமிக்கிறது. Browser cache என்பது பயனரின் device-ல் ஏற்கனவே download செய்யப்பட்ட resource-களை மீண்டும் பயன்படுத்த உதவுகிறது. சிறந்த performance பெற இந்த இரு அடுக்குகளும் ஒன்றாக திட்டமிடப்பட வேண்டும். WordPress பயன்படுத்தும் தளங்களில் page cache, object cache, CDN cache மற்றும் browser cache ஆகியவை பொதுவாக ஒரே optimization strategy-யின் பகுதிகளாக இருக்கும். WordPress ஹோஸ்டிங் மற்றும் செயல்திறன் நேர்மை

Browser Caching SEO-க்கு ஏன் முக்கியம்?

Google, வேகமாகவும் நிலையாகவும் செயல்படும் இணையதளங்களை பயனர் அனுபவத்தின் அடிப்படையில் அதிக மதிப்புடன் பார்க்கிறது. Browser caching மட்டும் நேரடியாக ranking guarantee தராது; ஆனால் page speed, interaction delay, resource loading efficiency ஆகியவற்றில் தாக்கம் ஏற்படுத்துவதால் SEO performance-ஐ ஆதரிக்கிறது. குறிப்பாக மீண்டும் வருகை, category browsing, product page மாற்றம், blog-இன் உள்ளகப் பக்கங்கள் இடையே நகர்வு போன்ற சூழல்களில் இது பெரிய வித்தியாசத்தை உருவாக்கும்.

2026 SEO தரநிலைகளில் technical performance என்பது Lighthouse score மட்டும் அல்ல. Google மதிப்பிடும் user experience என்பது LCP, INP, CLS, TTFB மற்றும் real user data போன்றவற்றுடன் தொடர்புடையது. CSS மற்றும் JS கோப்புகள் தேவையின்றி மீண்டும் download ஆகினால் LCP நேரம் நீளலாம். Font-கள் ஒவ்வொரு பக்கத்திலும் மீண்டும் கேட்கப்பட்டால் visual stability பாதிக்கப்படலாம். பெரிய படங்கள் cache செய்யப்படவில்லை என்றால் mobile பயனருக்கு தளம் மெதுவாக இருப்பது போல உணரப்படும்.

  • மீண்டும் வரும் பயனர்களுக்கு அதிக வேகம்: பயனர் அதே கோப்புகளை மீண்டும் download செய்ய வேண்டியதில்லை.
  • குறைந்த bandwidth பயன்பாடு: Server traffic குறையும்; hosting resource-கள் சிறப்பாக பயன்படுத்தப்படும்.
  • சிறந்த crawl efficiency: Bot-களுக்கும் பயனர்களுக்கும் static resource delivery ஒழுங்காக இருக்கும்.
  • Bounce rate குறையும் வாய்ப்பு: விரைவாக திறக்கும் பக்கங்கள் பயனர் engagement-ஐ அதிகரிக்கும்.
  • நிலையான performance: CDN மற்றும் hosting load fluctuations சிறப்பாக சமநிலைப்படுத்தப்படும்.

அடிப்படை HTTP Cache Header-கள்

உலாவி கேஷ் நேரங்கள் HTTP response header-கள் மூலம் நிர்வகிக்கப்படுகின்றன. அதிகம் பயன்படுத்தப்படும் header-கள் Cache-Control, Expires, ETag மற்றும் Last-Modified ஆகும். நவீன web project-களில் முக்கிய கட்டுப்பாட்டு இடம் Cache-Control header ஆகும்; Expires பெரும்பாலும் backward compatibility-க்காக பயன்படுத்தப்படுகிறது.

கேச்-கட்டுப்பாடு

Cache-Control என்பது browser-க்கும் இடைப்பட்ட cache system-களுக்கும் ஒரு file எப்படி சேமிக்கப்பட வேண்டும் என்பதை அறிவிக்கும் header ஆகும். அடிக்கடி பயன்படுத்தப்படும் directive-கள் இவை:

  • max-age: Resource எத்தனை விநாடிகள் “fresh” என்று கருதப்பட வேண்டும் என்பதை சொல்கிறது. உதாரணமாக max-age=31536000 என்பது சுமார் 1 வருடம்.
  • public: Resource browser cache மற்றும் CDN போன்ற shared cache system-களில் சேமிக்கலாம் என்பதை குறிக்கும்.
  • private: Resource பயனரின் browser-ல் மட்டும் சேமிக்கப்பட வேண்டும் என்பதை குறிக்கும்.
  • no-cache: Resource பயன்படுத்துவதற்கு முன் server-இடம் validate செய்ய வேண்டும் என்பதை குறிக்கும்; இது முழுமையாக cache off செய்வதல்ல.
  • no-store: Resource எங்கும் சேமிக்கப்படக்கூடாது என்பதை குறிக்கும்; payment, dashboard, personal data page-களுக்கு ஏற்றது.
  • immutable: Resource அதன் cache காலம் முடியும் வரை மாறாது என்பதை browser-க்கு தெரிவிக்கும்; version செய்யப்பட்ட file name கொண்ட assets-களுக்கு சிறந்தது.

ஒரு static file-க்கு உதாரண header இவ்வாறு இருக்கலாம்: Cache-Control: public, max-age=31536000, immutable. இதன் பொருள், browser அந்த file-ஐ 1 வருடம் வரை சேமித்து வைத்துக்கொள்ளலாம்; file name மாறாத வரை அதை மீண்டும் சரிபார்க்கத் தேவையில்லை என்பதாகும்.

Expires

Expires header என்பது resource எந்த தேதி மற்றும் நேரம் வரை valid என்று குறிப்பிடுகிறது. உதாரணமாக ஒரு image file-க்கு 30 நாட்களுக்கு பிறகு முடிவடையும் Expires value கொடுக்கலாம். ஆனால் Expires absolute date பயன்படுத்துவதால் Cache-Control அளவுக்கு flexible அல்ல. நவீன configuration-களில் Cache-Control முன்னுரிமை பெறும்; பழைய browser support-க்காக Expires கூட சேர்க்கலாம்.

ETag மற்றும் Last-Modified

ETag மற்றும் Last-Modified ஆகியவை validation mechanism-கள். Browser-இல் உள்ள file version இன்னும் புதிதாக உள்ளதா என்று browser server-ஐ கேட்கும். File மாறவில்லை என்றால் server 304 Not Modified response அனுப்பும்; file body மீண்டும் download ஆகாது. HTML போன்ற அடிக்கடி மாறக்கூடிய content-களில் அல்லது நீண்ட cache நேரம் கொடுக்க விரும்பாத file-களில் இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும்.

எந்த கோப்பு வகைக்கு எவ்வளவு கேஷ் நேரம் கொடுக்கலாம்?

அனைத்து file type-களுக்கும் ஒரே cache duration கொடுப்பது மிகவும் பொதுவான தவறு. HTML, CSS, JS, image, font, API response ஆகியவற்றின் update pattern வெவ்வேறு. அடிப்படை விதி எளிமையானது: file name-ஐ மாற்ற முடிந்தால் நீண்ட cache கொடுக்கலாம்; file name மாறாமல் content அடிக்கடி மாறினால் குறுகிய நேரம் அல்லது validation பயன்படுத்த வேண்டும்.

எந்த கோப்பு வகைக்கு எவ்வளவு கேஷ் நேரம் கொடுக்கலாம்?
Resource வகைபரிந்துரைக்கப்படும் நேரம்பரிந்துரைக்கப்படும் Headerகுறிப்பு
HTML பக்கங்கள்0-10 நிமிடம் அல்லது validationno-cache, max-age=0Content அடிக்கடி மாறினால் freshness முக்கியம்.
CSS மற்றும் JS30 நாட்கள்-1 வருடம்public, max-age=31536000, immutableFile name version செய்யப்பட வேண்டும்: style.v3.css போன்றது.
படங்கள்30 நாட்கள்-1 வருடம்public, max-age=2592000 அல்லது 31536000Logo மற்றும் icon-களுக்கு நீண்ட நேரம்; campaign images-க்கு குறுகிய நேரம் வைத்துக்கொள்ளலாம்.
Font கோப்புகள்6 மாதம்-1 வருடம்public, max-age=31536000, immutableWOFF2 கோப்புகள் பொதுவாக அரிதாகவே மாறும்.
PDF மற்றும் media7 நாட்கள்-6 மாதம்public, max-age=604800 அல்லது 15552000அடிக்கடி update ஆகும் catalogue-களில் நேரத்தை கவனமாக தேர்வு செய்ய வேண்டும்.
Admin மற்றும் payment பக்கங்கள்Cache இல்லைno-store, privateSecurity மற்றும் personal data முக்கியம்.

இந்த அட்டவணை ஒரு பொதுவான தொடக்கப் புள்ளி. E-commerce தளத்தில் stock மற்றும் price தகவலை கொண்ட HTML பக்கங்களை aggressive cache செய்யக்கூடாது. அதே நேரத்தில் product image-கள் file name மாற்றப்பட்டு version செய்யப்படுகிற வரை 1 வருடம் cache செய்யலாம். ஒரு corporate website-ல் logo, font, theme file-களை நீண்ட நேரம் சேமிக்கலாம்; ஆனால் campaign banner-கள் அடிக்கடி மாறினால் 7-30 நாட்கள் போன்ற கால அளவு பாதுகாப்பானதாக இருக்கும்.

உலாவி கேஷ் நேரங்களை எப்படி திட்டமிடுவது?

வெற்றிகரமான cache strategy-க்கு முதலில் உங்கள் தளத்தில் உள்ள file-களை வகைப்படுத்த வேண்டும். Technical-ஆக செய்ய வேண்டியது file extension அடிப்படையில் rule எழுதுவது; strategic-ஆக செய்ய வேண்டியது update frequency அடிப்படையில் cache duration நிர்ணயிப்பது.

1. Static மற்றும் dynamic resource-களை பிரிக்கவும்

CSS, JS, JPG, PNG, WebP, SVG, WOFF2 போன்ற கோப்புகள் static resource-கள். HTML, cart, user panel, search results, API response ஆகியவை dynamic resource-களாக கருதப்படுகின்றன. Static resource-களுக்கு நீண்ட cache கொடுக்கலாம்; dynamic content-களை அதிக கவனத்துடன் நிர்வகிக்க வேண்டும். குறிப்பாக user-specific content-களில் public cache பயன்படுத்தக்கூடாது.

2. File versioning பயன்படுத்தவும்

நீண்ட cache duration-ஐ பாதுகாப்பாக பயன்படுத்தும் வழி file versioning ஆகும். உதாரணமாக style.css file-ஐ 1 வருடம் cache செய்துவிட்டு அதன் content-ஐ மாற்றினால், சில பயனர்கள் பழைய design-ஐ தொடர்ந்து பார்க்கலாம். அதற்கு பதிலாக style.2026.01.css, app.v12.js அல்லது file hash கொண்ட app.8f3a2.js போன்ற பெயரிடலை பயன்படுத்தினால், update செய்யப்பட்ட உடனே புதிய file name publish ஆகும்; browser புதிய resource-ஐ download செய்யும்.

WordPress theme-கள் மற்றும் modern build tool-கள் இந்த பணியை தானாகச் செய்ய முடியும். Theme develop செய்கிறீர்களானால் wp_enqueue_style மற்றும் wp_enqueue_script function-களில் version parameter பயன்படுத்துவது query string அல்லது file name மூலமாக version management-ஐ எளிதாக்கும். ஆனால் சில CDN configuration-களில் query string cache behavior மாறுபடலாம்; எனவே file name-இல் hash சேர்ப்பது இன்னும் நம்பகமான நடைமுறையாகும்.

3. HTML-க்கு மிக aggressive ஆக வேண்டாம்

HTML பக்கங்கள் பயனருக்கு காட்டப்படும் முக்கிய content-ஐ கொண்டிருப்பதால் பொதுவாக short cache அல்லது revalidation மூலம் நிர்வகிக்கப்படுகின்றன. Blog article-களுக்கு 5-10 நிமிட cache போதுமானதாக இருக்கலாம்; news, campaign, price page-களில் இன்னும் குறுகிய நேரம் தேவைப்படலாம். WordPress-ல் page cache பயன்படுத்தினால் browser cache header-ஐ server cache மற்றும் CDN purge mechanism-களுடன் சேர்த்து யோசிக்க வேண்டும்.

4. பாதுகாப்பு தேவைப்படும் பக்கங்களில் cache நிறுத்தவும்

Login page, customer panel, payment step, order summary, invoice, personal data கொண்ட பக்கங்கள் போன்ற இடங்களில் Cache-Control: no-store, private போன்ற header-கள் பயன்படுத்தப்பட வேண்டும். Browser caching என்பது performance-க்காக; ஆனால் personal data security-ஐ ஆபத்தில் ஆழ்த்தக் கூடாது. SSL பயன்படுத்துவது இங்கு அடிப்படை தேவையாகும். Hostragons SSL சான்றிதழ்கள்

Apache .htaccess மூலம் உலாவி கேஷ் அமைப்புகள்

Apache server-களில் browser caching பொதுவாக .htaccess file மூலம் அமைக்கப்படுகிறது. Shared hosting பயன்படுத்தும் பல website owner-களுக்கு இது மிக நடைமுறை வழியாகும். முதலில் mod_expires மற்றும் mod_headers module-கள் active நிலையில் இருக்க வேண்டும். தரமான hosting சூழல்களில் இவை பெரும்பாலும் முன்கூட்டியே கிடைக்கும்.

பின்வரும் logic-ஐ பயன்படுத்தலாம்: images மற்றும் font-களுக்கு நீண்ட நேரம், CSS மற்றும் JS-க்கு நீண்ட நேரம், HTML-க்கு குறுகிய validation. .htaccess file-இல் சேர்க்கும் rules-களில் file type அடிப்படையில் ExpiresByType மற்றும் Header set Cache-Control definition-கள் அமைக்கப்படுகின்றன. உதாரணமாக image/webp, image/jpeg, image/png, image/svg+xml file-களுக்கு 1 வருடம்; text/css மற்றும் application/javascript-க்கு 1 வருடம்; text/html-க்கு no-cache பயன்படுத்தலாம்.

செயல்படுத்துவதற்கு முன் .htaccess file-ஐ backup எடுக்கவும். தவறாக எழுதப்பட்ட ஒரு rule கூட 500 Internal Server Error ஏற்படுத்தலாம். மாற்றத்திற்கு பிறகு website-ஐ incognito window-ல் திறந்து, DevTools Network tab-இல் தொடர்புடைய file-ன் response headers பகுதியைச் சரிபார்க்கவும். Cache-Control தெரியவில்லை என்றால் server module inactive ஆக இருக்கலாம், CDN header-ஐ மாற்றியிருக்கலாம் அல்லது வேறு plugin header-களை override செய்திருக்கலாம்.

Apache சூழலில் sample duration-கள்: CSS மற்றும் JS-க்கு max-age=31536000, images-க்கு max-age=31536000, PDF-க்கு max-age=2592000, HTML-க்கு max-age=0 மற்றும் no-cache. இவை தொடக்கத்திற்கு நல்ல மதிப்புகள்; உங்கள் தளத்தின் publication workflow-க்கு ஏற்ப மாற்ற வேண்டும். Hostragons hosting infrastructure-ல் .htaccess வழியாக performance settings பயன்படுத்தும்போது, உங்கள் theme மற்றும் plugin cache settings-களுடன் conflict இருக்கிறதா என்று சரிபார்ப்பது நல்லது. Apache .htaccess செயல்திறன் அமைப்புகள்

Nginx மூலம் Browser Caching அமைப்புகள்

Nginx பயன்படுத்தும் server-களில் cache header-கள் server அல்லது location block-களுக்குள் வரையறுக்கப்படுகின்றன. Nginx, static file delivery-யில் அதிக performance தருவதால் high traffic project-களில் அதிகம் தேர்வு செய்யப்படுகிறது. இங்கு அடிப்படை logic, extension-based location rule மூலம் expires மற்றும் add_header Cache-Control மதிப்புகளை அமைப்பதாகும்.

உதாரண அணுகுமுறை இதுதான்: CSS, JS, WebP, JPG, PNG, SVG, WOFF2 போன்ற static resource-களுக்கு expires 1y மற்றும் Cache-Control public, immutable கொடுக்கலாம். HTML output-களுக்கு expires off அல்லது no-cache தேர்வு செய்யலாம். CDN பயன்படுத்தினால் origin server-இலிருந்து வரும் Cache-Control header-களை CDN எப்படி படிக்கிறது, மதிக்கிறது, மாற்றுகிறது என்பதையும் test செய்ய வேண்டும்.

Nginx settings-ல் கவனிக்க வேண்டிய ஒரு விஷயம், add_header directive சில சூழல்களில் குறிப்பிட்ட response code-களுக்கு மட்டுமே பயன்படுத்தப்படலாம். நவீன Nginx configuration-களில் always parameter பயன்படுத்தலாம். மேலும் ஒரே header-ஐ application, Nginx, CDN மூன்றும் சேர்த்தால் conflicting அல்லது duplicate Cache-Control value-கள் உருவாகலாம். அப்படியானால் priority chain தெளிவாக நிர்ணயிக்கப்பட வேண்டும்; ஒரே layer-ஐ authoritative source ஆக தேர்வு செய்வது நல்லது.

LiteSpeed மற்றும் WordPress தளங்களில் கேஷ் அமைப்பு

LiteSpeed server-கள், குறிப்பாக WordPress project-களில் LiteSpeed Cache plugin உடன் வலுவான performance advantage தருகின்றன. ஆனால் browser caching மற்றும் page cache இரண்டும் வேறு என்பதை நினைவில் கொள்ள வேண்டும். LiteSpeed Cache plugin-இல் Browser Cache option active செய்தால் static file-களுக்கு cache header-கள் தானாக பயன்படுத்தப்படலாம். இருந்தாலும் duration-களை தனியாக சரிபார்ப்பது அவசியம்.

WordPress-ல் பரிந்துரைக்கப்படும் நடைமுறை, static assets-களை நீண்ட நேரம் cache செய்வதும் file versioning active நிலையில் வைத்திருப்பதும் ஆகும். Theme update, CSS மாற்றம் அல்லது JS மாற்றம் செய்தால் plugin cache clear செய்ய வேண்டும்; CDN பயன்படுத்தினால் CDN purge செய்ய வேண்டும். இல்லையெனில் சில பயனர்கள் பழைய design அல்லது broken JavaScript behavior-ஐ சந்திக்கலாம்.

பிரபலமான cache plugin-களில் Browser Cache, Minify, Combine, Critical CSS, CDN integration, Object Cache போன்ற option-கள் இருக்கும். அவற்றை எல்லாம் ஒரே நேரத்தில் aggressive-ஆக enable செய்வது எப்போதும் சரியானது அல்ல. முதலில் browser cache header-களை ஒழுங்குபடுத்தவும்; அதன் பிறகு minify மற்றும் combine settings-களை test செய்யவும். 2026-ல் HTTP/2 மற்றும் HTTP/3 பரவலாகப் பயன்படுத்தப்படுவதால் ஒவ்வொரு file-யையும் combine செய்வது பழைய காலத்தைப் போல critical இல்லை; சில நேரங்களில் அது cache efficiency-ஐ கூட குறைக்கலாம்.

உங்கள் WordPress தளம் மெதுவாக இருந்தால் பிரச்சனை browser cache மட்டும் அல்லாமல் இருக்கலாம். Database bloat, heavy theme, அதிக plugin-கள், optimize செய்யப்படாத images, குறைந்த resource கொண்ட hosting ஆகியவையும் performance-ஐ பாதிக்கும். எனவே caching settings-ஐ தரமான hosting, updated PHP version, சரியான SSL configuration ஆகியவற்றுடன் சேர்த்து மதிப்பிட வேண்டும். Hostragons WordPress ஹோஸ்டிங்

CDN பயன்படுத்தும்போது cache நேரங்களை எப்படி அமைப்பது?

CDN உங்கள் static file-களை பயனருக்கு புவியியல் ரீதியாக அருகிலுள்ள edge server-களிலிருந்து வழங்குகிறது. Browser cache அந்த file-ஐ பயனரின் browser-ல் சேமிக்கிறது. இந்த இரண்டு அடுக்குகளும் சேர்ந்து வேலை செய்தால் performance உயர்வு இன்னும் தெளிவாக இருக்கும். ஆனால் CDN panel-ல் அமைக்கும் edge cache duration மற்றும் origin server-இல் உள்ள Cache-Control header-கள் ஒன்றுக்கொன்று பொருந்த வேண்டும்.

பொதுவான அணுகுமுறை இவ்வாறு இருக்கலாம்: Origin server-இல் static file-களுக்கு 1 வருட Cache-Control கொடுக்கவும்; CDN-லும் அதே அல்லது கட்டுப்பாட்டுடன் கூடிய TTL அமைக்கவும். File மாற்றும்போது file name-ஐ version செய்யவும் அல்லது CDN purge செய்யவும். HTML page-களில் CDN cache பயன்படுத்தினால் custom rules உருவாக்க வேண்டும்; cart, account, payment, admin panel போன்ற பகுதிகளை கண்டிப்பாக cache-க்கு வெளியே வைத்திருக்க வேண்டும்.

CDN பயன்படுத்தும் தளங்களில் அதிகம் காணப்படும் பிரச்சனை, update செய்த பிறகும் பழைய file-கள் தெரியும் என்பதாகும். இதற்குக் காரணம் பெரும்பாலும் file name மாறாமல் content மாற்றப்படுவது அல்லது CDN purge செய்யப்படாதது. மிகவும் உறுதியான முறை build process-ல் hash கொண்ட file உருவாக்கி, HTML-இல் புதிய file name-ஐ reference செய்வதாகும். இதனால் browser மற்றும் CDN இரண்டும் பழைய file-ஐ வைத்திருந்தாலும், புதிய page புதிய file-ஐயே கேட்கும்.

படிப்படையான செயல்படுத்தல் checklist

கீழே உள்ள checklist, browser caching duration-களுக்கான ஒரு நடைமுறை implementation plan-ஐ வழங்குகிறது. சிறிய corporate website-ல் 30-60 நிமிடங்களில் செய்து முடிக்கலாம்; e-commerce அல்லது custom software project-களில் testing நேரத்தை அதிகமாக வைத்துக் கொள்ள வேண்டும்.

  • 1. File inventory தயாரிக்கவும்: CSS, JS, image, font, PDF, HTML மற்றும் API response-களை தனித்தனியாகப் பிரிக்கவும்.
  • 2. Update frequency நிர்ணயிக்கவும்: எந்த file-கள் தினமும் மாறுகின்றன, எவை மாதத்திற்கு ஒருமுறை மாறுகின்றன என்பதை note செய்யவும்.
  • 3. Versioning strategy தேர்வு செய்யவும்: File name hash, version parameter அல்லது build number பயன்படுத்தவும்.
  • 4. Server rules சேர்க்கவும்: Apache, Nginx, LiteSpeed அல்லது CDN panel-ல் Cache-Control header-களை define செய்யவும்.
  • 5. பாதுகாப்பான பக்கங்களை விலக்கவும்: Admin, payment, cart, user panel, personal data page-களில் no-store பயன்படுத்தவும்.
  • 6. Test செய்யவும்: Chrome DevTools, curl -I, WebPageTest, Lighthouse மற்றும் real device test மூலம் சரிபார்க்கவும்.
  • 7. Publish செய்த பிறகு கண்காணிக்கவும்: பழைய file தவறாக load ஆகிறதா, design உடைகிறதா, JS error இருக்கிறதா என்று பார்க்கவும்.

உலாவி கேஷ் வேலை செய்கிறதா எப்படி test செய்வது?

Settings சரியாக செயல்படுகிறதா என்பதை அறிய மிக வேகமான வழி browser developer tools பயன்படுத்துவது. Chrome-ல் page திறந்து, DevTools Network tab-க்கு செல்லவும், ஒரு CSS file அல்லது image file-ஐ click செய்து Response Headers பகுதியில் Cache-Control மதிப்பை பார்க்கவும். இரண்டாவது load-இல் Status column-ல் memory cache அல்லது disk cache போன்ற சொற்களை காணலாம்.

Command line பயன்படுத்தினால் curl -I alanadiniz.com/dosya.css command response header-களை காட்டும். இங்கு Cache-Control, Expires, ETag, Last-Modified மதிப்புகளைச் சரிபார்க்கலாம். நீங்கள் எதிர்பார்த்த header இல்லை என்றால் application, web server அல்லது CDN layer-களில் ஏதாவது ஒன்று setting-ஐ மாற்றியிருக்கலாம்.

Performance test-க்கு Lighthouse, PageSpeed Insights, WebPageTest போன்ற கருவிகள் உதவும். ஆனால் இந்த கருவிகளின் பரிந்துரைகளை கண்மூடித்தனமாகப் பயன்படுத்தாமல் real user scenario அடிப்படையில் மதிப்பிட வேண்டும். உதாரணமாக Lighthouse static file-களுக்கு நீண்ட cache duration பரிந்துரைக்கலாம்; ஆனால் HTML page-களுக்கும் அதே aggressiveness எதிர்பார்க்காது. மேலும் test tool-கள் சில நேரங்களில் third-party script-களுக்கும் warning தரும்; Google Fonts, ad networks, social media script-களின் cache duration உங்கள் கட்டுப்பாட்டில் இல்லாமல் இருக்கலாம்.

அடிக்கடி செய்யப்படும் தவறுகள்

Browser caching எளிமையாகத் தோன்றினாலும் தவறாக configure செய்தால் update problem, security risk, user experience issue போன்றவை உருவாகலாம். கீழே உள்ள தவறுகள் குறிப்பாக ஆரம்ப நிலை பயனர்களிடம் அதிகம் காணப்படுகின்றன.

  • அனைத்து resource-களுக்கும் 1 வருட cache கொடுப்பது: HTML, API response, user-specific content போன்றவை இதில் சேரக்கூடாது.
  • File versioning இல்லாமல் நீண்ட cache பயன்படுத்துவது: பயனர்கள் பழைய CSS அல்லது JS file-களை தொடர்ந்து பார்க்கலாம்.
  • CDN purge process-ஐ மறந்துவிடுவது: Origin update ஆனாலும் CDN பழைய file-ஐ வழங்கலாம்.
  • Cache plugin-களை ஒன்றின் மேல் ஒன்று பயன்படுத்துவது: பல plugin-கள் ஒரே header-களை எழுதினால் conflict ஏற்படலாம்.
  • Third-party warning-களை தவறாக புரிந்து கொள்வது: வெளிப்புற script-களின் cache header-கள் உங்கள் கட்டுப்பாட்டில் இருக்காது.
  • பாதுகாப்பான பக்கங்களை cache செய்வது: Payment மற்றும் account page-களில் no-store பயன்படுத்தப்பட வேண்டும்.

பரிந்துரைக்கப்படும் தொடக்க மதிப்புகள்

புதிய website-க்கு பாதுகாப்பான தொடக்க மதிப்புகளை இவ்வாறு சுருக்கலாம்: CSS மற்றும் JS file-கள் version செய்யப்பட்டிருந்தால் 1 வருடம்; images 1 வருடம், அடிக்கடி மாறும் campaign images 30 நாட்கள்; font-கள் 1 வருடம்; PDF file-கள் update frequency-க்கு ஏற்ப 7-180 நாட்கள்; HTML page-கள் no-cache அல்லது சில நிமிடங்களுக்கான short cache. இந்த அணுகுமுறை performance மற்றும் freshness என்ற இரண்டுக்கும் சமநிலை தரும்.

உங்கள் தளம் corporate presentation website என்றால் நீண்ட cache duration-கள் பொதுவாக பிரச்சனையில்லாமல் செயல்படும். நீங்கள் e-commerce தளம் நடத்தினால் product page-இல் உள்ள static file-களுக்கு நீண்ட cache கொடுக்கலாம்; ஆனால் price, stock, cart, user data ஆகியவற்றை cache-க்கு வெளியே வைத்திருக்க வேண்டும். News அல்லது blog website என்றால் image மற்றும் theme file-களை நீண்ட நேரம் cache செய்து, HTML output-ஐ உங்கள் publishing frequency-க்கு ஏற்ப குறுகிய நேரம் cache செய்யலாம். Domain name, SSL, hosting infrastructure ஆகியவையும் performance chain-இன் முக்கிய பகுதிகளாகும். Hostragons தளம் சரிபார்ப்பு Hostragons நிறுவன ஹோஸ்டிங் தீர்வுகள்

முடிவு

உலாவி கேஷ் நேரங்கள் சரியாக திட்டமிடப்பட்டால், உங்கள் website-ன் repeat visit performance-ஐ பெரிதும் உயர்த்தும். அடிப்படை விதி இதுதான்: version செய்யப்பட்ட static file-களுக்கு நீண்ட cache; HTML மற்றும் personal data கொண்ட page-களுக்கு short cache அல்லது no-store. Apache, Nginx, LiteSpeed, WordPress, CDN எந்த சூழலாக இருந்தாலும் logic ஒன்றே: resource type-ஐ அறிக, update frequency-ஐ நிர்ணயிக்க, Cache-Control header-களை test செய்ய, publish செய்த பிறகும் தொடர்ந்து monitor செய்ய.

சுருக்கமாக சொன்னால், browser caching என்பது குறைந்த செலவில் அதிக தாக்கம் தரும் speed optimization. Hostragons infrastructure-ல் உங்கள் தளத்தை host செய்கிறீர்கள் என்றால், உங்கள் hosting type-க்கு பொருத்தமான cache settings தேர்வு செய்து user experience-ஐயும் technical SEO performance-ஐயும் மேம்படுத்தலாம். உங்களுக்கு ஏற்ற hosting solution-ஐ மதிப்பிட Hostragons hosting option-களை பார்க்கலாம் அல்லது உங்கள் தற்போதைய website-ன் cache configuration-ஐ படிப்படியாகச் சரிபார்க்கலாம். Hostragons ஹோஸ்டிங் தொகுப்புகள்

அடிக்கடி கேட்கப்படும் கேள்விகள்

உலாவி கேஷ் நேரம் எவ்வளவு இருக்க வேண்டும்?

CSS, JS, image, font போன்ற version செய்யப்பட்ட static file-களுக்கு 30 நாட்கள் முதல் 1 வருடம் வரை நல்ல தேர்வாகும். HTML page-களில் content freshness முக்கியமானதால் no-cache, max-age=0 அல்லது சில நிமிடங்களுக்கான short cache பயன்படுத்துவது சிறந்தது.

Cache-Control மற்றும் Expires இடையே என்ன வித்தியாசம்?

Cache-Control என்பது நவீனமும் அதிக flexible-ஆன HTTP header ஆகும்; max-age போன்ற seconds-based rule-களை பயன்படுத்துகிறது. Expires குறிப்பிட்ட date-time value கொடுக்கிறது. புதிய project-களில் Cache-Control-க்கு முன்னுரிமை கொடுக்க வேண்டும்; Expires backward compatibility-க்காக கூட சேர்க்கலாம்.

WordPress-ல் browser caching எப்படி enable செய்வது?

LiteSpeed Cache, WP Rocket, W3 Total Cache போன்ற plugin-களில் Browser Cache அல்லது browser cache option-ஐ active செய்யலாம். அதேபோல் .htaccess அல்லது server configuration மூலம் file type அடிப்படையில் Cache-Control header-களை சேர்க்கலாம்.

நீண்ட cache நேரம் கொடுத்தால் website update-கள் தெரியாதா?

File name மாறாமல் அதே CSS அல்லது JS file-ஐ update செய்தால் சில பயனர்கள் பழைய file-ஐ பார்க்கலாம். இதைத் தவிர்க்க file versioning, hash கொண்ட file name-கள், CDN purge process ஆகியவற்றை பயன்படுத்த வேண்டும்.

Payment மற்றும் user panel பக்கங்களை cache செய்யலாமா?

இல்லை. Payment, cart, account, invoice, admin panel போன்ற personal data கொண்ட page-களில் Cache-Control: no-store, private போன்ற பாதுகாப்பான header-கள் பயன்படுத்தப்பட வேண்டும். Performance-க்காக security-யை தியாகம் செய்யக்கூடாது.

இந்தக் கட்டுரையைப் பகிரவும்:
Sophia Mendes

கிளவுட் தீர்வுகள் நிபுணர்

கிளவுட் கட்டமைப்பு மற்றும் தரவுப் மேலாண்மையில் 8+ ஆண்டுகள் அனுபவம் கொண்டவர். குறிப்பாக கிளவுட் அடிப்படையிலான பயன்பாடுகளை வடிவமைப்பதில் ஆர்வம் கொண்டவர்.

அனைத்து பதிவுகள் →