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

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

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

چرا افزونه‌ها فایل CSS و JavaScript بارگذاری می‌کنن؟

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

CSS ظاهر بخش‌هایی مثل فرم، دکمه و اسلایدر رو می‌سازه. JavaScript هم رفتار تعاملی اون‌ها رو کنترل می‌کنه؛ مثلاً کاری می‌کنه بعد از کلیک روی یک دکمه، پنجره‌ای باز بشه. بارگذاری این فایل‌ها به‌خودی‌خود مشکلی نداره. دردسر از جایی شروع می‌شه که فایلی در صفحه‌ای لود بشه که اصلاً از اون استفاده نمی‌کنه.

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

چطور فایل‌های اضافی هر صفحه رو پیدا کنیم؟

اول صفحه‌ای رو باز کنید که فکر می‌کنید کند شده. روی صفحه راست‌کلیک کنید و گزینه Inspect رو بزنید. بعد به تب Network برید و صفحه رو دوباره بارگذاری کنید. این بخش همه فایل‌هایی رو نشون می‌ده که مرورگر برای ساخت صفحه دریافت کرده.

1. در تب Network روی فیلتر CSS یا JS کلیک کنید.
2. ستون Name و آدرس هر فایل رو ببینید.
3. اگه آدرس فایل شامل پوشه wp-content/plugins بود، معمولاً نام پوشه بعدی نشون می‌ده فایل برای کدوم افزونه‌ست.
4. نام فایل و صفحه‌ای رو که فایل توی اون پیدا شده یادداشت کنید.

برای بررسی دقیق‌تر می‌تونید از PageSpeed Insights هم کمک بگیرید. بخش‌های Reduce unused CSS و Reduce unused JavaScript سرنخ‌های خوبی بهتون می‌دن، ولی پیشنهاد این ابزار به این معنی نیست که می‌تونید فایل رو مستقیم حذف کنید. اول مطمئن بشید صفحه واقعاً به اون فایل وابسته نیست.

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

امتیاز آزمایشگاهی ممکنه در هر بار آزمایش کمی تغییر کنه. بهتره اون رو کنار معیارهای اصلی تجربه کاربر، یعنی LCP، INP و CLS ببینید. LCP سرعت نمایش محتوای اصلی رو می‌سنجه، INP واکنش سایت به کلیک و لمس رو بررسی می‌کنه و CLS جابه‌جایی ناگهانی بخش‌های صفحه رو نشون می‌ده.

اگه می‌خواید دلیل‌های دیگه کندی سایت رو هم پیدا کنید، راهنمای دلیل کند بودن سایت وردپرسی مسیر کامل‌تری بهتون نشون می‌ده.

قبل از حذف فایل‌ها از سایت نسخه پشتیبان بگیرید

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

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

حذف CSS اضافی در افزونه رخش

برای حذف css و js هایی که بلا استفاده هست، کافیه به قسمت تنظیمات افزونه برید، و تب Css و Js رو باز کنید و تیک گزینه حذف CSS بلااستفاده رو تیک بزنید. همین!

وردپرس خودش قابلیت حذف CSS و JS از صف رو داره

برای این کار لازم نیست افزونه بهینه‌سازی پولی بخرید. خود وردپرس توابع wp_dequeue_style() و wp_dequeue_script() رو در اختیارتون می‌ذاره. این توابع فایل ثبت‌شده رو از صف بارگذاری صفحه بیرون میارن.

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

1. در پیشخوان وردپرس به بخش افزونه‌ها برید و افزودن افزونه تازه رو انتخاب کنید.
2. عبارت Code Snippets رو جست‌وجو کنید.
3. نسخه رایگان افزونه رو نصب و فعال کنید.
4. از منوی Snippets گزینه Add New رو بزنید.
5. کد موردنظرتون رو وارد کنید و اجرای اون در بخش عمومی سایت رو انتخاب کنید.

هندل فایل CSS یا JavaScript رو پیدا کنید

وردپرس هر فایل رو با یک نام داخلی به اسم Handle یا «هندل» ثبت می‌کنه. برای بیرون‌آوردن فایل از صف باید همین نام دقیق رو پیدا کنید. یادتون باشه هندل همیشه با نام فایل یکی نیست.

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

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

حذف CSS اضافی افزونه در وردپرس

وقتی هندل درست رو پیدا کردید، می‌تونید فایل CSS رو با کد زیر از صف بیرون بیارید. عبارت plugin-style-handle فقط یک نمونه‌ست؛ پس باید اون رو با هندل واقعی فایل عوض کنید.

add_action( 'wp_enqueue_scripts', 'mihanwp_remove_unused_plugin_assets', 100 );function mihanwp_remove_unused_plugin_assets() {    wp_dequeue_style( 'plugin-style-handle' );}

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

حذف JavaScript اضافی افزونه در وردپرس

برای JavaScript هم تقریباً همین مسیر رو دارید. فقط این بار باید از تابع wp_dequeue_script() کمک بگیرید.

add_action( 'wp_enqueue_scripts', 'mihanwp_remove_unused_plugin_assets', 100 );function mihanwp_remove_unused_plugin_assets() {    wp_dequeue_script( 'plugin-script-handle' );}

