पाठ 25 / 25
साक्षात्कार प्रश्न और व्यावहारिक परिदृश्य
तकनीकी साक्षात्कारों के लिए तैयारी करें और व्यावहारिक परिदृश्यों के साथ।
परिदृश्य: धीमा पहला पृष्ठ लोड
User बताता है कि पहला load 5s लेता है। Steps: 1) Lighthouse चलाकर bottleneck पहचानें 2) Bundle size और minification जाँचें 3) DevTools से profile करें 4) Unoptimized images और render-blocking CSS ढूँढें 5) 3G पर test करें। आम समाधान: images compress (40% सुधार) + code split (20-30%) + JS defer (10-20%)।
परिदृश्य: विज्ञापनों से उच्च CLS
Ads load होने से layout shift होता है। समाधान: 1) Ads के लिए fixed-size containers से जगह reserve करें 2) aspect-ratio CSS property इस्तेमाल करें 3) Ads को अलग iframe में asynchronously load करें 4) Fold के नीचे के ads lazy load करें। Fix के बाद CLS 0.3+ से घटकर <0.1 हो जाना चाहिए।
परिदृश्य: खराब मोबाइल प्रदर्शन
Desktop पर तेज़, mobile पर धीमा। जाँच करें: 1) Network bandwidth bottleneck (responsive images इस्तेमाल करें) 2) CPU-bound JavaScript (code splitting, main thread optimization) 3) Memory issues (polyfills हटाएँ) 4) Third-party असर (critical को प्राथमिकता दें)। Mobile अक्सर desktop से 10 गुना धीमा होता है।
साक्षात्कार की तैयारी
इन पर बात करने को तैयार रहें: Web Vitals metrics, optimization techniques, tools (DevTools, Lighthouse, WebPageTest)। Profiling से measurement तक एक example optimization समझाएँ। Team की performance process के बारे में पूछें। सिर्फ़ optimizations नहीं, tradeoffs की समझ दिखाएँ।
त्वरित जाँच
त्वरित जाँच: प्रदर्शन अनुकूलित करते समय सबसे पहले क्या आता है?
- सभी अनुकूलन लागू करें
- अड़चनों की पहचान करने के लिए मापना और प्रोफाइल करना
- कोड को फिर से लिखें
- कुछ जाँचे बिना CDN जोड़ना
Answer
अड़चनों की पहचान करने के लिए मापना और प्रोफाइल करना — पहले measure करने से आप अनुमान के बजाय असली bottleneck ठीक करते हैं।
अंतिम क्विज़ 1/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा Core Web Vital user interactions के प्रति responsiveness मापता है?
- INP
- LCP
- CLS
- TTFB
Answer
INP — INP ने मार्च 2024 में FID की जगह ली और पूरी visit में interaction latency मापता है।
अंतिम क्विज़ 2/8
अंतिम क्विज़
त्वरित जाँच: Fingerprinted static asset को सबसे लंबा उपयोगी cache life कौन-सा header देता है?
- Cache-Control: no-store
- Cache-Control: public, max-age=31536000
- Cache-Control: max-age=0
- Content-Encoding: gzip
Answer
Cache-Control: public, max-age=31536000 — जब filename content के साथ बदलता है तो एक साल का max-age सुरक्षित है।
अंतिम क्विज़ 3/8
अंतिम क्विज़
त्वरित जाँच: कौन-सा attribute offscreen images को जरूरत तक टालता है?
- decoding="sync"
- loading="lazy"
- fetchpriority="high"
- rel="preload"
Answer
loading="lazy" — Native lazy loading below-the-fold images को टालता है और initial payload घटाता है।
अंतिम क्विज़ 4/8
अंतिम क्विज़
त्वरित जाँच: Long task क्या है?
- Any task over 5ms
- Any task over 50ms on the main thread
- Any request over 1 second
- Any script over 100KB
Answer
Any task over 50ms on the main thread — 50ms से लंबे tasks main thread रोकते हैं और responsiveness घटाते हैं।
अंतिम क्विज़ 5/8
अंतिम क्विज़
त्वरित जाँच: Ads और images के लिए fixed dimensions से जगह क्यों आरक्षित करें?
- To lower CLS
- To raise TTFB
- To disable caching
- To enable HTTP/3
Answer
To lower CLS — आरक्षित जगह late resources load होने पर content को कूदने से रोकती है।
अंतिम क्विज़ 6/8
अंतिम क्विज़
त्वरित जाँच: असली users की performance सबसे अच्छी तरह कौन-सा तरीका दिखाता है?
- A single Lighthouse run on your laptop
- Real User Monitoring (RUM)
- Counting HTML files
- Minifying CSS
Answer
Real User Monitoring (RUM) — RUM असली devices, networks और locations दिखाता है जो lab tests में नहीं दिखते।
अंतिम क्विज़ 7/8
अंतिम क्विज़
त्वरित जाँच: CI में performance budget क्या करता है?
- Fails the build when limits are exceeded
- Speeds up the server
- Compresses images automatically
- Replaces monitoring
Answer
Fails the build when limits are exceeded — Budgets guardrails की तरह release से पहले regressions पकड़ते हैं।
अंतिम क्विज़ 8/8
अंतिम क्विज़
त्वरित जाँच: Page धीमा हो तो सबसे पहले क्या करें?
- Measure and profile to find the bottleneck
- Add every optimization
- Rewrite in a new framework
- Add a CDN only
Answer
Measure and profile to find the bottleneck — मापे गए bottleneck को ठीक करना सबसे बड़ा और भरोसेमंद लाभ देता है।