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

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

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

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

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

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

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

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

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

مشکل کد CSS استفاده نشده در Google Pagespeed Insights

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

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

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

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

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

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

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

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

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

روش ۱٫ با استفاده از WP Rocket CSS استفاده نشده را در وردپرس حذف کنید

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

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

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

پس از فعال سازی ، باید از سایت بازدید کنید تنظیمات »WP Rocket صفحه را انتخاب کرده و به تب “File Optimization” بروید.

بهینه سازی فایل در WP Rocket

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

تحویل CSS را در WP Rocket بهینه کنید

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

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

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

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

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

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

بهینه سازی فایل اصلی

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

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

پرونده های CSS را کم و ترکیب کنید

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

تحویل جاوا اسکریپت را بهینه کنید

برای جزئیات بیشتر ، به آموزش گام به گام ما مراجعه کنید نحوه تنظیم صحیح WP Rocket در وردپرس.

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

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

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

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

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

گزینه حالت آزمون را فعال کنید

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

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

مدیر CSS / JS

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

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

در حال بارگیری پرونده ها

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

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

پاکسازی دارایی در داخل ویرایشگر پست

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

پرونده ها را برای یک صفحه خاص بارگیری کنید

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

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

فراموش نکنید که برای ذخیره تغییرات خود ، روی دکمه Update All Settings کلیک کنید.

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

CSS در وردپرس کاهش می یابد

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

اگر این مقاله را دوست داشتید ، لطفاً مشترک ما شوید کانال یوتیوب برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در توییتر و فیس بوک.

پست نحوه حذف CSS استفاده نشده در وردپرس (راه صحیح) اولین بار در ظاهر شد WPBeginner.




منبع محتوا

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوازده + 4 =