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

دمیان رنزولی

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

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

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

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

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

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

اندازه گیری کنید

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

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

فانوس دریایی گزارش برای صفحه بهینه نشده، نشان دادن FCP از "1s" و "Elimate blocking". منابع" زیر "فرصت ها"
گزارش Lighthouse پیشنهاد می کند که صفحه سبک خود را ساده کنید تا صفحه شما سریعتر بارگذاری شود.

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

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

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

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

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

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

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

  1. در DevTools، منوی فرمان را با فشار دادن Control+Shift+P یا Command+Shift+P (Mac) باز کنید.
  2. "Coverage" را تایپ کرده و Show Coverage را انتخاب کنید.
  3. برای بارگیری مجدد صفحه و شروع به گرفتن پوشش، روی بارگذاری مجدد کلیک کنید.
پوشش فایل CSS که 55.9٪ بایت های استفاده نشده را نشان می دهد.
گزارش پوشش نشان می دهد که چه مقدار از 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 در فایل HTML به نظر می رسد:

نظارت کنید

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

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

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

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

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

گزارش فانوس دریایی، که مقدار FCP '0.8s' را نشان می دهد.
FCP جدید و کاهش یافته.

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

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

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

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