CSS غیر بحرانی را به تعویق بیندازید

Demián Renzulli

فایل‌های CSS منابع مسدودکننده رندر هستند: قبل از اینکه مرورگر صفحه را رندر کند، باید بارگیری و پردازش شوند. صفحات وب که حاوی شیوه نامه های بزرگ غیرضروری هستند، زمان بیشتری برای ارائه می دهند.

در این راهنما، نحوه به تعویق انداختن CSS غیر بحرانی برای بهینه سازی مسیر رندر بحرانی و بهبود First Contentful Paint (FCP) را خواهید آموخت.

مثال: بارگیری CSS کمتر از حد مطلوب

مثال زیر شامل یک آکاردئون با سه پاراگراف مخفی متن است که هر کدام با کلاس متفاوتی استایل‌بندی شده‌اند:

این صفحه یک فایل CSS با هشت کلاس درخواست می کند، اما همه آنها برای ارائه محتوای "قابل مشاهده" ضروری نیستند.

هدف این راهنما بهینه سازی این صفحه است تا فقط سبک های بحرانی به صورت همزمان بارگذاری شوند، در حالی که بقیه (از جمله سبک های پاراگراف) به صورت غیر مسدود کننده بارگیری می شوند.

اندازه گرفتن

Lighthouse را در صفحه اجرا کنید و به بخش Performance بروید.

این گزارش متریک First Contentful Paint را با مقدار "1s" و فرصت حذف منابع مسدودکننده رندر را نشان می‌دهد و به فایل style.css اشاره می‌کند:

گزارش Lighthouse پیشنهاد می کند که صفحه سبک خود را ساده کنید تا صفحه شما سریعتر بارگذاری شود.

توجه: این سایت دمو از یک شیوه نامه بسیار کوچک استفاده می کند. در سناریوهای تولید، نیاز به فایل‌های CSS بسیار بزرگ‌تر معمول است. اگر Lighthouse تشخیص دهد که یک صفحه حداقل 2048 بایت از قوانین CSS دارد که در حین رندر کردن محتوای بالا مورد استفاده قرار نگرفته اند، همچنین یک پیشنهاد Remove Unused CSS را نشان می دهد.

برای تجسم اینکه چگونه این CSS رندر را مسدود می کند:

1. صفحه را در کروم باز کنید.
2. برای باز کردن DevTools، Control+Shift+J (یا Command+Option+J در مک) را فشار دهید.
3. روی تب Performance کلیک کنید.
4. در پانل عملکرد، روی بارگذاری مجدد کلیک کنید.

در ردیابی به دست آمده، خواهید دید که نشانگر FCP بلافاصله پس از اتمام بارگیری CSS قرار می گیرد:

در صفحه نمایشی بهینه‌نشده، FCP نمی‌تواند تا زمانی که بارگیری CSS تمام شود، اتفاق بیفتد.

این به این معنی است که مرورگر باید منتظر بماند تا تمام CSS بارگیری شود و قبل از نقاشی یک پیکسل روی صفحه، پردازش شود.

بهینه سازی کنید

برای بهینه سازی این صفحه، باید بدانید که کدام کلاس ها حیاتی در نظر گرفته می شوند. برای تعیین این مورد، از ابزار Coverage استفاده کنید:

1. در DevTools، منوی فرمان را با فشار دادن Control+Shift+P یا Command+Shift+P (Mac) باز کنید.
2. "Coverage" را تایپ کرده و Show Coverage را انتخاب کنید.
3. برای بارگیری مجدد صفحه و شروع به گرفتن پوشش، روی بارگذاری مجدد کلیک کنید.

گزارش پوشش نشان می دهد که چه مقدار از CSS شما واقعاً در بارگذاری صفحه اولیه استفاده شده است.

برای مشاهده جزئیات روی گزارش دوبار کلیک کنید:

• کلاس هایی که با رنگ سبز مشخص شده اند بسیار مهم هستند. مرورگر به آنها نیاز دارد تا محتوای قابل مشاهده، از جمله دکمه های عنوان، زیرنویس و آکاردئون را ارائه دهد.
• کلاس‌هایی که با قرمز علامت‌گذاری شده‌اند، غیرانتقادی هستند و فقط بر محتوایی تأثیر می‌گذارند که فوراً قابل مشاهده نیستند، مانند پاراگراف‌های پنهان.

