بخش فرصت‌ها در گزارش Lighthouse شما، تمام URLهایی را فهرست می‌کند که اولین رنگ صفحه شما را مسدود می‌کنند. هدف کاهش تأثیر این URL های مسدودکننده رندر با درون خط کردن منابع مهم، به تعویق انداختن منابع غیر مهم و حذف هر چیزی که استفاده نشده است، است.
کدام URL ها به عنوان منابع مسدودکننده رندر پرچم گذاری می شوند؟
Lighthouse دو نوع URL مسدودکننده رندر را علامت گذاری می کند: اسکریپت ها و شیوه نامه ها.
یک تگ <script> که:
- در
<head>سند است. - ویژگی
deferندارد. - ویژگی
asyncندارد.
یک برچسب <link rel="stylesheet"> که:
- ویژگی
disabledندارد. وقتی این ویژگی وجود دارد، مرورگر شیوه نامه را دانلود نمی کند. - ویژگی
mediaندارد که به طور خاص با دستگاه کاربر مطابقت داشته باشد.media="all"به عنوان مسدود کننده رندر در نظر گرفته می شود.
نحوه شناسایی منابع حیاتی
اولین قدم برای کاهش تأثیر منابع مسدودکننده رندر، شناسایی موارد مهم و غیر ضروری است. از تب Coverage در Chrome DevTools برای شناسایی CSS و JS غیر بحرانی استفاده کنید. وقتی صفحه ای را بارگیری یا اجرا می کنید، برگه به شما می گوید که چه مقدار کد استفاده شده است، در مقابل چقدر بارگذاری شده است:
شما می توانید اندازه صفحات خود را تنها با ارسال کد و سبک مورد نیاز خود کاهش دهید. برای بررسی آن فایل در پنل منابع، روی یک URL کلیک کنید. سبک ها در فایل های CSS و کدهای موجود در فایل های جاوا اسکریپت در دو رنگ مشخص می شوند:
- سبز (بحرانی): سبک هایی که برای اولین رنگ مورد نیاز هستند. کدی که برای عملکرد اصلی صفحه حیاتی است.
- قرمز (غیر انتقادی): سبک‌هایی که برای محتوایی اعمال می‌شوند که بلافاصله قابل مشاهده نیستند. کد در عملکرد اصلی صفحه استفاده نمی شود.
نحوه حذف اسکریپت های مسدود کننده رندر
هنگامی که کد حیاتی را شناسایی کردید، آن کد را از URL مسدودکننده رندر به یک تگ script درون خطی در صفحه HTML خود منتقل کنید. هنگامی که صفحه بارگیری می شود، آنچه را که برای مدیریت عملکرد اصلی صفحه نیاز دارد، خواهد داشت.
اگر کدی در URL مسدودکننده رندر وجود دارد که مهم نیست، می‌توانید آن را در URL نگه دارید و سپس URL را با ویژگی‌های async یا defer علامت‌گذاری کنید (همچنین به افزودن تعامل با جاوا اسکریپت مراجعه کنید).
کدی که اصلا استفاده نمی شود باید حذف شود ( به حذف کد استفاده نشده مراجعه کنید).
نحوه حذف استایل شیت های مسدودکننده رندر
مشابه کد درون‌نویسی در تگ <script> ، سبک‌های بحرانی درون خطی برای اولین نقاشی در داخل بلوک <style> در head صفحه HTML مورد نیاز است. سپس بقیه استایل ها را به صورت ناهمزمان با استفاده از پیوند preload بارگذاری کنید ( به تعویق CSS استفاده نشده مراجعه کنید).
خودکارسازی فرآیند استخراج و درون‌بندی CSS «بالای تا» را با استفاده از ابزار Critical در نظر بگیرید.
یکی دیگر از روش‌های حذف سبک‌های مسدودکننده رندر، تقسیم آن سبک‌ها به فایل‌های مختلف است که توسط پرس و جو رسانه سازمان‌دهی شده‌اند. سپس یک ویژگی رسانه را به هر پیوند صفحه سبک اضافه کنید. هنگام بارگیری یک صفحه، مرورگر فقط اولین رنگ را برای بازیابی شیوه نامه هایی که با دستگاه کاربر مطابقت دارند مسدود می کند (به Render-Blocking CSS مراجعه کنید).
در نهایت، می‌خواهید CSS خود را کوچک کنید تا فضای خالی یا کاراکتر اضافی حذف شود ( به کوچک کردن CSS مراجعه کنید). این تضمین می کند که شما کوچکترین بسته ممکن را برای کاربران خود ارسال می کنید.
راهنمایی مخصوص پشته
AMP
از ابزارهایی مانند AMP Optimizer برای رندر کردن طرح‌بندی‌های AMP در سمت سرور استفاده کنید.
دروپال
استفاده از یک ماژول برای درون‌سازی CSS و جاوا اسکریپت حیاتی را در نظر بگیرید و از ویژگی defer برای CSS یا جاوا اسکریپت غیر بحرانی استفاده کنید.
جوملا
تعدادی پلاگین جوملا وجود دارد که می تواند به شما کمک کند دارایی های حیاتی را درون خطی کنید یا منابع کمتر مهم را به تعویق بیندازید .
وردپرس
تعدادی افزونه وردپرس وجود دارد که می تواند به شما کمک کند دارایی های حیاتی را درون خطی کنید یا منابع کمتر مهم را به تعویق بیندازید .