फ्रंटएंडची कार्यक्षमता सुधारण्याचे मुख्य मार्ग कोणते?

Question

IT Interview Practice · Accepted Answer

**वापरकर्त्याच्या प्रवासातील खरोखर संथ भाग सुधारा आणि बदलाने मदत झाली का मोजा.** लहान bundle अनुभव सुधारतो किंवा संबंधित खर्च कमी करतो तेव्हाच उपयोगी.

सामान्य फोनवर product page उघडल्यावर मुख्य image उशिरा दिसते आणि variant निवडताना विलंब होतो असे समजा. Loading आणि interaction वेगळे प्रश्न आहेत; एक सुधारणा दोन्ही सोडवेलच असे नाही.

## 1. प्रतिनिधिक मोजमापाने लक्षण ठरवा

Product साठी महत्त्वाचा प्रवास, device आणि network निवडा. खऱ्या वापरकर्त्यांच्या मोजमापाने प्रभावित गट शोधा आणि नियंत्रित browser test ने प्रश्न पुन्हा तयार करा. शक्तिशाली development laptop ग्राहकाचा विलंब लपवू शकतो.

- LCP सर्वात मोठा दिसणारा content element कधी render होतो ते मोजून loading अनुभव दाखवतो.
- INP page visit दरम्यान वापरकर्त्याच्या कृतींवरील प्रतिसाद दाखवतो.
- CLS अनपेक्षित layout shift मोजतो, जसे image आल्यावर मजकूर सरकणे.

हे [Core Web Vitals](https://web.dev/articles/vitals) वेगवेगळे पैलू दाखवतात. Variant निवडून cart मध्ये टाकण्यासारख्या प्रत्यक्ष कामाशी जोडा, म्हणजे चांगला आकडा तुटलेली सुविधा लपवणार नाही.

## 2. महत्त्वाचा content कशामुळे उशिरा येतो ते शोधा

Request waterfall मध्ये resource कधी सापडला, डाउनलोड झाला आणि पूर्ण झाला ते पाहा. Product ची मुख्य image JavaScript आणि API नंतरच सुरू होत असू शकते.

```text
HTML -> JavaScript -> Product API -> Main image
```

Image compress केल्याने download सुधारतो, पण आधी शोधल्याने आधीची वाट कमी होते. योग्य असल्यास server rendering किंवा static generation ने उपयोगी product content सुरुवातीच्या HTML मध्ये द्या. Freshness, server खर्च आणि interactivity साठी लागणारा JavaScript पाहा.

## 3. अनावश्यक transfer आणि execution कमी करा

Critical path कळल्यावर सध्याच्या screen ला उपयोग नसलेले काम काढा. सर्व उपाय अंधपणे करण्याऐवजी मोजलेल्या विलंबाशी जोडलेला बदल करा.

- योग्य आकार आणि format ची image द्या. Screen बाहेरच्या image lazy-load करा, पण मुख्य अपेक्षित image उशिरा आणू नका.
- Route किंवा feature नुसार code विभागा, म्हणजे product page ने न वापरलेले admin interface लोड करू नये.
- अनावश्यक dependency काढा आणि network व main thread दोन्ही वापरणाऱ्या third-party script तपासा.
- योग्य text response compress करा आणि versioned static asset cache करा. वैयक्तिक डेटासाठी वेगळी सुरक्षित policy द्या.

File लहान झाली तरी browser ला parse आणि execute करावे लागते. यश म्हणण्याआधी network आणि CPU परिणाम दोन्ही पाहा.

## 4. संथ interaction चे मूळ कारण सुधारा

Variant निवड उशिरा असेल तर scripting व rendering करणारा main thread profile करा. मोठी गणना सर्व file आल्यानंतरही प्रतिसाद अडवते.

दीर्घ काम छोटे करा किंवा योग्य गणना worker कडे द्या. सतत बदलणाऱ्या input साठी अनावश्यक request टाळा आणि जुना response नवीन निवडीवर लिहू देऊ नका. पुन्हा होणारी गणना महाग असल्याचे मोजल्यावर memoization करा, फक्त सजावट म्हणून नाही.

फार लांब यादीत दिसणारा भागच render करा, पण keyboard navigation आणि accessibility राखा. Image व उशिरा येणाऱ्या content साठी जागा ठेवा, म्हणजे layout उडणार नाही. हे वेगवेगळ्या लक्षणांचे उपाय असल्याने मूळ प्रश्नाशी प्रत्येक तपासा.

## 5. बदलानंतर पूर्ण प्रवास तपासा

तीच नियंत्रित चाचणी पुन्हा करा आणि release नंतर खऱ्या वापरकर्त्यांचे निकाल पाहा. Performance सोबत product correctness, keyboard access, cart completion आणि वाढलेला backend भार तपासा.

महत्त्वाच्या resource साठी व्यवहार्य budget ठेवा आणि regression पाहा. ग्राहक अजून थांबत असतील किंवा काम पूर्ण करत नसतील तर lab score पुरेसा नाही. **अंतिम निकाल आधी-नंतरच्या मोजमापाने समर्थित जलद, स्थिर आणि वापरता येणारा प्रवास असावा.**

1. प्रतिनिधिक मोजमापाने लक्षण ठरवा

2. महत्त्वाचा content कशामुळे उशिरा येतो ते शोधा

3. अनावश्यक transfer आणि execution कमी करा

4. संथ interaction चे मूळ कारण सुधारा

5. बदलानंतर पूर्ण प्रवास तपासा

संबंधित प्रश्न