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

بسیاری از طراحان از میزان CSS استفاده نشده ای که توسط قالب و افزونه های آنها به صفحات و پست های آنها بارگذاری یا تزریق می شود، بی اطلاع هستند. با این حال، یک آزمایش سریع سایت شما با استفاده از Google Page Speed Insights (PSI) یا هر ابزار تست دیگر نشان می دهد که مقدار زیادی CSS در حال بارگیری است.

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

آزمون عملکرد

طبق گزارش‌های Google PSI، این صفحه به طور بالقوه می‌تواند بیش از 60 کیلوبایت ذخیره کند که بسیار بزرگ است، سایت شما ممکن است متفاوت باشد. هر چه سایت شما بزرگتر باشد قطعا شرایط بارگذاری و بهینه سازی نیز متفاوت خواهد بود.

قبل از بهینه سازی (بدون بهینه سازی)

پس از بهینه سازی (با افزونه Asset CleanUp)

بارگیری شیوه نامه ها با Asset CleanUp، وزن صفحه را 20 درصد کاهش دهید.

بهینه سازی (برنامه افزودنی کروم با افزونه پاکسازی)

این سوال همیشه در گروه ها و انجمن های مختلف مطرح می شود.

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

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

به همین دلیل است که من این آموزش را نوشتم تا به شما در حل این مشکلات که توسط Google PageSpeed Insights (PSI) توصیه شده است کمک کنم.

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

قطعا مشلاتی که در بهینه سازی و سرعت سایت داشته اید چالشهایی را برای شما به وجود آورده است و ما نیز سعی در حل مشکل آن داریم.

همچنین بخوانید : ۷ راه حل برای رفع خطای ۴۰۴ در وردپرس

۷ راه حل برای رفع خطای ۴۰۴ در وردپرس

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

نکته دوم ممکن است نادرست باشد زیرا حذف CSS استفاده نشده در وردپرس منابع Rendering Blocking را برطرف نمی کند، مطمئنا وزن صفحه و درخواست های HTTP را کاهش می دهد.

این مقاله گام به گام پیچیده و طولانی است

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

و در آخر مقاله اگر افزونه دیگری میشناسید وکه کارایی بهتری داشته است و می خواهید آن را اضافه کنم. لطفا در در زیر همین مقاله در دیدگاه برای من بنویسید.

7 پلاگین به طور خودکار CSS استفاده نشده در وردپرس شما را از وب سایت حذف می کنند

WP Rocket یکی از افزونه های پر قدرت و بسیار کارایی است که میتواند به راحتی در بهینه سازی سایت شما کمک شایانی بکند.

وقتی ویژگی‌ها را فعال می‌کنید، مطمئن شوید که آنها را با دقت تست کرده‌اید، چون ممکن است مشکلاتی در قسمت جلویی سایت و قالب برای شما به وجود آورد

Swift Performance

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

برای دسترسی به این ویژگی این مراحل را دنبال کنید-

• در غیر این صورت Advance view را فعال کنید، به طور پیش فرض نمایش داده نمی شود.
• به Optimization – Styles – Enable Disable Full CSS بروید

FlyingPress

این هم افزونه دیگری است که میتوانید از آن استفاده کنید.

پلاگین RapidLoad Power-Up برای بهینه سازی

این یک افزونه برای افزونه بهینه سازی وردپرس است که در دو نسخه تجاری و رایگان عرضه شده است.

Perfmatters

در نسخه 1.9.2، Perfmatters برچسب استفاده نشده CSS BETA را حذف می کند، و از Massimo Villa برای به روز رسانی و ارائه تصویر به من تشکر می کنم.

LiteSpeed Cache – حذف کننده CSS استفاده نشده

اگر از LS Cache یا LiteSpeed Cache استفاده می کنید، می توانید به همان چیزی دست پیدا کنید، اما سرعت آن بسیار کندتر از سایر پلاگین های برتر است.

فرآیند حذف CSS استفاده نشده (دستی) از وب سایت:

مرحله 1 امتیاز عملکرد پایه را دریافت کنید

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

در این فرآیند، ما قصد داریم قالب و وب سایتی که طراح یا توسعه دهنده افزونه‌های المنتور نصب کرده اند را بهینه سازی کنیم.

طبق Google PageSpeed Insights، من می‌توانم بیش از 60 کیلوبایت CSS ذخیره کنم، اما اندازه CSS شما ممکن است با من متفاوت باشد.

مرحله شماره ۲ ابزارهای Chrome را باز کنید

