हीरो पेंट करने से पहले आठ ऑफ स्क्रीन अनुभागों को प्रस्तुत करना बंद करें

Performancekamo-marketing
शिप
19 अगस्त 2026 को 7:59 pm बजे UTC
लेखक
Kamo
Commit
525e81c

LCP 4.4 s था, और इसके ब्रेकडाउन ने कहा कि 120 ms to first byte, 290 ms of the लोड देरी, 390 ms वास्तव में छवि डाउनलोड - और उसके बाद 1,810 ms "वर्णन देरी"। तस्वीर आ रही थी और बस नहीं हो सका चित्रित किया जाना चाहिए। होमपेज जहाजों 1,482 डोम तत्वों, थ्रेसहोल्ड लाइटहाउस पर DOM आकार को "ऑप्टिमाइज़" में विफल रहता है, और उनमें से प्रत्येक को बाहर रखा जा रहा था और उनमें से प्रत्येक को बाहर रखा जा रहा था। प्रारंभिक प्रतिपादन के दौरान चित्रित किया गया, जबकि LCP तत्व ने अपनी बारी को पीछे छोड़ दिया आठ खंडों में कोई भी नहीं आया था। `content-visibility: हर खंड पर ऑटो` को छोड़कर `#home` ब्राउज़र को छोड़ देता है उन subtrees के लिए लेआउट और पेंट जब तक वे viewport दृष्टिकोण करते हैं। The तत्व अभी भी मौजूद हैं - एचटीएमएल में, इंजन खोजने के लिए, इन-पेज एंकरों के लिए, to खोजने के लिए खोज-in-page, और IntersectionObserver JumpToBar रन के लिए - वे सिर्फ नहीं हैं इससे पहले कि किसी को भी उन्हें देख सकता है। दो चीजें यहां सुरक्षित हैं आम तौर पर: प्रत्येक अनुभाग पहले से ही `स्थिति: सापेक्ष` और `overflow: छिपा`, इसलिए निहित रोकथाम के बारे में कुछ भी नहीं बदलता है कि कैसे उनकी पूरी स्थिति पृष्ठभूमि का समाधान, और `contain-intrinsic-size` 'ऑटो' कीवर्ड का उपयोग करता है, इसलिए प्लेसहोल्डर ऊंचाई केवल एक सेक्शन के पहले रेंडर और ब्राउज़र से पहले लागू होती है उसके बाद असली को याद करता है। एक विशिष्ट फ़ाइल के लिए जिम्मेदार रिपोर्ट को फिर से प्रवाहित करने के लिए PreviewBanner था। यह हाइड्रेशन के बाद `offsetHeight` सही पढ़ा और `Document' लिखा। शरीर। शैली .paddingTop`, जो पूरे दस्तावेज़ के लिए लेआउट को अमान्य करता है। लिखना था भी अनावश्यक - `body { padding-top: var(-banner-h) }` पहले से ही आरक्षित है। पहली पेंट से अंतरिक्ष। A ResizeObserver ने 'borderboxSize' से ऊंचाई की रिपोर्ट की, जब कॉलबैक चलता है तो ब्राउज़र पहले से ही गणना कर चुका है, इसलिए कुछ भी नहीं है मजबूर बॉर्डरबॉक्स सामग्री के बजाय आकार उद्देश्य पर अंक: बैनर होता है `padding: छोटे स्क्रीन पर 6px 16px`, और अकेले सामग्री की ऊंचाई को संरक्षित करना बैनर के तहत 12px बैठे प्रतिलिपि छोड़ देंगे। theme.kamocrm.com अपने पहले से कनेक्ट हो जाता है, जो रिपोर्ट में नाम से पूछता है एलसीपी के 300 मीटर। इसे dns-prefetch के लिए डेमो करना गलत था: छवियां गुजरती हैं इस मूल का ऑप्टिमाइज़र अब है, लेकिन डायनेमिक मेटालोडर अभी भी ऑर्ग के विषय को प्राप्त करता है रनटाइम पर उस होस्ट से स्टाइलशीट, और यह एक रेंडर-प्रभावी अनुरोध है महत्वपूर्ण पथ। एनालिटिक्स एक dns-prefetch रहता है - ट्रैकर lazyOnload है, इसलिए भार घटना से पहले कुछ भी इसे छूता है। हीरो पृष्ठभूमि की गुणवत्ता 40: 21.9 KB to 12.8 KB, जो क्या है छवि परीक्षण के लिए पूछ रहा था। चमक के माध्यम से मापा जाता है (0.21) यह है मिश्रित, 50 -> 40 8/255 से अधिक पिक्सेल के 1.09% की चालें और रखती हैं 40.7 डीबी. गुणवत्ता 30 की कोशिश की और 3.20% पर खारिज कर दिया गया था। अनुभाग पृष्ठभूमि 75 पर रहते हैं, और यह दूसरी बार माप है ऐसा कहा जाता है। कम चौड़ाई में वे अब अनुरोध करते हैं, 50 तक गिरते हुए * खराब* है यह पूर्ण चौड़ाई पर था - 11.30% पिक्सेल शिफ्ट बनाम 6.60% - क्योंकि निचले स्तर पर प्रत्येक संपीड़न ब्लॉक का रिज़ॉल्यूशन आपके द्वारा देखी जाने वाली चीज़ों से अधिक कवर करता है। संकल्प और संकल्प गुणवत्ता में कमी एक तस्वीर पर स्टैक नहीं है; एक या दूसरा। HLS प्लेलिस्ट अब एक साल के लिए immutable हैं, लाइव और नौकरी में प्रकट होता है, जो पिछले कैश लाइफटाइम आइटम को बंद कर देता है। इसके बजाय लागत बढ़ जाती है इसे हटा दें, इसलिए `HERO HLS SRC` एक `?v=` है जो एक पर टक्कर लगी है। फिर से एन्कोड; दोनों फाइलें कहते हैं, क्योंकि अन्यथा एक फिर से एन्कोड की तरह दिखेगा चुपचाप काम नहीं किया।.

सभी बदलाव

जैसा कि आप शिपिंग देखते हैं?

इन अद्यतनों में से प्रत्येक स्वचालित रूप से अपने कार्यक्षेत्र में उतरता है। प्रारंभ करें और सप्ताह के बाद इसे सप्ताह के अंत में देखें।.

Foreverमूल्य निर्धारण देखें