کوچک کردن CSS وردپرس و حذف سبک‌های بی‌استفاده

در این مقاله قصد داریم تا در مورد آموزش رفع خطا Minify CSS در Gtmetrix وب سایت های وردپرس به شما کاربران عزیز توضیح بدهیم، اگر شما در حال تست سرعت وب سایت خود هستید، به احتمال زیاد خطا Minify CSS به صورت قرمز رنگ در لیست نتایج سایت Gtmetrix شما نمایش داده می شود. در ادامه به شما آموزش خواهیم داد که چگونه می توانید در کمتر از حدود 5 دقیقه این مشکل را رفع نمایید.

این خطا هنگامی ایجاد می شود که فایل های CSS شما توضیحات و یا فاصله های اضافی داشته باشند، معمولا در فایل های CSS پوسته ها و افزونه های وردپرس و یا هسته وردپرس توضیحات (Comment) شامل نسخه قالب و آخرین ویرایش و طراح آن نوشته شده است و بین کد های آن از فاصله برای نظم بیشتر و جستجو بهتر بین کد ها استفاده شده است. در حالی که مرورگر هیچ نیازی به این موارد ندارد.

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

> قبل از هر تغییری از محتوا وب سایت خود بک آپ تهیه کنید.

روش اول : شما می توانید از ابزار آنلاین csscompressor استفاده نمایید، پس از باز کردن این سایت در قسمت CSS Compressor محتوا فایل css خود را وارد نمایید و گزینه Highest (no readability, smallest size) را انتخاب کنید سپس روی Compress کلیک کنید تا فایل جدید را دانلود کنید و سپس در هاست خود آپلود نمایید.

روش دوم : در سایت Gtmetrix روی خطا Minify CSS کلیک کنید و سپس مانند تصویر زیر فایل فشرده شده CSS را دانلود نمایید :

شما همچنین می توانید از افزونه وردپرس Better WordPress Minify استفاده نمایید، همچنین افزونه های کش مانند WP Fastest Cache نیز امکان minify کردن CSS را دارند.

منتظر نظرات ارزشمند شما هستیم …

اندازهٔ انتقال CSS و زمان نمایش محتوای اول را اندازه بگیرید. منابع قالب و افزونه‌ها را جدا کنید و از چند ابزار minify هم‌زمان استفاده نکنید.

کلاس‌های منو، فرم، modal، hover و اندازه‌های موبایل ممکن است در HTML اولیه دیده نشوند. آن‌ها را در فهرست محافظت قرار دهید.

بعد از minify و پاک‌سازی، صفحهٔ خانه، محصول، مقاله، منو و فوتر را در چند عرض بررسی کنید. CSS اصلی را برای برگشت نگه دارید.

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

کوچک کردن فاصله‌های CSS با حذف قواعد متفاوت است. در حذف سبک بی‌استفاده، منوی بازشونده، پیام خطای فرم و پنجرهٔ خرید را نیز بررسی کنید؛ این حالت‌ها ممکن است هنگام تحلیل صفحهٔ اولیه دیده نشده باشند. اگر فقط ظاهر یک حالت خراب شده است، همان قاعده یا فایل را برگردانید و فشرده‌سازی همهٔ سایت را علت قطعی فرض نکنید.