به عنوان مثال، اگر CSS را در پلاگین های عملکرد خود ترکیب یا ادغام کنید، تشخیص اینکه کدام CSS در حال استفاده است یا نه آسان نیست، 2 راه برای حل این مشکل وجود دارد

1- حذف صفحه یا پست از حافظه پنهان این یکی از رایج ترین و امن ترین راه است. پس از اینکه پست را بهینه کردید یا صفحه دوباره اضافه شد. یا اگر از پروتکل HTTP/2 استفاده می کنید، در وهله اول صفحات خود را ترکیب نکنید. به عبارتی از حالت ادغام سی اس اس خارج نمایید.
2- با افزودن ?nocache به انتهای URL خود برای دور زدن کش. (این ممکن است نسخه ذخیره نشده و داده های قدیمی را ارائه دهد یا ممکن است به هیچ وجه اجرا نشود)

همچنین بخوانید : حل مشکلات رایج المنتور در وردپرس

برای باز کردن Inspect Elements در هر نقطه کلیک راست کنید

ویدئو زیر را کامل تماشا کنید تا به خوبی بدونید که برای پیدا کردن فایل های cssاستفاده نشده در وردپرس باید چه کاری انجام داد (لازم به ذکر است ویديو در کانال یوتیب برداشته شده و نیاز به فیلتر شکن دارید)

https://www.youtube.com/watch?v=GUkpl0INrW8&t=154s

یکی از ساده‌ترین راه‌ها برای باز کردن ابزار Developer این است که روی هر مکانی با ماوس خود کلیک راست کنید و Inspect را بزنید تا پنل Dev tools Inspect Elements باز شود.

بر روی سفارشی کردن و باز کردن منوی ابزارهای توسعه دهنده در ابزار توسعه دهنده همان سه نقطه کروم کلیک کنید

مطابق شکل زیر بر روی سه نقظه در زبانه ابزارهای توسعه دهنده (inspect element) کلیک کنید.

Coverage Report

می‌توانید با کلیک کردن روی گزینه «More Tools» به «Coverage Report» دسترسی پیدا کنید.

سپس، روی دکمه بارگذاری مجدد کلیک کنید

من این صفحه را بدون فعال کردن ویژگی های Improved CSS Loading Elementor در برگه تنظیمات آزمایش کرده ام. به همین دلیل است که اندازه CSS بزرگ است. این فقط مختص کاربران Elementor است.

پس از فعال کردن ویژگی‌ها، اندازه صفحه نسبت به غیرفعال‌شده‌ها نسبتاً کاهش یافت، اما هنوز تعداد زیادی CSS استفاده نشده وجود دارد که می‌توان آنها را حذف کرد (رنگ قرمز را ببینید).

مشکلات CSS استفاده نشده در وردپرس را از تب Coverage شناسایی کنید

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

بنابراین فقط فایل های CSS را نشان می دهد.

رنگ قرمز نوار نشان دهنده بایت های استفاده نشده و رنگ سبز نشان دهنده بایت های استفاده شده است.

شما تمام اطلاعاتی مانند میانبرها، نکات همه چیز را از Chrome Dev tools Coverage. دریافت خواهید کرد.

قبل از شروع حذف آن را تست کنید

تست بسیار مهم است، ما متوجه می‌شویم که از پانل stylesheets استفاده در بالا استفاده نمی‌شود، اما نمی‌توانیم 100% مطمئن باشیم که آیا فایلی که حذف می‌کنیم سایت یا قالب ما را بهم نمیریزد.

برای حذف مناسب فایلها، باید به ابزارهای Chrome Dev – پنل شبکه برویم و سپس روی شیوه نامه ای که می خواهید حذف کنید کلیک راست کنید. سپس روی Block request URL کلیک کنید تا برگه Block request URL باز شود. (در تصویر زیر نشان داده شده است) که به شما امکان می دهد درخواست هایی را که نمی خواهید بارگیری کنید مسدود کنید. سپس صفحه را بازخوانی کنید که آیا مشکلی وجود دارد یا خیر. شما این فرآیند را بارها و بارها انجام می دهید.

درخواست پانل مسدود کردن که نشان می دهد کدام CSS یا JS هنگام بارگیری صفحه بعدی مسدود می شود

افزونه Asset CleanUp را نصب کنید و بارگیری شیوه نامه ها را شروع کنید

قبلاً متوجه شده‌ایم که با مسدود کردن درخواست و گزارش‌های پوشش در ابزارهای Chrome Dev، کدام برگه‌های سبک را می‌توان 100٪ حذف کرد. اکنون باید این افزونه را نصب کنیم تا بتوانیم کدهای CSS و جاوا اسکریپت استفاده نشده را از کل وب سایت یا بر اساس هر صفحه/پست حذف کنیم. شما می توانید همین کار را با سایر افزونه های مدیریت دارایی نیز انجام دهید.

