६० एफपीएस वेब परफॉर्मन्स: लॅग-फ्री स्मूथ अ‍ॅनिमेशन आणि हलके कॉम्पोनेंट्स कसे बनवावे?

एखाद्या वेबसाईटवर स्क्रोल करताना जर स्क्रीन अडखळली (jank/lag आला), तर युझरचा मूड क्षणात खराब होतो. अनेकदा डेव्हलपर्स नको तितक्या जड लायब्ररी वापरतात, ज्यामुळे साधे पेज लोड व्हायलाही ५-६ सेकंद लागतात.

माझ्या पोर्टफोलिओमध्ये आणि LadeStack च्या टूल्समध्ये आम्ही मोबाईलवरही ६० फ्रेम्स पर सेकंड (60fps) चा वेग कायम राखतो.

लॅग-फ्री अनुभवासाठी आमचे ३ नियम

1. लेआउट शिफ्ट (CLS) टाळा: width किंवा top अ‍ॅनिमेट करण्याऐवजी नेहमी transform: translate3d() आणि opacity वापरा. यामुळे ब्राउझरला पुन्हा संपूर्ण पेज रेंडर (reflow) करावे लागत नाही.
2. पॅसिव्ह इव्हेंट लिसनर्स: स्क्रोल आणि टच इव्हेंट्सना { passive: true } लावा, जेणेकरून मेन थ्रेड थांबून राहत नाही.
3. अनावश्यक जावास्क्रिप्टचे तुकडे करा: कोड स्प्लिटिंग करून फक्त आवश्यक तेवढाच कोड डाऊनलोड करा.

परफॉर्मन्स हा नंतर करायचा ‘पॉलिश’ नसून तो कोडच्या पहिल्या ओळीपासूनच लक्षात ठेवायचा असतो.