۳ روش ساده رفع خطا reduce unused CSS در وردپرس!

اگر به دلیل CSS استفاده نشده یا unused CSS، امتیاز پایینی که در ابزار GT metrix گرفته‌اید و تخصص برنامه‌نویسی ندارید، جای نگرانی نیست. ما در این مقاله از لیمومگ، همه چیز درباره‌ی خطای reduce unused CSS در وردپرس را به شما خواهیم گفت. در ابتدا با این خطا و علل بروزش آشنا خواهید شد و در ادامه ۳ روش ساده‌ی برطرف کردن این مشکل را معرفی خواهیم کرد.

reduce unused CSS چیست؟

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

چرا باید CSS استفاده نشده را حذف کنید؟

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

روش حذف دستی reduce unused CSS

اگر از مرورگر کروم استفاده می‌کنید، تب DevTools ابزار مفیدی دارد که به شما امکان می‌دهد ببینید چه کدی در صفحه‌ای اجرا می‌شود اما بلا استفاده است. برای دسترسی به این ابزار مراحل زیر را دنبال کنید:

1. Chrome DevTools را باز کنید.
2. منوی فرمان را با کلیدهای میانبر cmd + shift + p باز کنید.
3. عبارت Coverage را تایپ کرده و روی گزینه Show Coverage کلیک کنید.
4. یک فایل CSS را از تب Coverage انتخاب کنید.
5. این فایل  در برگه Sources باز می‌شود.
   

خط سبز در کنار CSS‌، یعنی کدها اجرا می‌شود. خط قرمز یعنی کد اجرا نمی‌شود. یک خط کد که هم قرمز و هم سبز است، به این معنی است که فقط برخی از کدها در آن خط اجرا می شوند.

ابزارهای توسعه reduce unused CSS

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

حذف reduce unused CSS با استفاده از ابزارها

گرچه حذف CSS استفاده نشده ساده‌ترین راه است اما بهترین راه نیست. با استفاده از ابزارهای مختلفی که برای خودکارسازی فرآیند طراحی‌شده‌اند، می‌توان این وضع را بهبود بخشید. اجازه بدهید سه نمونه از بهترین ابزارهای حذف reduce unused CSS را بررسی کنیم.

اکثر توسعه دهندگان کارهای بهتری نسبت به حذف یک به یک قوانین CSS استفاده نشده دارند. به همین دلیل است که ابزارهای مختلفی برای خودکارسازی فرآیند طراحی شده است. در اینجا مروری بر محبوب ترین ابزارهای طراحی شده برای کمک به توسعه دهندگان وب برای حذف CSS استفاده نشده از پروژه های وب خود آورده شده است:

۱.‌ ابزار UnusedCSS

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

۲. ابزار PurifyCSS

اگر دنبال ابزار رایگانی برای مدیریت Cssهای استفاده نشده‌ هستید، PurifyCSS بهترین است. این ابزار CSS استفاده نشده را از فایل های HTML، PHP، جاوا اسکریپت و CSS شما، حذف می کند. تنها نکته‌ی منفی‌اش این است که باید به صورت دستی، فایل ها را یک به یک انتخاب اسکن کنید، که خب ممکن است خسته کننده باشد. PurifyCSS به جای اصلاح فایل‌های اصلی، یک فایل جدید را با CSS بهینه‌سازی شده به شما خروجی می‌دهد. از آنجایی که این ابزار با وب سایت های زنده کار نمی کند، باید از آن در تنظیمات توسعه استفاده کنید. ممکن است بخواهید از PurifyCSS در طول توسعه استفاده کنید و بعداً به UnusedCSS ارتقا دهید.

۳. ابزار PurgeCSS#

PurgeCSS برادر جوان‌تر  PurifyCSS است. یعنی شباهت زیادی به ابزار قبلی دارد، اما استفاده از آن کمی ساده‌تر و بصری‌تر است. این ابزار محتوای شما را با فایل های CSS مقایسه و سپس سلکتورهایی که مطابقت ندارند را حذف می‌کند. بازهم نقطه ضعف اصلی این ابزار، دستی بودن روند تهیه لیست سفید از CSS های درست است.

روش حذف خودکار  unused CSS

اگر از ابزارهای رایگان استفاده می‌کنید، بایستی برخی از مراحل را برای حذف خودکار CSS استفاده نشده و همچنین فشرده‌سازی ریزالت‌ها طی کنید:

۱. Node.js# را نصب کنید

آخرین نسخهNode.js  را از وب سایتش دانلود کنید و دستورالعمل های نصب را دنبال کنید.

۲.  Grunt# را نصب کنید

Node.js را باز کنید و موارد زیر را در خط فرمان وارد کنید:

npm install -g grunt-cli

Grunt باید به صورت خودکار دانلود و نصب شود.

۳. پوشه پروژه خود را باز کنید

با استفاده از خط فرمان Node.js، به پوشه حاوی فایل‌هایی که می‌خواهید UnCSS اسکن کند، بروید. با وارد کردن مسیر فایل می توانید این کار را انجام دهید. مثلاً:

cd C:TestProject

۴. UnCSS و CSSMin# را نصب کنید

موارد زیر را در خط فرمان Node.js وارد کنید:

npm install grunt-uncss grunt-contrib-cssmin --save-dev

UnCSS و بسته CSSMin در پوشه پروژه مشخص شده نصب خواهند شد.

۵. یک فایل #gruntfile.js ایجاد کنید

یک فایل جاوا اسکریپت به نام gruntfile.js در فهرست اصلی پروژه خود ایجاد کنید. gruntfile.js به عنوان یک فایل پیکربندی برای افزونه هایی مانند UnCSS عمل می کند. این کد را در خط فرمان Node.js وارد کنید:

module.exports = function (grunt) {
    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'cleancss/tidy.css' }
                ]
            }
        },
        cssmin: {
            dist: {
                files: [
                    { src: 'cleancss/tidy.css', dest: 'cleancss/tidy.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks
    grunt.registerTask('default', ['uncss', 'cssmin']);
};

دستورالعمل های بالا به UnCSS می گویند که فایل index.html شما را برای CSS استفاده نشده اسکن کند و یک فایل CSS کوتاه شده در داخل پوشه ای به نام cleancss ایجاد کند. سپس افزونه CSSmin  فایل CSS جدید را که به طور پیش فرض tidy.css نامیده می شود را کوچک می کند. چند خط آخر از آنجایی که هر دو پلاگین را بارگیری و ثبت می کنند بسیار مهم هستند.

۶. Grunt# را اجرا کنید

در نهایت، باید به پوشه فایل منبع خود برگردید و Grunt را به این صورت اجرا کنید:

cd C:TestProject>grunt

این اقدام باید UnCSS و CSSmin را وارد عمل کند. اگر همه کارها را به درستی انجام داده باشید، یک فایل CSS تمیز و کوچک شده در پوشه مشخص شده در انتظار شما خواهد بود. برخی از توسعه دهندگان ادعا کرده اند که این روش حجم فایل های CSS آنها را بیش از ۹۵ درصد کاهش داده است!  شما فقط باید یک بار فرآیند راه‌اندازی را انجام دهید. برای استفاده‌های بعدی، فقط باید Grunt را اجرا کنید تا به طور خودکار پروژه خود را از CSS استفاده نشده پاک کنید.

سخن پایانی 

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