اکنون به صفحه/پستی که در حال حذف آن هستید بروید و «دکمه Unload on this page» را تغییر دهید تا CSS از بارگیری خارج شود یا «در سراسر سایت بارگیری شود» (مراقب باشید هر چند این stylesheet  را همه جا حذف می کند).

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

این روش را می توان در حذف JS استفاده نشده نیز به کار برد، اما مشکل است و می تواند عملکردهای سایت شما را به دلیل وابستگی ها از بین ببرد.

بنا به دلایلی، اگر در حال حذف JS هستید، پیشنهاد می‌کنم هر زمان که نیاز بود، enable the ‘Ignore dependency rule and keep the “children” loaded’  را بارگذاری شده نگه دارید (به تصویر زیر مراجعه کنید). در غیر این صورت، تمام فایل های فرزند (ماژول های frontend و elementor-waypoints) بارگیری نمی شوند. یا اگر اصلاً نمی‌خواهید JS بارگیری کنید، jQuery را دانلود کنید.

پس از بارگیری شیوه نامه ها (stylesheets) و جاوا اسکریپت

نتایج پس از بارگیری CSS با افزونه Asset clean up (نمایش تصویر – نتایج قبل و بعد)

ما بیش از 20 کیلوبایت حجم انتقال را فقط با بارگیری شیوه نامه ها با کمک افزونه asset clean-up ذخیره کرده ایم. اگر از تعداد زیادی افزونه ها استفاده می کنید که به صفحه شما ظاهری متفاوت می بخشند، ممکن است بتوانید موارد بیشتری را کاهش دهید.

اشکال حذف دستی CSS استفاده نشده:

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

(روش پیشرفته) نحوه کاهش کامل CSS استفاده نشده در وردپرس

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

CSS مورد استفاده Chrome Extension را از پلاگین های وب Chrome نصب کنید

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

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

CSS استفاده شده با استفاده از افزونه Used CSS Chrome

پس از اینکه افزونه کروم را نصب کردیم. اگر در Dev tools هستید، مطمئن شوید که صفحه را بازخوانی کرده اید. اکنون پنل Elements [مرحله شماره 2(A) را دنبال کنید] و درخت DOM را از آنجا باز کنید. روی تگ HTML کلیک کنید. این کار همه چیز را گرفته و روی تب CSS Used در سمت راست پانل کلیک کنید. (برای مرجع به پیوست زیر مراجعه کنید)

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

برای رفع این مشکلات، باید با چیدمان موجود ارتباط برقرار کنیم (آن را در مرحله بعد ببینید).

• پنل Elements را باز کنید
• روی تگ HTML کلیک کنید.
• روی برگه مورد نظر CSS در کنار تگ Accessibility کلیک کنید
• روی دکمه Preview کلیک تا در تب New باز شود. یا روی دکمه کپی کلیک تا CSS کپی و آن را در سرور خود آپلود کنید.

شامل استایل داینامیک، کلاس‌های CSS و شناسه‌ها به CSS استخراج‌شده

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

مهم: (اگر بیش 1000 پست دارید، انجام این روش بیش از یک هفته یا بیشتر طول می کشد که برای شما که از فرآیند خودکار ذکر شده در بالا استفاده می کنید، مناسب نیست)

برای دریافت تمام CSS، مطمئن شوید که با صفحه تعامل دارید و آن را مانند منوی باز کردن باز کنید (تصویر زیر را ببینید) و این کاری است که من انجام دادم:

• با منو تعامل دارم به این ترتیب Elementor Dialog JS CSS را تزریق می کند.
• روی تگ HTML کلیک کنید و سپس بر روی زبانه CSS Used کلیک کنید تا CSS مورد استفاده تولید شود.

• روی منو کلیک کنید
• در سمت راست، روی پانل های Elements کلیک کنید
• روی تگ <html در درخت DOM کلیک کنید.
• روی CSS Used کلیک و تمام CSS هایرا اسکن و تولید می کند
• اکنون می‌توانید کد را کپی کرده و آن را بیشتر بهینه کنید یا با کلیک روی دکمه پیش‌نمایش یا مشاهده وب‌سایت خود در CodePen، طرح را مشاهده کنید.

کد بهینه را در ویرایشگر کد خود کپی و ذخیره کنید