با استفاده از این اطلاعات، CSS خود را بهینه کنید تا مرورگر بتواند بلافاصله پس از بارگیری صفحه، پردازش سبک های حیاتی را شروع کند و CSS غیر بحرانی را برای بعد موکول کند:

1. تعاریف کلاس هایی که در گزارش پوشش با سبز مشخص شده اند را استخراج کنید و آن کلاس ها را در یک بلوک <style> در بالای صفحه قرار دهید:

   <style type="text/css">
   .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
   </style>
   

2. با اعمال الگوی زیر بقیه کلاس ها را به صورت ناهمزمان بارگذاری کنید:

   <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="styles.css"></noscript>
   

این روش استاندارد بارگیری CSS نیست. در اینجا نحوه کار آن آمده است:

• link rel="preload" as="style" شیوه نامه را به صورت ناهمزمان درخواست می کند. می‌توانید در راهنمای دارایی‌های حیاتی Preload preload پیش‌بارگذاری اطلاعات بیشتری کسب کنید.
• ویژگی onload در link به مرورگر این امکان را می دهد که CSS را هنگامی که بارگذاری شیت به پایان رسید پردازش کند.
• پاک کردن کنترل کننده onload پس از استفاده از آن به برخی از مرورگرها کمک می کند از فراخوانی مجدد کنترلر هنگام تغییر ویژگی rel اجتناب کنند.
• ارجاع به شیوه نامه در داخل عنصر noscript ، برای مرورگرهایی که جاوا اسکریپت را اجرا نمی کنند، بازگشتی فراهم می کند.

توجه داشته باشید:

در یک سناریوی تولید واقعی، توصیه می‌کنیم از توابع به تعویق انداختن CSS مانند loadCSS استفاده کنید که می‌تواند این رفتار را کپسوله کند و به خوبی در مرورگرها کار کند، و از یک خط‌مشی امنیتی محتوا پشتیبانی کند که ممکن است onload اسکریپت درون‌باری را اجازه ندهد.

همچنین می‌توانید پیوند CSS را در پایین صفحه قرار دهید و به محتوا اجازه دهید قبل از رندر شدن بدون انتظار برای صفحه سبک در فایرفاکس و کروم. با این حال، مرورگر همچنان در این مورد شیوه نامه را در اولویت قرار می دهد، بنابراین همچنان می تواند محتوای مهم را در همه مرورگرها مسدود کند.

صفحه به دست آمده دقیقاً شبیه نسخه قبلی است، حتی زمانی که اکثر سبک ها به صورت ناهمزمان بارگذاری می شوند. در اینجا استایل های درون خطی و درخواست ناهمزمان به فایل CSS در فایل HTML به نظر می رسد:

نظارت کنید

از DevTools برای اجرای ردیابی عملکرد دیگری در صفحه بهینه شده استفاده کنید.

نشانگر FCP قبل از درخواست صفحه CSS ظاهر می شود، به این معنی که مرورگر قبل از رندر کردن صفحه نیازی به صبر کردن برای بارگیری CSS ندارد:

در صفحه بهینه‌سازی شده، FCP می‌تواند قبل از بارگیری شیوه نامه شروع شود.

در مرحله آخر، Lighthouse را در صفحه بهینه شده اجرا کنید.

در گزارش، خواهید دید که صفحه FCP 0.2 ثانیه کاهش یافته است (20٪ بهبود!):

FCP جدید و کاهش یافته.

پیشنهاد حذف منابع مسدودکننده رندر دیگر در قسمت فرصت‌ها ظاهر نمی‌شود و در عوض در بخش بررسی‌های پاس شده است:

صفحه اکنون از ممیزی منابع مسدود کننده عبور می کند.

مراحل بعدی و مراجع

در این راهنما، نحوه به تعویق انداختن CSS غیر بحرانی را با استخراج دستی کدهای استفاده نشده در صفحه یاد گرفتید. برای محیط‌های تولید پیچیده‌تر، راهنمای استخراج CSS بحرانی برخی از محبوب‌ترین ابزارها برای استخراج CSS حیاتی را پوشش می‌دهد و شامل یک کد برای مشاهده نحوه عملکرد آنها در عمل می‌شود.