قالب‌ها و افزونه‌های وردپرس معمولاً فایل‌های CSS اضافی به همراه دارند که سرعت بارگذاری سایت را کاهش می‌دهد. حذف CSS موارد اضافی وردپرس بدون هیچ آسیبی باعث بهبود عملکرد وردپرس، افزایش سرعت سایت و تجربه کاربری می شود.

CSS اضافی در وردپرس چیست؟

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

افزونه های وردپرس علاوه بر CSS قالب، CSS خود را نیز بارگذاری می کنند. به عنوان مثال، WooCommerce CSS را برای نمایش محصولات بارگیری می کند، یک افزونه صفحه ساز CSS خود را برای نمایش صفحات سفارشی شما اضافه می کند، و یک افزونه فرم ساز دارای CSS برای استایل دادن به فرم ها است. آیکون و… نیز فایل های CSS خود را اضافه می کنند.

این فایل ها معمولا بسیار کوچک هستند و به سرعت بارگذاری می شوند. با این حال، با جمع شدن این مقادیر کوچک، تعداد زیادی کد css استفاده نشده دارید که تأثیر قابل توجهی بر سرعت سایت خواهد داشت.

با استفاده از Google Pagespeed Insights، می‌توانید بررسی کنید که کد CSS استفاده نشده چگونه بر سایت شما تأثیر می‌گذارد. (ضد فیلتر خود را فعال کنید!)

بررسی وضعیت CSS اضافی در سایت

Google Pagespeed Insights تجربه واقعی کاربر و زمان بارگذاری سایت را شرح می دهد.

جزئیات در Google Pagespeed Insights

چگونه CSS اضافی را در یک سایت بررسی کنم؟

برای بررسی میزان فایل‌های CSS و JS (جاوا اسکریپت) در هر صفحه از سایت، می‌توانید فایل‌های CSS و JS که در صفحات سایت وردپرس بارگذاری شده‌اند را با ابزار Inspect مرورگر گوگل کروم و تب Network پیدا کنید.

CSS اضافی را با Site INSPECT بررسی کنید
در تصویر بالا می توانید نام فایل ها (Name)، نوع آن ها (Type)، اندازه (Size) و مدت زمان (Time) دانلود آنها را مشاهده کنید.

نحوه حذف CSS استفاده نشده در وردپرس

وردپرس برای حذف کامل تمام CSS های اضافی کمی مشکل است، اما در زیر ابزارهایی را معرفی می کنیم که می توانید از آنها برای حذف CSS اضافی از سایت خود استفاده کنید.

1. حذف CSS اضافی در وردپرس با استفاده از افزونه WP Rocket

اولین راه برای حذف CSS اضافی استفاده از افزونه WP Rocket است. این ساده ترین راه برای حذف فایل های CSS اضافی است.

افزونه WP Rocket به طور خودکار 80٪ از بهترین روش ها را برای بهبود عملکرد و افزایش امتیازات Core Web Vitals اعمال می کند. 🚀

برای حذف کدهای CCS استفاده نشده با افزونه Rocket، این مراحل را دنبال کنید:

  • ابتدا باید افزونه WP Rocket را نصب و فعال کنید.
  • پس از فعال سازی، باید به صفحه بروید تنظیمات WP Rocket و به هدر بهینه سازی فایل من دارم میروم

CSS اضافی را در وردپرس با افزونه Rocket حذف کنید

  • سپس به قسمت CSS Files و سپس نوار کناری بروید گزینه ای برای بهینه سازی تحویل CSS را بررسی کنید.
  • پس از فعال کردن گزینه حذف CSS بی ارزششما می توانید نام فایل های CSS، شناسه ها یا کلاس هایی را که نباید حذف شوند در کادر زیر مشخص کنید.
  • دکمه ذخیره تغییرات را انتخاب کنید

تنظیمات افزونه Rocket برای حذف CSS اضافی در وردپرس

