వెబ్ పెర్ఫార్మెన్స్ యొక్క 3-సెకన్ల నియమం

మీ దగ్గర మూడు సెకన్లు మాత్రమే ఉన్నాయి.

ఆ తర్వాత, మీ వినియోగదారులు వెళ్ళిపోతారు.

ఒక సైట్ లోడ్ కావడానికి 3 సెకన్ల కంటే ఎక్కువ సమయం పడితే, 53% మొబైల్ వినియోగదారులు ఆ సైట్‌ను వదిలివేస్తారని గూగుల్ పరిశోధన చూపుతోంది.

నెమ్మదిగా ఉండే సైట్లు మీకు నష్టాన్ని కలిగిస్తాయి. మొబైల్ లోడ్ సమయాన్ని 0.1 సెకన్లు మెరుగుపరచడం వల్ల రిటైల్ కన్వర్షన్లు 8.4% పెరుగుతాయి.

పెర్ఫార్మెన్స్ అనేది కేవలం ఒక సాంకేతిక కొలమానం మాత్రమే కాదు. ఇది ఒక వ్యాపార కొలమానం కూడా.

విజయం సాధించాలంటే, మీరు Core Web Vitals గురించి అర్థం చేసుకోవాలి:

• LCP (Largest Contentful Paint): వినియోగదారులు ప్రధాన కంటెంట్‌ను ఎంత వేగంగా చూస్తారు అనేది. 2.5s కంటే తక్కువగా ఉండటానికి ప్రయత్నించండి. • INP (Interaction to Next Paint): క్లిక్‌లకు పేజీ ఎంత వేగంగా స్పందిస్తుంది అనేది. 200ms కంటే తక్కువగా ఉండటానికి ప్రయత్నించండి. • CLS (Cumulative Layout Shift): పేజీ ఎంత స్థిరంగా ఉంది అనేది. 0.1 కంటే తక్కువగా ఉండటానికి ప్రయత్నించండి.

ఊహించడం ఆపివేసి, ఆప్టిమైజ్ చేయడం ప్రారంభించండి. సమయాన్ని అధిగమించడానికి ఇక్కడ కొన్ని మార్గాలు ఉన్నాయి:

JavaScript Optimization • తక్కువ కోడ్‌ను పంపండి. అవసరమైనప్పుడు మాత్రమే కోడ్‌ను లోడ్ చేయడానికి dynamic imports ఉపయోగించండి. • tree-shaking ఉపయోగించండి. అనవసరమైన కోడ్‌ను తొలగించడానికి CommonJS నుండి ES modules కి మారండి. • భారీ పనులను Web Workers కి తరలించండి. యూజర్ ఇన్‌పుట్ కోసం మెయిన్ థ్రెడ్‌ను ఖాళీగా ఉంచండి. • defer లేదా async ఉపయోగించండి. స్క్రిప్ట్‌లు మీ HTML పార్సింగ్‌ను అడ్డుకోకుండా చూడండి.

CSS and Rendering • Inline critical CSS ఉపయోగించండి. మొదట above the fold (స్క్రీన్ పైభాగంలో) కనిపించే వాటిని మాత్రమే లోడ్ చేయండి. • layout thrashing ని నివారించండి. నిరంతర రీకాల్క్యులేషన్లను నివారించడానికి మీ reads మరియు writes లను బ్యాచ్‌లుగా చేయండి. • 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 ఉపయోగించండి. లేటెన్సీని తగ్గించడానికి మీ కంటెంట్‌ను వినియోగదారులకు దగ్గరగా చేర్చండి. • కంప్రెషన్‌ను ఎనేబుల్ చేయండి. ఫైల్ పరిమాణాలను తగ్గించడానికి Brotli లేదా Zstandard ఉపయోగించండి. • క్యాషింగ్‌ను బలంగా (aggressively) ఉపయోగించండి. hashed assets కోసం immutable cache headers ఉపయోగించండి. • bfcache పని చేసేలా చూడండి. తక్షణ back/forward నావిగేషన్‌ను నిర్ధారించడానికి unload ఈవెంట్‌ను ఉపయోగించకండి.

లక్ష్యం సరళమైనది: పనిని నివారించడం.

అత్యంత వేగవంతమైన కోడ్ అంటే మీ వినియోగదారులు ఎప్పుడూ డౌన్‌లోడ్ చేయని కోడ్. అత్యంత వేగవంతమైన రిక్వెస్ట్ అంటే బ్రౌజర్ ఎప్పుడూ చేయాల్సిన అవసరం లేని రిక్వెస్ట్.

మూలం: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1