نحوه حذف CSS استفاده نشده در وردپرس (2 روش آسان)

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

خوشبختانه، این فرآیند ساده تر از آن چیزی است که فکر می کنید. 🌞 هنگامی که کدهای غیر ضروری را در سایت خود شناسایی کردید، می توانید از یک افزونه برای حذف آن و بهبود سرعت سایت خود استفاده کنید.

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

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

سپس، هنگامی که یک کاربر به وب سایت شما دسترسی پیدا می کند، مرورگر همچنان باید این CSS استفاده نشده را دانلود و رندر کند. این می تواند به زمان بارگذاری طولانی تر کمک کند، که تأثیر منفی بر عملکرد کلی سایت شما خواهد داشت.

در واقع، CSS استفاده نشده می تواند منجر به امتیاز ضعیف Largest Contentful Paint (LCP) در Core Web Vitals شود:

Largest Contentful Paint معیاری است که مدت زمانی را که طول می کشد تا یک صفحه به طور کامل بزرگترین آیتم را روی صفحه بارگیری کند، اندازه گیری می کند. این معمولا یک عنصر بصری است، مانند تصویر قهرمان.

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

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

چگونه CSS استفاده نشده را در سایت خود شناسایی کنیم

خبر خوب این است که شناسایی CSS استفاده نشده در سایت شما کار آسانی است. می توانید با اجرای یک تست عملکرد شروع کنید PageSpeed ​​Insights. تنها کاری که باید انجام دهید این است که URL خود را وارد کرده و روی آن کلیک کنید تجزیه و تحلیل:

پس از آماده شدن آزمون، به مسیر بروید فرصت ها بخش و به دنبال CSS استفاده نشده را کاهش دهید برگه اگر روی آن کلیک کنید، اطلاعات بیشتری در مورد این کد خواهید دید:

همچنین به شما نشان می دهد که کدام فایل ها و افزونه های CSS بر زمان بارگذاری شما تأثیر می گذارند:

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

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

اگر PageSpeed ​​Insights CSS بلااستفاده را در سایت شما علامت گذاری کرده است، باید آن را حذف کنید تا عملکرد سایت خود را بهینه کنید.

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

روش 1: CSS استفاده نشده را با Debloat حذف کنید

همانطور که بحث کردیم، CSS “استفاده نشده” ضروری نیست. بنابراین، حذف این فایل ها هیچ تاثیری در طراحی صفحات وب شما نخواهد داشت.

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

با در نظر گرفتن این موضوع، Debloat را برای حذف کدهای CSS استفاده نشده توصیه می کنیم. این یک افزونه بهینه‌سازی رایگان است که می‌تواند به شما کمک کند تا Core Web Vitals خود را با تأخیر در منابع مسدود کردن رندر، کوچک کردن کد و موارد دیگر بهبود بخشید.

برای شروع، باید افزونه را در سایت خود نصب و فعال کنید. سپس برو به تنظیمات > Debloat: بهینه سازی و انتخاب کنید بهینه سازی تب CSS:

در بالا، پیامی را مشاهده می کنید که به شما توصیه می کند در صورتی که قصد حذف CSS استفاده نشده را دارید از یک افزونه کش استفاده کنید. اگر این مورد علاقه شماست، ممکن است ابزار رایگانی مانند W3 Total Cache یا WP-Optimize را امتحان کنید.

سپس به پایین صفحه بروید و کادر را علامت بزنید CSS استفاده نشده را حذف کنید:

این چندین گزینه دیگر را نشان می دهد. با این حال، اگر با مدیریت کد راحت نیستید، نگران نباشید، فقط باید چند تنظیمات را انتخاب کنید.

می‌خواهید کادرهای مربوطه را علامت بزنید برای پلاگین CSS فعال کنید و برای تم CSS فعال کنید:

سپس، به پایین بروید CSS را روشن کنید و کادر مربوطه را انتخاب کنید تمام صفحات:

وقتی آماده شدید، روی آن کلیک کنید ذخیره تغییرات. سپس این افزونه CSS استفاده نشده را در افزونه و فایل‌های تم شما حذف می‌کند.

توجه داشته باشید که این روش 100% دقیق نیست و ممکن است برخی از کدهای استفاده نشده از بین برود. با این حال، اگر بعد از فعال کردن این تنظیمات، تست سرعت دیگری را اجرا کنید، باید شاهد بهبود قابل توجهی در عملکرد سایت خود باشید.

اگر می خواهید از افزونه قدرتمندتری استفاده کنید، ممکن است بخواهید آن را بررسی کنید WP Rocket. این ابزار ممتاز با ویژگی‌های بهینه‌سازی، از جمله ذخیره صفحه و مرورگر، فشرده‌سازی GZIP، کوچک‌سازی کد و بارگذاری تنبل همراه است. همچنین می تواند CSS استفاده نشده را از سایت شما حذف کند.

روش 2: CSS استفاده نشده را با Asset CleanUp حذف کنید

در روش اول از افزونه ای استفاده کردیم که به صورت خودکار کدهای غیر ضروری را از سایت شما حذف می کرد. این روش بسیار راحت است، زیرا تنها کاری که باید انجام دهید این است که چند تنظیمات را فعال کنید.

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

توجه داشته باشید که این روش ممکن است کمی زمان بر باشد و ممکن است به دانش فنی نیاز داشته باشد. به علاوه، باید دائماً هر صفحه را آزمایش و به روز کنید تا مطمئن شوید که تغییرات شما بر طراحی و عملکرد سایت شما تأثیری نداشته است.