فایل‌های JavaScript معمولاً به فایل‌های دیگه وابسته‌ان. ممکنه با حذف یک فایل، خطایی ساخته بشه که در ظاهر صفحه به چشم نیاد. بعد از تغییر، تب Console در ابزار Inspect رو باز کنید و ببینید خطای قرمزی نمایش داده می‌شه یا نه.

بارگذاری فایل افزونه فقط در صفحه‌های لازم

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

add_action( 'wp_enqueue_scripts', 'mihanwp_conditionally_remove_form_assets', 100 );function mihanwp_conditionally_remove_form_assets() {    if ( ! is_page( 'contact' ) ) {        wp_dequeue_style( 'plugin-form-style-handle' );        wp_dequeue_script( 'plugin-form-script-handle' );    }}

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

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

add_action( 'wp_enqueue_scripts', 'mihanwp_conditionally_remove_form_assets', 100 );function mihanwp_conditionally_remove_form_assets() {    if ( ! is_page( array( 25, 48, 73 ) ) ) {        wp_dequeue_style( 'plugin-form-style-handle' );        wp_dequeue_script( 'plugin-form-script-handle' );    }}

عددهای ۲۵، ۴۸ و ۷۳ فقط برای نمونه هستن. باید به‌جای اون‌ها شناسه برگه‌های خودتون رو بنویسید.

روش درست برای فرم تماس ۷

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

برای غیرفعال‌کردن بارگذاری سراسری فایل‌های فرم تماس ۷ می‌تونید ثابت‌های زیر رو به فایل wp-config.php اضافه کنید:

define( 'WPCF7_LOAD_JS', false );
define( 'WPCF7_LOAD_CSS', false );

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

وردپرس برای JavaScript قابلیت‌های بهینه‌سازی تازه‌تری هم داره

وردپرس از نسخه ۶.۳ به توسعه‌دهنده‌ها اجازه می‌ده موقع ثبت اسکریپت، راهبردهایی مثل defer رو مشخص کنن. از نسخه ۶.۵ هم تابع wp_enqueue_script_module() برای ماژول‌های JavaScript در دسترسه. این قابلیت‌ها بیشتر به کار سازنده‌های قالب و افزونه میان و جای حذف فایل غیرضروری رو نمی‌گیرن.

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

بعد از حذف فایل‌ها چه چیزهایی رو آزمایش کنیم؟

• صفحه رو هم در موبایل و هم در کامپیوتر باز کنید.
• فرم‌ها رو بفرستید و پیام موفقیت یا خطا رو بررسی کنید.
• منو، جست‌وجو، پاپ‌آپ، اسلایدر و دکمه‌ها رو امتحان کنید.
• سبد خرید، پرداخت و ورود کاربر رو بررسی کنید.
• تب Console مرورگر رو باز کنید و دنبال خطاهای JavaScript بگردید.
• کش سایت، CDN و مرورگر رو پاک کنید.
• آزمایش سرعت قبل و بعد رو در شرایط مشابه تکرار کنید.

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

اشتباه‌های رایج در حذف CSS و JavaScript

• کپی‌کردن فایل افزونه داخل قالب: این کار به‌روزرسانی و وابستگی فایل‌ها رو به‌هم می‌زنه. فایل افزونه رو داخل قالب کپی نکنید.
• تغییر قالب اصلی: کدی که داخل functions.php قالب اصلی می‌ذارید ممکنه با به‌روزرسانی پاک بشه. از Code Snippets یا چایلدتم استفاده کنید.
• حذف چند فایل با هم: فایل‌ها رو یکی‌یکی آزمایش کنید تا اگه مشکلی پیش اومد، راحت‌تر دلیلش رو پیدا کنید.
• اعتماد کامل به نام فایل: نام فایل همیشه همون هندل وردپرس نیست. هندل واقعی رو از کدی پیدا کنید که فایل رو ثبت کرده.
• توجه‌کردن فقط به تعداد درخواست‌ها: حجم و زمان اجرای فایل‌ها هم مهمه. چند فایل کوچک لزوماً بدتر از یک فایل سنگین نیستن.
• آزمایش‌نکردن صفحه‌های حساس: فروشگاه، پرداخت، فرم‌ها و حساب کاربری رو حتماً جداگانه بررسی کنید.

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

جمع‌بندی

برای حذف CSS و JS اضافی افزونه در وردپرس، اول فایل‌های غیرضروری و هندل دقیق اون‌ها رو پیدا کنید. بعد با قابلیت‌های داخلی وردپرس و توابع wp_dequeue_style() و wp_dequeue_script()، هر فایل رو فقط از صفحه‌هایی کنار بذارید که به اون نیازی ندارن. برای اضافه‌کردن کد هم می‌تونید از نسخه رایگان Code Snippets کمک بگیرید تا قالب اصلی سایتتون دست‌کاری نشه.

مهم‌ترین بخش کار، آزمایش بعد از هر تغییره. فایل‌ها رو یکی‌یکی حذف کنید، کش رو پاک کنید و فرم‌ها، منوها، فروشگاه و خطاهای JavaScript رو بررسی کنید. اگه نتیجه بهتر نشد یا بخشی از سایت به‌هم ریخت، کد رو غیرفعال کنید. هدف این نیست که همه فایل‌ها رو حذف کنید؛ هدف اینه که هر فایل فقط جایی بارگذاری بشه که واقعاً بهش نیاز دارید.

تیم تولید محتوا

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