font को खुद host करें, पहले paint के लिए ज़रूरी एक फाइल preload करें, और font display swap इस्तेमाल करें ताकि टेक्स्ट तुरंत दिखे। फिर size adjust, ascent override और descent override से fallback के metrics मिलाकर shift हटाएं, या कोई generated fallback face इस्तेमाल करें। font को सिर्फ उन characters तक subset करें जो आप सच में इस्तेमाल करते हैं, सिर्फ woff2 भेजें, और जब variable fonts पूरी रेंज कवर करते हों तो कई weights load करने से बचें।
इंटरव्यूअर यह क्यों पूछते हैं
fonts layout shift की सबसे आम वजह हैं और परफॉर्मेंस रिव्यू में सबसे आसान जीत में से एक। इंटरव्यूअर जांच रहा है कि आपको पता है कि shift क्यों होती है, यानी fallback और असली face के metrics का मेल न खाना, न कि सिर्फ font display swap रटा हुआ है। खुद hosting और preloading की जानकारी यह भी दिखाती है कि आप समझते हैं कि तीसरे पक्ष का origin font के मिलने से पहले ही एक अतिरिक्त connection खर्च कराता है।
अपना जवाब कैसे स्ट्रक्चर करें
- बताएं कि shift क्यों होती है: fallback के metrics असली face से अलग होते हैं।
- loading की रणनीति दें: खुद host, preload, woff2, subset।
- खाली टेक्स्ट और swap के बीच display value का ट्रेड-ऑफ कवर करें।
- अंत में metric overrides बताएं जो swap को लगभग अदृश्य बना देते हैं।
उदाहरण जवाब
shift इसलिए होती है कि fallback font के metrics अलग होते हैं, तो असली font आते ही हर लाइन दोबारा बहती है और उसके नीचे सब कुछ खिसक जाता है। यानी दो समस्याएं ठीक करनी हैं: टेक्स्ट कब दिखे, और बदलने पर वह कितना हिले। पहली के लिए मैं font खुद host करता हूं, सिर्फ शुरुआती स्क्रीन के लिए ज़रूरी फाइल preload करता हूं, और font display swap रखता हूं ताकि धीमे connection पर कोई खाली जगह घूरता न रहे। दूसरी के लिए मैं fallback के metrics override करता हूं, किसी local fallback face पर size adjust के साथ ascent और descent overrides, ताकि fallback लगभग ठीक उतनी ही जगह घेरे और swap मुश्किल से दिखे। इसके आगे बस साफ सफाई है: सिर्फ woff2, सिर्फ इस्तेमाल होने वाले character set तक subset, और चार static weights की जगह एक variable font। एक साइट पर जो तीसरे पक्ष के origin से तीन weights खींच रही थी, खुद host की गई subset variable font पर जाने से करीब 180 किलोबाइट कम हुए और CLS लगभग 0.18 से 0.02 के नीचे आ गया।
जल्दी ही यह इंटरव्यू देने जा रहे हैं? GhostPilot आपकी लाइव कॉल सुनता है, सवाल पूछे जाते ही उसे पकड़ लेता है, और रियल-टाइम में एक स्ट्रक्चर्ड जवाब आपकी स्क्रीन पर डाल देता है। अगले मॉक में इसे आजमाएं, या ले लें एक $29 Session Pass, कोई सब्सक्रिप्शन नहीं, असली इंटरव्यू के लिए।
देखें यह कैसे काम करता हैफॉलो-अप सवाल जिनकी उम्मीद रखें
- font display swap, optional और fallback में क्या फर्क है?
- कोई font कितनी layout shift करा रहा है, यह कैसे नापेंगे?
- system font stack कब बेहतर जवाब होता है?
फ्रंटएंड डेवलपर के और सवाल
आपका इंटरव्यूअर इसका अपना वर्ज़न पूछेगा। फ्री Question Predictor में अपना असली जॉब डिस्क्रिप्शन पेस्ट कीजिए और वो 20 सवाल पाइए जो उस रोल में सबसे ज्यादा पूछे जाने की संभावना है, साथ में यह भी कि हर सवाल असल में क्या टटोल रहा है।
मेरे सवाल प्रेडिक्ट करें