با این تنظیم علاوه بر حذف CSS اضافی، کش وب سایت شما را به صورت خودکار پاک می کند. پس از اتمام کار، می‌توانید با استفاده از Google Pagespeed Insights عملکرد وب‌سایت خود را دوباره آزمایش کنید.
برای آشنایی با نحوه کار با این افزونه مقاله آموزش پلاگین Rocket از دست نده

2. CSS اضافی را در وردپرس با استفاده از افزونه Asset CleanUp حذف کنید

افزونه Asset CleanUp Pro یک افزونه بسیار قدرتمند برای حذف کدهای اضافی CSS در وردپرس است. افزونه کاهش سایز سایت Asset CleanUp به شما این امکان را می دهد که به راحتی هر CSS استفاده نشده را از هر صفحه وب سایت وردپرس خود حذف کنید و سرعت سایت خود را افزایش دهید.

برای حذف کدهای CCS استفاده نشده با استفاده از افزونه پاک کننده، مراحل زیر را انجام دهید:

  • ابتدا باید افزونه Asset Cleanup را نصب و فعال کنید.
  • پس از فعال سازی افزونه، به تب حالت تست در قسمت تنظیمات بروید. از اینجا باید گزینه Enable Test Mode را فعال کنید. فعال کردن حالت تست به شما این امکان را می دهد که به عنوان یک مدیر سایت تنظیمات مختلف را بدون نمایش آنها به بازدیدکنندگان وب سایت آزمایش کنید.

CSS اضافی را در وردپرس با استفاده از افزونه Asset CleanUp حذف کنید

  • سپس به بخش CSS/JS Manager مراجعه کنید. از اینجا می‌توانید از بارگیری فایل‌های CSS و جاوا اسکریپت ناخواسته به صورت صفحه به صفحه جلوگیری کنید.

تنظیمات افزونه Asset CleanUp

CSS & JS MANAGER ابتدا صفحه اصلی شما را واکشی می کند و تمام فایل های CSS و جاوا اسکریپت بارگذاری شده در آن صفحه را به شما نشان می دهد.

باید اسکرول کنید و فایل های آپلود شده را بررسی کنید. اگر فایلی را مشاهده کردید که به آن نیاز ندارید، می توانید آن را برای آن صفحه خاص، پست یا کل سایت بارگذاری کنید.

نحوه پاکسازی CSS اضافی با افزونه Cleanup

افزونه Asset CleanUp هنگامی که یک بازدیدکننده صفحه ای را در وب سایت شما مشاهده می کند، به طور خودکار تمام فایل های آپلود شده را استخراج و فهرست می کند، سپس می توانید به سادگی فایل های CSS یا جاوا اسکریپت استفاده نشده را که نیازی ندارید، بارگیری کنید.

پس از دانلود و حذف فایل های استفاده نشده CSS و جاوا اسکریپت، می توانید به صفحه تنظیمات افزونه برگردید و حالت تست را خاموش کنید.

برای ذخیره تغییرات روی دکمه به‌روزرسانی همه تنظیمات کلیک کنید.

3. بهینه سازی دستی افزونه وردپرس

سبک هایی را که می خواهید غیرفعال کنید با استفاده از Inspect انتخاب کنید. سپس با افزودن کد زیر به فایل functions.php تم یا افزونه سایت خود آن را جایگزین کنید. توجه داشته باشید که این حذف بر روی ویژگی های قالب و افزونه مورد نظر تاثیر می گذارد و باید CSS مورد نیاز را به صورت سفارشی اضافه کنید.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {

wp_deregister_style( 'gdwpm_styles-css' );

}

حذف CSS موارد اضافی وردپرس این به شما کمک می کند تأثیر عملکرد کد خود را به حداقل برسانید. افزونه WP Rocket و افزونه Asset Cleanup می تواند به شما کمک کند سرعت سایت خود را افزایش دهید و مشکلات سرعت را به راحتی برطرف کنید!