𝗖𝗗𝗡 மற்றும் Caching மூலம் Core Web Vitals-ஐ மேம்படுத்தவும்

Google உங்கள் இணையதளத்தின் வேகம் மற்றும் நிலைத்தன்மையை அளவிட Core Web Vitals-ஐப் பயன்படுத்துகிறது. சிறந்த மதிப்பெண்கள் சிறந்த SEO மற்றும் அதிக மாற்றங்களுக்கு (conversions) வழிவகுக்கும்.

நீங்கள் மூன்று முக்கிய அளவீடுகளைக் கண்காணிக்க வேண்டும்:

  • Largest Contentful Paint (LCP): 2.5 வினாடிகளுக்கும் குறைவாக இருக்க இலக்கு வைக்கவும்.
  • Interaction to Next Paint (INP): 200ms-க்கும் குறைவாக இருக்க இலக்கு வைக்கவும்.
  • Cumulative Layout Shift (CLS): 0.1-க்கும் குறைவாக இருக்க இலக்கு வைக்கவும்.

ஒரு Content Delivery Network (CDN), தாமதத்தைக் (latency) குறைப்பதன் மூலம் இந்த மதிப்பெண்களை மேம்படுத்துகிறது. இது உங்கள் பயனர்களுக்கு அருகிலுள்ள சேவையகங்களிலிருந்து (servers) உள்ளடக்கத்தை வழங்குகிறது.

ஒரு CDN மற்றும் caching headers எவ்வாறு இணைந்து செயல்படுகின்றன:

  • அவை பயனர் மற்றும் சேவையகத்திற்கு இடையிலான தூரத்தைக் குறைக்கின்றன.
  • அவை API பதில்களை (responses) edge-இல் சேமித்து வைக்கின்றன (cache).
  • உங்கள் origin server செயலிழந்தால், அவை பழைய உள்ளடக்கத்தை வழங்குகின்றன.
  • அவை படங்களை தானாகவே மறுஅளவிற்கும் (resize) சுருக்கத்திற்கும் (compress) உட்படுத்துகின்றன.

இந்த header உத்திகளைப் பயன்படுத்தவும்:

  • Static assets: கோப்பு ஹாஷ்களுடன் (file hashes) நீண்ட cache நேரத்தைப் பயன்படுத்தவும்.
  • HTML பக்கங்கள்: குறுகிய cache நேரத்தைப் பயன்படுத்தவும்.
  • API responses: சேவையகச் சுமையைக் குறைக்க உள்ளடக்கத்தைச் சேமித்து வைக்கவும் (cache).

நீங்கள் ஒரு Headless CMS-ஐப் பயன்படுத்தினால், Static Site Generation (SSG)-ஐ edge caching உடன் இணைக்கவும். இது JavaScript தாமதங்களை நீக்கி உங்கள் இணையதளத்தை வேகப்படுத்துகிறது.

LCP-க்கு படங்களை மேம்படுத்துவது (Image optimization) மிக முக்கியமானது. பெரும்பாலான பெரிய LCP கூறுகள் hero images ஆகும். WebP அல்லது AVIF வடிவங்களில் படங்களை வழங்க ஒரு CDN-ஐப் பயன்படுத்தவும். இது மொபைல் பக்கத்தின் அளவை (page weight) 60% முதல் 70% வரை குறைக்கலாம்.

புத்திசாலித்தனமான cache invalidation மூலம் புதுப்பிப்புகளை நிர்வகிக்கவும். நீங்கள் உள்ளடக்கத்தைப் புதுப்பிக்கும்போது குறிப்பிட்ட cache-களை நீக்க webhooks-ஐப் பயன்படுத்தவும். இது பயனர்கள் பழைய தரவைப் பார்ப்பதைத் தடுக்கிறது.

சிறந்த செயல்திறனுக்கான உங்கள் சரிபார்ப்புப் பட்டியல் (checklist):

  • Edge computing வசதியுடன் கூடிய நவீன CDN-ஐப் பயன்படுத்தவும்.
  • ஒவ்வொரு வள வகைக்கும் (resource type) குறிப்பிட்ட cache-control headers-களை அமைக்கவும்.
  • Edge-இல் படங்களை மேம்படுத்தவும்.
  • உங்கள் origin server-ஐப் பாதுகாக்க API responses-களை cache செய்யவும்.
  • உள்ளடக்கம் மாறும்போது cache-ஐ நீக்க (purge) webhooks-ஐப் பயன்படுத்தவும்.
  • உண்மையான பயனர் அளவீடுகளைத் (real user metrics) தொடர்ந்து கண்காணிக்கவும்.

நீங்கள் தரவை வழங்கும் முறையில் செய்யும் சிறிய மாற்றங்கள், தரவரிசையில் (rankings) பெரிய முன்னேற்றத்தைத் தரும்.

Source: https://dev.to/sohanaakbar7/optimizing-core-web-vitals-using-cdn-caching-headers-2lfd

Optional learning community: https://t.me/GyaanSetuAi