ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯ 3-ಸೆಕೆಂಡ್‌ಗಳ ನಿಯಮ

ನಿಮ್ಮ ಬಳಿ ಕೇವಲ ಮೂರು ಸೆಕೆಂಡುಗಳಿವೆ.

ಅದರ ನಂತರ, ನಿಮ್ಮ ಬಳಕೆದಾರರು ಹೊರಟುಹೋಗುತ್ತಾರೆ.

ಗೂಗಲ್ ಸಂಶೋಧನೆಯ ಪ್ರಕಾರ, ಒಂದು ಸೈಟ್ ಲೋಡ್ ಆಗಲು 3 ಸೆಕೆಂಡ್‌ಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಂಡರೆ, 53% ಮೊಬೈಲ್ ಬಳಕೆದಾರರು ಆ ಸೈಟ್ ಅನ್ನು ಬಿಟ್ಟು ಹೋಗುತ್ತಾರೆ.

ನಿಧಾನಗತಿಯ ಸೈಟ್‌ಗಳು ನಿಮಗೆ ಹಣದ ನಷ್ಟವನ್ನು ಉಂಟುಮಾಡುತ್ತವೆ. ಮೊಬೈಲ್ ಲೋಡ್ ಸಮಯವನ್ನು 0.1 ಸೆಕೆಂಡ್‌ಗಳಷ್ಟು ಸುಧಾರಿಸುವುದರಿಂದ ರಿಟೇಲ್ ಕನ್ವರ್ಷನ್‌ಗಳು (retail conversions) 8.4% ಹೆಚ್ಚಾಗುತ್ತವೆ.

ಕಾರ್ಯಕ್ಷಮತೆಯು ಕೇವಲ ತಾಂತ್ರಿಕ ಅಳತೆಗೋಲಲ್ಲ. ಇದು ಒಂದು ವ್ಯವಹಾರದ ಅಳತೆಗೋಲು ಕೂಡ ಹೌದು.

ಗೆಲ್ಲಬೇಕೆಂದರೆ, ನೀವು Core Web Vitals ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು:

• LCP (Largest Contentful Paint): ಬಳಕೆದಾರರು ಮುಖ್ಯ ವಿಷಯವನ್ನು ಎಷ್ಟು ವೇಗವಾಗಿ ನೋಡುತ್ತಾರೆ ಎಂಬುದು. ಇದನ್ನು 2.5s ಗಿಂತ ಕಡಿಮೆ ಇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ. • INP (Interaction to Next Paint): ಕ್ಲಿಕ್‌ಗಳಿಗೆ ಪುಟವು ಎಷ್ಟು ವೇಗವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಎಂಬುದು. ಇದನ್ನು 200ms ಗಿಂತ ಕಡಿಮೆ ಇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ. • CLS (Cumulative Layout Shift): ಪುಟವು ಎಷ್ಟು ಸ್ಥಿರವಾಗಿದೆ ಎಂಬುದು. ಇದನ್ನು 0.1 ಗಿಂತ ಕಡಿಮೆ ಇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ.

ಊಹಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ (optimizing) ಮಾಡುವುದನ್ನು ಪ್ರಾರಂಭಿಸಿ. ಸಮಯವನ್ನು ಮೀರಿಸಲು ಇಲ್ಲಿದೆ ದಾರಿ:

JavaScript Optimization

• ಕಡಿಮೆ ಕೋಡ್ ಕಳುಹಿಸಿ (Ship less code). ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಕೋಡ್ ಲೋಡ್ ಮಾಡಲು dynamic imports ಬಳಸಿ. • tree-shaking ಬಳಸಿ. ಅನಗತ್ಯ ಕೋಡ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು CommonJS ನಿಂದ ES modules ಗೆ ಬದಲಾಗಿ. • ಭಾರೀ ಕೆಲಸಗಳನ್ನು Web Workers ಗೆ ವರ್ಗಾಯಿಸಿ. ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್‌ಗಾಗಿ main thread ಅನ್ನು ಮುಕ್ತವಾಗಿಡಿ. • defer ಅಥವಾ async ಬಳಸಿ. ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ನಿಮ್ಮ HTML ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ತಡೆಯದಂತೆ ನೋಡಿಕೊಳ್ಳಿ.

