آیا می خواهید CSS استفاده نشده را در وردپرس حذف کنید تا سایت شما سریعتر بارگیری شود؟

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

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

CSS استفاده نشده در وردپرس چیست؟

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

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

با استفاده از Google Pagespeed Insights می توانید ببینید که کد CSS استفاده نشده بر روی وب سایت شما تأثیر می گذارد. این بخشی به شما نشان می دهد “حذف CSS بلااستفاده” با جزئیاتی که پرونده های CSS روی زمان بارگیری شما تأثیر می گذارند.

چرا CSS استفاده نشده در وردپرس اضافه می شود؟

CSS برای سبک سازی ظاهر وب سایت وردپرس شما استفاده می شود. قالب وردپرس شما شامل CSS است که بیشتر آن در یک فایل single.css گنجانده شده است.

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

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

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

چگونه CSS استفاده نشده را در وردپرس حذف کنیم؟

چند روش مختلف وجود دارد که می توانید CSS استفاده نشده را در وب سایت وردپرس خود کاهش دهید.

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

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

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

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

ما فکر می کنیم این بهترین راه حل برای مبتدیان است زیرا ساده تر است و به هدف اصلی ارائه تجربه بهتر برای کاربران شما دست می یابد. این بدان معنی است که وب سایت شما به سرعت در ابزار تست سرعت بارگیری می شود و همچنین برای کاربران شما احساس سریع می کند.

ابتدا باید افزونه WP Rocket را نصب و فعال کنید پس از فعال سازی ، باید از صفحه Settings » WP Rocket بازدید کرده و به تب «File Optimization» بروید.

در مرحله بعدی ، باید به بخش پرونده های CSS بروید. از اینجا باید کادر کنار گزینه “Optimize CSS delivery” را علامت بزنید.

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

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

پس از فعال کردن گزینه “Optimize CSS delivery” ، روی دکمه ذخیره تغییرات کلیک کنید و منتظر بمانید تا WP Rocket پرونده CSS لازم را برای همه پست ها و صفحات شما ایجاد کند. همچنین به طور خودکار حافظه پنهان وب سایت شما را پاک می کند.

پس از پایان کار ، می توانید با استفاده از Google Pagespeed Insights دوباره عملکرد وب سایت خود را آزمایش کنید.

ترفندهای اضافی تحویل فایل برای افزایش عملکرد

WP Rocket همچنین به شما امکان می دهد رشته های پرس و جو را از پرونده های ثابت حذف کنید ، فایل های Google Fonts را با هم ترکیب کنید و HTML را کوچک کنید. همه این ترفندها پیشرفت های ناچیزی در سرعت کلی شما ایجاد می کنند ، که به تجربه بارگیری سریعتر بازدیدکنندگان شما می افزاید.

همچنین گزینه هایی برای کوچک کردن و ترکیب پرونده های CSS مشاهده خواهید کرد. این گزینه ها باعث کاهش درخواست های HTTP و افزایش سرعت اضافی می شود.

با این وجود ، لازم است وب سایت خود را به دقت بررسی کنید تا پس از فعال کردن این تنظیمات مطمئن شوید که چیزی خراب نشده است.

علاوه بر این ، می توانید همان بهینه سازی را برای پرونده های JavaScript در وب سایت خود اعمال کنید. می توانید آنها را کوچک کرده و ترکیب کنید تا به عنوان یک فایل واحد عمل کنند و برای بهبود عملکرد بارگذاری پرونده های JavaScript را به تعویق بیندازید.

روش 2. حذف فایل هی css استفاده نشده با استفاده از Asset CleanUp

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

با این حال ، کمی پیچیده است و شما باید عملکرد و شکل ظاهری وب سایت خود را کاملاً آزمایش کنید تا مطمئن شوید که چیزی خراب نشده است.

ابتدا باید افزونه Asset Cleanup را نصب و فعال کنید. پس از فعال سازی ، باید به صفحه تنظیمات Asset CleanUp »بروید و به برگه Test Test بروید. از اینجا ، باید گزینه “Enable Test Mode” را روشن کنید.

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

پس از آن ، باید به صفحه Asset CleanUp »CSS / JS Manager مراجعه کنید. از اینجا می توانید پرونده های ناخواسته CSS و JavaScript را در یک صفحه به صفحه بارگیری کنید.

ابتدا صفحه اصلی شما را واکشی می کند و تمام فایل های CSS و JavaScript بارگذاری شده در آن صفحه را به شما نشان می دهد.

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

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

در صفحه ویرایش پست ، کادر Asset CleanUp را درست در زیر ویرایشگر پست پیدا خواهید کرد.

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

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

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

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

اکنون می توانید وب سایت خود را با استفاده از Google Pagespeed Insights تست کنید تا تغییر در اطلاعیه CSS استفاده نشده را مشاهده کنید