عبارت Optimize the order of styles and scripts در گزارش‌های قدیمی ابزارهای سرعت دیده می‌شود، اما هدف واقعی سریع‌ترشدن نمایش و تعامل صفحه است. قانون «همه CSS بالا و همه JS پایین» برای هر سایت کافی و ایمن نیست. ابتدا گزارش فعلی، waterfall و وابستگی‌ها را ببینید و تغییر را با رفتار واقعی صفحه بسنجید.
چرا ترتیب اهمیت دارد؟
مرورگر برای نمایش، HTML و CSS را پردازش می‌کند و بعضی اسکریپت‌های همگام می‌توانند ادامه parsing را متوقف کنند. CSS موردنیاز ظاهر اولیه نیز در مسیر رندر نقش دارد. حذف یا عقب‌انداختن نادرست stylesheet ممکن است ابتدا صفحه بدون سبک یا با جابه‌جایی شدید نشان دهد؛ کم‌شدن تعداد فایل به‌تنهایی معیار موفقیت نیست.
از یک صفحه و شرایط ثابت شروع کنید
- نمونه‌ای با قالب واقعی و امکانات مهم مانند منو و فرم انتخاب کنید.
- مکان آزمون، دستگاه، وضعیت cache و ورود کاربر را ثابت نگه دارید.
- فایل‌های بزرگ، درخواست‌های زنجیره‌ای و زمان اجرای JavaScript را مشخص کنید.
- فقط یک دسته تغییر اعمال و قبل و بعد را با چند اجرا مقایسه کنید.
CSS را هدفمند سبک کنید
استایل بلااستفاده را با آزمون همه حالت‌های لازم حذف کنید؛ صفحه بسته منو، حالت باز منو را نشان نمی‌دهد. critical CSS فقط وقتی مفید است که درست استخراج و همراه تغییر قالب به‌روز شود. یک فایل عظیم inline برای همه صفحه‌ها می‌تواند cache و نگهداری را بدتر کند. فونت و تصویر اصلی صفحه را نیز در تحلیل دخیل کنید.
در وردپرس وابستگی‌ها را حفظ کنید
فایل‌ها باید از مسیر enqueue و با dependency درست ثبت شوند. حذف همه stylesheetها یا جابه‌جایی jQuery بدون شناخت مصرف‌کننده‌ها می‌تواند فرم، صفحه‌ساز و فروشگاه را خراب کند. تنظیم یک افزونه بهینه‌سازی را با فیلتر عمومی افزونه دیگر ترکیب نکنید؛ مالک هر تبدیل مشخص باشد.
آزمون پس از تغییر
- نمایش اولیه و جابه‌جایی layout در موبایل بررسی شود.
- منو، فرم، جستجو، گالری و در صورت وجود پرداخت آزمایشی کار کنند.
- کنسول خطای تازه و Network فایل 404 نداشته باشد.
- بهبود زمان نمایش با افزایش خطای تعامل یا شکستن صفحه خرید معاوضه نشده باشد.
- هدف نمره صد یا تضمین رتبه نیست؛ تجربه قابل اندازه‌گیری کاربر ملاک است.
مطالعه مرتبط
منابع و مستندات
بازبینی محتوا و منابع: ۲۶ مهر ۱۴۰۵.
