𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗲 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀 𝗪𝗶𝘁𝗵 𝗖𝗗𝗡 𝗮𝗻𝗱 𝗖𝗮𝗰𝗵𝗶𝗻𝗴

Google ನಿಮ್ಮ ಸೈಟ್‌ನ ವೇಗ ಮತ್ತು ಸ್ಥಿರತೆಯನ್ನು ಅಳೆಯಲು Core Web Vitals ಅನ್ನು ಬಳಸುತ್ತದೆ. ಉತ್ತಮ ಸ್ಕೋರ್‌ಗಳು ಉತ್ತಮ SEO ಮತ್ತು ಹೆಚ್ಚಿನ ಪರಿವರ್ತನೆಗಳಿಗೆ (conversions) ಕಾರಣವಾಗುತ್ತವೆ.

ನೀವು ಮೂರು ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು (metrics) ಟ್ರ್ಯಾಕ್ ಮಾಡಲೇಬೇಕು:

  • Largest Contentful Paint (LCP): 2.5 ಸೆಕೆಂಡ್‌ಗಳಿಗಿಂತ ಕಡಿಮೆ ಇರಲು ಪ್ರಯತ್ನಿಸಿ.
  • Interaction to Next Paint (INP): 200ms ಗಿಂತ ಕಡಿಮೆ ಇರಲು ಪ್ರಯತ್ನಿಸಿ.
  • Cumulative Layout Shift (CLS): 0.1 ಕ್ಕಿಂತ ಕಡಿಮೆ ಇರಲು ಪ್ರಯತ್ನಿಸಿ.

Content Delivery Network (CDN) ಲೇಟೆನ್ಸಿಯನ್ನು (latency) ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಈ ಸ್ಕೋರ್‌ಗಳನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರವಿರುವ ಸರ್ವರ್‌ಗಳಿಂದ ಕಂಟೆಂಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ.

CDN ಮತ್ತು caching headers ಹೇಗೆ ಒಟ್ಟಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ:

  • ಅವು ಬಳಕೆದಾರ ಮತ್ತು ಸರ್ವರ್ ನಡುವಿನ ದೂರವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತವೆ.
  • ಅವು edge ನಲ್ಲಿ API ರೆಸ್ಪಾನ್ಸ್‌ಗಳನ್ನು (responses) ಕ್ಯಾಶ್ ಮಾಡುತ್ತವೆ.
  • ನಿಮ್ಮ origin ಸರ್ವರ್ ಕೆಲಸ ಮಾಡದಿದ್ದಾಗ ಅವು ಹಳೆಯ ಕಂಟೆಂಟ್ ಅನ್ನು ನೀಡುತ್ತವೆ.
  • ಅವು ಚಿತ್ರಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರು-ಅಳತೆ (resize) ಮತ್ತು ಸಂಕುಚಿತಗೊಳಿಸುತ್ತವೆ (compress).

ಈ header ತಂತ್ರಗಳನ್ನು ಬಳಸಿ:

  • Static assets: ಫೈಲ್ ಹ್ಯಾಶ್‌ಗಳೊಂದಿಗೆ (file hashes) ದೀರ್ಘವಾದ ಕ್ಯಾಶ್ ಸಮಯವನ್ನು ಬಳಸಿ.
  • HTML ಪುಟಗಳು: ಕಡಿಮೆ ಕ್ಯಾಶ್ ಸಮಯವನ್ನು ಬಳಸಿ.
  • API responses: ಸರ್ವರ್ ಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಕಂಟೆಂಟ್ ಅನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.

ನೀವು Headless CMS ಬಳಸುತ್ತಿದ್ದರೆ, Static Site Generation (SSG) ಅನ್ನು edge caching ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ. ಇದು JavaScript ವಿಳಂಬವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಸೈಟ್‌ನ ವೇಗವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

LCP ಗಾಗಿ ಇಮೇಜ್ ಆಪ್ಟಿಮೈಸೇಶನ್ (Image optimization) ಬಹಳ ಮುಖ್ಯ. ಹೆಚ್ಚಿನ ದೊಡ್ಡ LCP ಎಲಿಮೆಂಟ್‌ಗಳು hero images ಆಗಿರುತ್ತವೆ. WebP ಅಥವಾ AVIF ಫಾರ್ಮ್ಯಾಟ್‌ಗಳಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ನೀಡಲು CDN ಬಳಸಿ. ಇದು ಮೊಬೈಲ್ ಪೇಜ್ ತೂಕವನ್ನು (page weight) 60% ರಿಂದ 70% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು.

ಸ್ಮಾರ್ಟ್ ಕ್ಯಾಶ್ ಇನ್ವ್ಯಾಲಿಡೇಶನ್ (cache invalidation) ಮೂಲಕ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಿ. ನೀವು ಕಂಟೆಂಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ ನಿರ್ದಿಷ್ಟ ಕ್ಯಾಶ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸಲು webhooks ಬಳಸಿ. ಇದು ಬಳಕೆದಾರರು ಹಳೆಯ ಡೇಟಾವನ್ನು ನೋಡದಂತೆ ತಡೆಯುತ್ತದೆ.

ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ನಿಮ್ಮ ಚೆಕ್‌ಲಿಸ್ಟ್:

  • edge computing ಹೊಂದಿರುವ ಆಧುನಿಕ CDN ಬಳಸಿ.
  • ಪ್ರತಿ ರಿಸೋರ್ಸ್ ಪ್ರಕಾರಕ್ಕೂ ನಿರ್ದಿಷ್ಟ cache-control headers ಅನ್ನು ಹೊಂದಿಸಿ.
  • edge ನಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ.
  • ನಿಮ್ಮ origin ಸರ್ವರ್ ಅನ್ನು ರಕ್ಷಿಸಲು API responses ಅನ್ನು ಕ್ಯಾಶ್ ಮಾಡಿ.
  • ಕಂಟೆಂಟ್ ಬದಲಾದಾಗ ಕ್ಯಾಶ್ ಅನ್ನು ಪರ್ಜ್ (purge) ಮಾಡಲು webhooks ಬಳಸಿ.
  • ನೈಜ ಬಳಕೆದಾರರ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು (real user metrics) ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.

ನೀವು ಡೇಟಾವನ್ನು ನೀಡುವ ರೀತಿಯಲ್ಲಿ ಮಾಡುವ ಸಣ್ಣ ಬದಲಾವಣೆಗಳು ರ‍್ಯಾಂಕಿಂಗ್‌ನಲ್ಲಿ ದೊಡ್ಡ ಲಾಭವನ್ನು ತರುತ್ತವೆ.

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

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