بخش فرصتها در گزارش Lighthouse شما، تمام شیوهنامههای دارای CSS استفادهنشده را با صرفهجویی بالقوه 2 کیلوبایت یا بیشتر فهرست میکند. CSS استفاده نشده را حذف کنید تا بایت های غیر ضروری مصرف شده توسط فعالیت شبکه کاهش یابد:
استفاده از تگ <link>
روشی متداول برای افزودن سبک به صفحه است:
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet" />
...
</head>
</html>
فایل main.css
که مرورگر دانلود می کند به عنوان یک شیوه نامه خارجی شناخته می شود، زیرا جدا از HTML که از آن استفاده می کند ذخیره می شود.
بهطور پیشفرض، یک مرورگر باید قبل از اینکه بتواند محتوایی را در صفحه کاربر نمایش دهد یا نمایش دهد، همه شیوهنامههای خارجی را که با آن مواجه میشود دانلود، تجزیه و پردازش کند. منطقی نیست که یک مرورگر سعی کند محتوا را قبل از پردازش شیوه نامه ها نمایش دهد، زیرا شیوه نامه ها ممکن است حاوی قوانینی باشد که بر استایل صفحه تأثیر می گذارد.
هر شیوه نامه خارجی باید از شبکه دانلود شود. این سفرهای اضافی شبکه می تواند مدت زمانی را که کاربران باید قبل از دیدن محتوایی روی صفحه نمایش خود منتظر بمانند، به میزان قابل توجهی افزایش دهد.
CSS استفاده نشده همچنین ساخت درخت رندر توسط مرورگر را کند می کند. درخت رندر مانند درخت DOM است، با این تفاوت که شامل استایل های هر گره نیز می شود. برای ساختن درخت رندر، یک مرورگر باید کل درخت DOM را طی کند و بررسی کند که کدام قوانین CSS برای هر گره اعمال می شود. هرچه CSS استفاده نشده بیشتر باشد، ممکن است مرورگر به طور بالقوه به زمان بیشتری برای محاسبه سبکهای هر گره نیاز داشته باشد.
برگه Coverage در Chrome DevTools می تواند به شما کمک کند CSS مهم و غیر انتقادی را کشف کنید. مشاهده CSS استفاده شده و استفاده نشده با برگه Coverage را ببینید.
مشابه کد دروننویسی در تگ <script>
، سبکهای بحرانی درون خطی برای اولین نقاشی در داخل بلوک <style>
در head
صفحه HTML مورد نیاز است. سپس بقیه سبک ها را با استفاده از پیوند preload
به صورت ناهمزمان بارگذاری کنید.
خودکارسازی فرآیند استخراج و درونبندی CSS «بالای تا» را با استفاده از ابزار Critical در نظر بگیرید.
در Defer non-critical CSS بیشتر بیاموزید.
حذف قوانین استفاده نشده CSS را در نظر بگیرید. فقط کتابخانه های دروپال مورد نیاز را به صفحه یا مؤلفه مربوطه در یک صفحه وصل کنید. برای جزئیات بیشتر به تعریف کتابخانه مراجعه کنید.
تعداد افزونههای جوملا را که CSS استفاده نشده را در صفحه شما بارگیری میکنند، کاهش دهید یا تغییر دهید.
تعداد افزونه های وردپرس را که CSS استفاده نشده را در صفحه شما بارگیری می کنند، کاهش دهید یا تغییر دهید.