CSS and Rendering

• Inline critical CSS ಬಳಸಿ. ಮೊದಲು 'above the fold' ನಲ್ಲಿ ಕಾಣಿಸುವ ವಿಷಯವನ್ನು ಮಾತ್ರ ಲೋಡ್ ಮಾಡಿ. • layout thrashing ತಪ್ಪಿಸಿ. ಪದೇ ಪದೇ ಮರುಲೆಕ್ಕಾಚಾರವನ್ನು ತಡೆಯಲು ನಿಮ್ಮ reads ಮತ್ತು writes ಅನ್ನು ಬ್ಯಾಚ್ (batch) ಮಾಡಿ. • transform ಮತ್ತು opacity ಬಳಸಿ ಅನಿಮೇಟ್ ಮಾಡಿ. ಇವು GPU ಅನ್ನು ಬಳಸುತ್ತವೆ ಮತ್ತು layout shifts ಅನ್ನು ತಪ್ಪಿಸುತ್ತವೆ. • content-visibility: auto ಬಳಸಿ. ಸ್ಕ್ರೀನ್‌ನಿಂದ ಹೊರಗಿರುವ ವಿಷಯಗಳ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಬಿಟ್ಟುಬಿಡಿ.

Image Strategy

• ಆಧುನಿಕ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸಿ. WebP ಮತ್ತು AVIF ಫಾರ್ಮ್ಯಾಟ್‌ಗಳು JPEG ಗಿಂತ ತುಂಬಾ ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ. • width ಮತ್ತು height ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಿ. ಇದು layout shifts (CLS) ಅನ್ನು ತಡೆಯುತ್ತದೆ. • 'below the fold' ಇರುವ ಚಿತ್ರಗಳನ್ನು lazy-load ಮಾಡಿ. ನಿಮ್ಮ LCP hero ಇಮೇಜ್ ಅನ್ನು lazy-load ಮಾಡಬೇಡಿ. • srcset ಬಳಸಿ. ಮೊಬೈಲ್ ಬಳಕೆದಾರರಿಗೆ ಸಣ್ಣ ಗಾತ್ರದ ಚಿತ್ರಗಳನ್ನು ನೀಡಿ.

Network and Caching

• CDN ಬಳಸಿ. ವಿಳಂಬವನ್ನು (latency) ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ವಿಷಯವನ್ನು ಬಳಕೆದಾರರಿಗೆ ಹತ್ತಿರವಾಗಿಸಿ. • ಕಂಪ್ರೆಶನ್ (compression) ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು Brotli ಅಥವಾ Zstandard ಬಳಸಿ. • ಅತಿ ಹೆಚ್ಚು ಕ್ಯಾಷೆ ಮಾಡಿ (Cache aggressively). Hashed assets ಗಾಗಿ immutable cache headers ಬಳಸಿ. • bfcache ಕೆಲಸ ಮಾಡುವಂತೆ ನೋಡಿಕೊಳ್ಳಿ. ತಕ್ಷಣದ back/forward ನ್ಯಾವಿಗೇಶನ್ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು unload event ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸಿ.

ಗುರಿ ಸರಳವಾಗಿದೆ: ಕೆಲಸವನ್ನು ತಪ್ಪಿಸಿ.

ಅತ್ಯಂತ ವೇಗದ ಕೋಡ್ ಎಂದರೆ ಬಳಕೆದಾರರು ಎಂದಿಗೂ ಡೌನ್‌ಲೋಡ್ ಮಾಡದ ಕೋಡ್. ಅತ್ಯಂತ ವೇಗದ ರಿಕ್ವೆಸ್ಟ್ ಎಂದರೆ ಬ್ರೌಸರ್ ಎಂದಿಗೂ ಮಾಡದ ರಿಕ್ವೆಸ್ಟ್.

ಮೂಲ: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1