بخش فرصتها در گزارش Lighthouse شما، تمام URLهایی را که اولین نمایش صفحه شما را مسدود میکنند، فهرست میکند. هدف، کاهش تأثیر این URLهای مسدودکننده رندر با درونخطی کردن منابع حیاتی، به تعویق انداختن منابع غیرحیاتی و حذف هر چیز بلااستفاده است.
کدام 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 بارگذاری کنید (به بخش Defer unused CSS مراجعه کنید).
خودکارسازی فرآیند استخراج و درج CSS مربوط به بخش «بالای خط تا» با استفاده از ابزار Critical را در نظر بگیرید.
رویکرد دیگر برای حذف استایلهای مسدودکننده رندر، تقسیم آن استایلها به فایلهای مختلف است که بر اساس کوئری مدیا سازماندهی شدهاند. سپس یک ویژگی مدیا به هر لینک استایلشیت اضافه کنید. هنگام بارگذاری یک صفحه، مرورگر فقط اولین رنگ را مسدود میکند تا استایلشیتهایی را که با دستگاه کاربر مطابقت دارند بازیابی کند (به بخش Render-Blocking CSS مراجعه کنید).
در نهایت، باید CSS خود را کوچک کنید تا هرگونه فاصله یا کاراکتر اضافی حذف شود (به بخش کوچکسازی CSS مراجعه کنید). این کار تضمین میکند که کوچکترین بسته ممکن را برای کاربران خود ارسال میکنید.
راهنمایی مخصوص پشته
آمپر
از ابزارهایی مانند AMP Optimizer برای رندر کردن طرحبندیهای AMP در سمت سرور استفاده کنید.
دروپال
استفاده از یک ماژول برای درونخطی کردن CSS و جاوا اسکریپتهای مهم و استفاده از ویژگی defer برای CSS یا جاوا اسکریپتهای غیر مهم را در نظر بگیرید.
جوملا
تعدادی افزونه جوملا وجود دارد که میتوانند به شما در درونخطی کردن منابع حیاتی یا به تعویق انداختن منابع کماهمیتتر کمک کنند.
وردپرس
تعدادی افزونه وردپرس وجود دارد که میتوانند به شما کمک کنند منابع حیاتی را درونخطی کنید یا منابع کماهمیتتر را به تعویق بیندازید .