به‌طور پیش‌فرض، افزونه Used CSS Chrome کد کوچک‌سازی شده را تولید می‌کند. این کد شامل سبک درون‌خطی ایجاد شده توسط طرح زمینه، افزونه‌ها یا CSS اضافه شده دستی شما خواهد بود.

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

شما می توانید سبک درون خطی توسط طرح زمینه یا افزونه های خود را حذف کنید. در مرحله بعد، کد را با ابزارهای رایگان آنلاین حذف کنید یا از VS (ویرایشگر کد) استفاده کنید. سپس فایل را در قالب فایل css ذخیره کنید. شما می توانید با استفاده از FTP یا با دسترسی به کنترل پنل (cPanel) فایل را آپلود کنید.

مهم: اگر از کد ویژوال استودیو (VS) استفاده می‌کنید، می‌توانید با وارد کردن F1 روی صفحه‌کلید خود با استفاده از ابزارهای آنلاین برای کوچک‌سازی آن، یا با استفاده از افزونه Beautify VS Code برای کوچک‌سازی کد، از یک پسوند بهتر برای کوچک‌سازی استفاده کنید.

یک پوشه جدید ایجاد کنید یا از پوشه موجود استفاده کنید

پس از باز کردن پوشه wp-content، اگر از پلاگین های Performance مانند Swift یا wp-rocket استفاده می کنید، این احتمال وجود دارد که به طور خودکار یک پوشه به نام cache برای شما ایجاد کند.

روی پوشه Cache کلیک کنید و در داخل پوشه cache، پوشه خود را ایجاد کنید (combine-assets)، این پوشه ای است که در آن تمام شیوه نامه ها یا جاوا اسکریپت خود را اضافه خواهید کرد.

این به شما بستگی دارد که مسیر پوشه را انتخاب کنید، همچنین می‌توانید «assets folder» محتوای WP را به جای «cache folder‘» انتخاب کنید.

یک فایل css در داخل پوشه combination-assets ایجاد کنید

پس از ایجاد یک پوشه (به عنوان مثال – combine-assets)، باید یک فایل file-name.css ایجاد کنید که CSS را ذخیره می کند.

یک نام فایل (به عنوان مثال – file.min.css) بدهید و آن را ذخیره کنید.(به جای file.min هر اسمی را میتوانید بنویسید)

همیچنین بخوانید : خطای ۵۰۰ در وردپرس

فایل را باز کنید و CSS استخراج شده را از ویرایشگر کد خود پیست کنید

فایل را باز کنید و تمام CSS خود را کپی کنید و آن را در ویرایشگر فایل (فایل file.min.css) قرار دهید و ذخیره کنید.

باید افزونه Code Snippets موجود در مخزن وردپرس را نصب کنیم یا از یک تم فرزند استفاده کنیم.

افزونه‌ Code Snippets را نصب کنید

حالا افزونه Code Snippet را از مخزن WP نصب کنید و افزونه را فعال کنید یا از فایل Child Theme function.php استفاده کنید.

روی Add new Snippet کلیک کنید و stylesheet را در خود را وارد کنید.

اکنون از تابع wp_enqueue_style برای بارگذاری stylesheet خود استفاده کنید.

/*
* I use Code Snippet plugin so opening php tag and closing is not needed
* Change the post ID with respected post ID
* later if you're updating the code, simply update the version from 1.1 to 1.2
*/

function laura_brehm() {
   /* 1978 is the post type referring to the template page like your-domain.com/wp-admin/post.php?post=1978*/
    if( is_page ( 1978 )) {
 /*Enqueue Stylesheets properly */
    wp_enqueue_style('laura-brehm','/wp-content/cache/combine-assets/laurabrehm.min.css', array(), '1.0', 'all');
}
}

add_action('wp_enqueue_scripts', 'laura_brehm');
    

با استفاده از افزونه Asset CleanUp، تمام stylesheet را بارگیری کنید

پس از اینکه صفحه قالب را با افزونه Code Snippet در صف قرار دادید. مطمئن شوید که آن را با استفاده از گزینه‌های Asset CleanUp بررسی کرده‌اید و سپس روی کلید «Unload on this page» در همه stylesheetکلیک کنید تا آن را حذف کنید.

اگر می‌خواهید برخی از stylesheet را حذف کنید، مطمئن شوید که روی Ignore dependency rule and keep the “children” را نگه دارید، این در مورد شیوه نامه‌ها نیز صدق می‌کند.\

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

اگر شما هم راههای دیگری به ذهنتون میرسه با ما به اشتراک بزارید.

منبع : foxscribbler