सीएलएस: लेआउट बदलाव

स्क्रॉल जो उपयोगकर्ता के धैर्य की परीक्षा लेते हैं: सीएलएस

जिस पाठ को आप पढ़ने का प्रयास कर रहे हैं उसका अचानक नीचे स्क्रॉल हो जाना या जैसे ही आप उस पर क्लिक करने वाले हैं वैसे ही बटन का अपनी स्थिति बदल देना, इससे भी बुरे अनुभव कुछ ही हैं। Google इस अस्थिरता को संचयी लेआउट शिफ्ट (सीएलएस) मीट्रिक के साथ मापता है और 0.1 से कम को "अच्छा" मानता है।

सीएलएस क्यों होता है?

• अनिर्दिष्ट आकार वाले चित्र और वीडियो।
• विलंबित लोडिंग फ़ॉन्ट (FOIT/FOUT समस्या)।
• गतिशील रूप से विज्ञापन स्थान जोड़े गए या विगेट्स।
• CSS फ़ाइलें देर से लोड होने के कारण शैली में परिवर्तन।

समाधान

• सभी और टैग में चौड़ाई और ऊंचाई मान जोड़ें।
• CSS में aspect-ratio संपत्ति का उपयोग करके स्थान आरक्षण
• उपयोग करते समय <कोड>फ़ॉन्ट-डिस्प्ले: स्वैपकोड> फ़ॉन्ट अपलोड के लिए, फ़ॉलबैक फ़ॉन्ट के आयामों को मुख्य फ़ॉन्ट के साथ संरेखित करें।
• विज्ञापन स्थानों के लिए निश्चित ऊंचाई के कंटेनर बनाएं।