مرحله 1: افزونه Asset CleanUp را نصب کرده و حالت تست را فعال کنید

اگر همچنان می خواهید این روش را امتحان کنید، پیش بروید و Asset CleanUp را در سایت خود نصب کنید. سپس برو به پاکسازی دارایی > تنظیمات. پس از آن، انتخاب کنید حالت آزمون از منوی کناری استفاده کنید و برای فعال کردن این ویژگی از کلید سوئیچ استفاده کنید:

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

مرحله 2: فایل های CSS استفاده نشده را در هر صفحه بارگیری کنید

حال، روی آن کلیک کنید مدیر CSS و JS برگه در اینجا، می توانید هر فایل ناخواسته را از سایت خود حذف کنید، از صفحه اصلی شروع کنید:

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

برای حذف یک فایل CSS، فقط باید از سوئیچ تغییر جهت استفاده کنید در این صفحه بارگیری کنید:

Asset CleanUp به شما اطلاع می‌دهد که آیا فایل‌های «کودکی» وابسته به این فایل هستند و ممکن است با حذف آن تحت تأثیر قرار گیرند. می توانید کادر را علامت بزنید قاعده وابستگی را نادیده بگیرید و «فرزندان» را سرحال نگه دارید برای نگهداری این فایل ها

به خاطر داشته باشید، اگر مطمئن نیستید که کدام فایل های CSS را حذف کنید، می توانید به نتایج خود در PageSpeed ​​Insights مراجعه کنید. URL این فایل ها را در زیر می بینید CSS استفاده نشده را کاهش دهید بخش:

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

پس از انتخاب فایلی که می خواهید بارگیری کنید، باید روی آن کلیک کنید به روز رسانی به منظور ذخیره این تغییرات

مرحله 3: سایت خود را تست کنید

در نهایت، توصیه می کنیم پس از هر بار حذف فایل، سایت خود را تست کنید تا مطمئن شوید که به درستی کار می کند. به یاد داشته باشید که برای مشاهده این تغییرات باید به داشبورد مدیریت وردپرس خود وارد شوید. اگر به عنوان یک بازدید کننده به سایت دسترسی داشته باشید (یعنی یک کاربر از سیستم خارج شده)، نمی توانید هیچ مشکلی را در صفحه خود مشاهده کنید زیرا حالت تست را فعال کرده اید.

همچنین توجه به این نکته مهم است که تا زمانی که حالت تست را فعال کرده باشید، هیچ پیشرفتی در PageSpeed ​​Insights مشاهده نخواهید کرد. نتایج همچنان فایل های CSS استفاده نشده را نمایش می دهد.

هنگامی که مطمئن شدید که فایل های حذف شده روی سایت شما تأثیری نداشته است، می توانید ادامه دهید و حالت تست را غیرفعال کنید. سپس، یک تست سرعت در PageSpeed ​​Insights اجرا کنید. در این مرحله، فایل های CSS حذف شده نباید در نتایج ظاهر شوند.

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

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

دو تا از بهترین گزینه ها هستند WP Rocket (از 59 دلار) و فلاینگ پرس (از 60 دلار).

با WP Rocket، یک ویژگی CSS استفاده نشده را با یک کلیک حذف می کنید که کل سایت شما را اسکن می کند و CSS استفاده نشده را به صورت صفحه به صفحه حذف می کند.

FlyingPress همچنین یک کلیک مشابه حذف CSS بدون استفاده را ارائه می دهد، با گزینه هایی برای بارگیری CSS استفاده نشده به روش های بهینه تر یا حذف کامل آن.

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

چند نکته دیگر برای کمک به کاهش CSS استفاده نشده

هنگامی که CSS استفاده نشده را در سایت خود حذف کردید (یا حداقل بیشتر آن)، باید از افزودن کدهای غیرضروری بیشتر در آینده اجتناب کنید. در این زمینه، چندین کار وجود دارد که می توانید انجام دهید تا سایت خود را روان نگه دارید.

ابتدا، باید مطمئن شوید که از یک تم سبک استفاده می کنید. به طور کلی، یک پوسته سبک وردپرس یک پوسته وردپرس سریع است. به زبان ساده، موضوع شما باید حاوی حداقل کد باشد و برای Core Web Vitals بهینه شده باشد.

برای مثال، تم Neve ما سرعت و عملکرد را در اولویت قرار می‌دهد. در واقع، در نصب پیش فرض وردپرس، بارگیری این موضوع کمتر از 1 ثانیه طول می کشد و حجم فایل 28 کیلوبایت دارد:

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

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

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

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

امروز CSS استفاده نشده را از وب سایت خود حذف کنید 🚀

با حذف آن از سایت خود، می توانید عملکرد Core Web Vitals خود را بهبود بخشید و تجربه کاربری بهتری را ارائه دهید.

برای جمع بندی، در اینجا نحوه حذف CSS استفاده نشده در وردپرس آورده شده است:

😎 برای برخی از راه‌های دیگر برای بهبود معیارهای Core Web Vitals سایت خود، می‌توانید راهنماهای ما را در مورد چگونگی سرعت بخشیدن به بزرگترین رنگ محتوا و نحوه کاهش تغییر چیدمان تجمعی بخوانید.

آیا در مورد نحوه حذف CSS استفاده نشده در وردپرس سوالی دارید؟ در بخش نظرات زیر به ما اطلاع دهید!