معیارهای کور وب وایتال در سال 2021 به فاکتورهای رتبه‌بندی سایت‌ها در موتورهای جست‌وجو اضافه شده‌اند. این معیارها سهم موثری در بهبود سئو سایت دارند و سئوکاران باید توجه ویژه‌ای به آن‌ها داشته باشند. در این مقاله از منتوریکس به سراغ منابع CSSرفته‌ایم. پرونده‌های CSS منابع مسدود کننده رندر هستند. آن‌ها باید قبل از ارائه مرورگر به صفحه، بارگیری و پردازش شوند. ارائه صفحات وب که دارای سبک‌های بزرگ و غیر ضروری هستند مدت زمان بیشتری نیاز دارد.
در این راهنما، شما یاد خواهید گرفت که چگونه CSS‌های غیر مهم را با هدف بهینه‌سازی مسیر رندر و بهبود First Contentful Paint (FCP) به تعویق بیندازید.

بارگذاری CSS به روشی غیر بهینه

مثال زیر شامل یک مرحله با سه پاراگراف مخفی است که هر یک از آن‌ها با کلاس متفاوتی طراحی شده‌اند: این صفحه یک پرونده CSS با هشت کلاس را درخواست می‌کند، اما همه آن‌ها برای ارائه محتوای "قابل مشاهده" لازم نیستند.
هدف این راهنما بهینه‌سازی این صفحه است، بنابراین فقط استایل‌های مهم به طور همزمان بارگیری می‌شوند، در حالی که بقیه (مانند موارد اعمال شده بر پاراگراف‌ها) به روش غیر ‌مسدود‌کننده بارگیری می‌شوند.

اندازه‌گیری

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

CSS که ما برای این سایت آزمایشی استفاده می‌کنیم بسیار کم است. اگر پرونده‌های CSS بزرگتری را درخواست می‌کنید (که در سناریوهای تولید غیر معمول نیستند) و اگر Lighthouse تشخیص دهد که یک صفحه حداقل 2048 بایت از قوانین CSS دارد که هنگام ارائه موارد ذکر شده در بالا از محتوای برابر استفاده نشده است، پیشنهادی به نام Remove Unused CSS را دریافت خواهید کرد.

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

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

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

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

بهینه‌سازی

برای بهینه‌سازی این صفحه، باید بدانید که کدام موارد "مهم" محسوب می‌شوند. برای این کار از ابزار Coverage استفاده خواهید کرد:

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

برای دیدن مواردی که با دو رنگ مشخص شده‌اند، روی گزارش دوبار کلیک کنید:

• سبز (مهم): این مواردی است که مرورگر برای ارائه محتوای قابل مشاهده (مانند عنوان و زیرنویس) به آن‌ها نیاز دارد.
• قرمز (غیر مهم): این استایل‌ها برای محتوایی که بلافاصله قابل مشاهده نیستند اعمال می‌شوند.

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

سپس، با استفاده از الگوی زیر، بقیه موارد را به صورت غیر هم زمان بارگیری کنید:

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

• link rel = "preload" as = "style" این شیوه‌نامه را به صورت غیر هم‌زمان درخواست می‌کند.
• ویژگی onload در پیوند امکان پردازش CSS هنگام اتمام بارگیری را فراهم می‌کند.
• گزینه " nulling " کنترل‌کننده بارگذاری است و پس از استفاده به برخی مرورگرها کمک می‌کند تا با تعویض ویژگی rel، با کنترل کننده re-calling نکنند.
• ارجاع به یک استایل‌شیت در داخل یک عنصر noscript به عنوان یک fallback برای مرورگرهایی که JavaScript را اجرا نمی‌کنند، کار می‌کند.

در این راهنما، از vanilla code برای اجرای این بهینه‌سازی استفاده کرده‌اید. در یک سناریوی تولید واقعی، استفاده از توابعی مانند loadCSS که می‌تواند این رفتار را در خود جمع کرده و در مرورگرها به خوبی کار کند، روش خوبی است.
صفحه به دست آمده دقیقا مانند نسخه قبلی به نظر می‌رسد، حتی مانند وقتی است که بیشتر استایل‌ها به صورت غیر هم زمان بارگیری می‌شوند. در اینجا نحوه مشاهده استایل‌های درخواستی و درخواست ناهمزمان از فایل CSS در فایل HTML وجود دارد:

مانیتورینگ

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

به عنوان مرحله آخر، Lighthouse را در صفحه بهینه‌ شده اجرا کنید.
در این گزارش خواهید دید که صفحه FCP با 0.2s کاهش یافته است (20 درصد بهبود!):

پیشنهاد حذف منابع مسدود کننده دیگر در Opportunities نیست و اکنون به بخش Passed Audits تعلق دارد:

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

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

اگر به مطالعه در این زمینه علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات Core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای کسب‌وکار خود از منتوریکس، خدمات سئو و مشاوره دیجیتال مارکتینگ دریافت کنید. برای دریافت این مشاوره با ما تماس بگیرید.

تحریریه منتوریکس

این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.