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

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

توی این مقاله می‌خوایم ببینیم چرا فایل‌های جاوا اسکریپت می‌تونن جلوی سریع باز شدن صفحه رو بگیرن، چطور می‌شه اون‌ها رو به پایین صفحه منتقل کرد و مهم‌تر از اون، الان که تو سال ۱۴۰۵ هستیم، روش درست و به‌روز این کار چیه. چون راستش رو بخواید، خیلی از آموزش‌هایی که توی اینترنت پیدا می‌کنید مال ۷-۸ سال پیشن و بعضی از توصیه‌هاشون دیگه نه‌تنها جواب نمی‌ده، بلکه می‌تونه سایتتون رو خراب کنه.

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

چرا سرعت سایت انقدر مهمه؟

وقتی سرعت لود صفحات سایتتون بالا باشه، نرخ پرش (Bounce Rate) میاد پایین. یعنی کاربر به‌جای اینکه وسط لود شدن صفحه کلافه بشه و برگرده، می‌مونه و محتوا رو می‌بینه. تأخیر توی باز شدن صفحه می‌تونه باعث بشه بخش بزرگی از بازدیدکننده‌ها اصلاً وارد سایتتون نشن؛ پس این موضوع واقعاً مهمه و باید جدی بگیریدش.

از طرف دیگه، سرعت مستقیم روی رتبه‌ی شما توی موتورهای جستجو اثر می‌ذاره. گوگل چند ساله که معیارهایی به اسم Core Web Vitals رو برای سنجش تجربه‌ی صفحه در نظر می‌گیره. این معیارها الان سه‌تان:

• LCP — اینکه بزرگ‌ترین عنصر صفحه (معمولاً تصویر شاخص یا تیتر اصلی) چقدر طول می‌کشه تا نمایش داده بشه.
• INP — اینکه وقتی کاربر روی چیزی کلیک می‌کنه، صفحه چقدر سریع واکنش نشون می‌ده. این معیار از سال ۲۰۲۴ جایگزین FID قدیمی شده و مستقیماً به جاوا اسکریپت ربط داره.
• CLS — اینکه عناصر صفحه موقع لود شدن چقدر جابه‌جا می‌شن و می‌پرن.

نکته‌ی مهم اینجاست: از این سه‌تا، دوتاش (LCP و INP) مستقیماً تحت تأثیر جاوا اسکریپت هستن. یعنی اگه سایتتون پر از فایل JS سنگین باشه که همه‌شون هم بالای صفحه لود می‌شن، عملاً دارید امتیاز خودتون رو خراب می‌کنید.

یه اشتباه رایج: «سایت من که سریع باز می‌شه!»

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

برای تست درست، سایت رو توی حالت ناشناس مرورگر باز کنید یا از ابزارهایی مثل PageSpeed Insights گوگل و GTmetrix استفاده کنید. اون‌ها بدون کش، وضعیت واقعی سایت رو بهتون نشون می‌دن.

چرا باید جاوا اسکریپت رو به فوتر منتقل کنیم؟

جاوا اسکریپت یه زبان برنامه‌نویسی سمت کاربره؛ یعنی به‌جای سرور، توسط مرورگر بازدیدکننده اجرا می‌شه. حالا مشکل کجاست؟ وقتی مرورگر داره کد HTML صفحه رو از بالا به پایین می‌خونه و به یه تگ <script> می‌رسه، به‌صورت پیش‌فرض متوقف می‌شه، فایل رو دانلود می‌کنه، اجراش می‌کنه و بعد ادامه می‌ده.

به این حالت می‌گن «مسدودکننده‌ی رندر» یا Render Blocking. یعنی کاربر تا وقتی که اون فایل جاوا اسکریپت دانلود و اجرا نشه، هیچی روی صفحه نمی‌بینه؛ فقط یه صفحه‌ی سفید. حالا تصور کنید ۱۵ تا فایل JS بالای صفحه دارید و اینترنت کاربر هم موبایل و کنده…

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

آیا انتقال به فوتر هنوز هم بهترین راه‌حله؟

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

• defer — فایل همون بالای صفحه اعلام می‌شه ولی مرورگر بدون توقف، همزمان با خوندن بقیه‌ی صفحه دانلودش می‌کنه و آخر کار اجراش می‌کنه. یعنی مزیت فوتر رو داره، ولی دانلود زودتر شروع می‌شه.
• async — فایل موازی دانلود می‌شه و به‌محض آماده شدن اجرا می‌شه، بدون اینکه به ترتیب اهمیت بده. مناسب اسکریپت‌های مستقل مثل ابزارهای آمار.

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

خلاصه‌ که برای اسکریپت‌هایی که ترتیب اجراشون مهمه (مثل چیزهایی که به jQuery وابسته‌ان) از defer یا فوتر استفاده کنید. برای اسکریپت‌های کاملاً مستقل از async. و اسکریپت‌هایی که فقط بعد از تعامل کاربر لازم می‌شن (مثل چت آنلاین یا اسلایدرها) رو کلاً تا لحظه‌ی کلیک یا اسکرول کاربر عقب بندازید.

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

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

فرض کنید می‌خواید یه فایل جاوا اسکریپت به سایتتون اضافه کنید. اول فایل رو با پسوند .js ذخیره کنید و توی پوشه‌ی js قالبتون بذارید. اگه قالبتون همچین پوشه‌ای نداره، خودتون بسازیدش. بعد فایل functions.php قالب رو ویرایش کنید و این کد رو بهش اضافه کنید:

function mihanwp_adding_scripts() {    wp_register_script(        'my-amazing-script',        get_template_directory_uri() . '/js/my-amazing-script.js',        array(),        '1.1',        true  // این پارامتر یعنی اسکریپت در فوتر لود بشه    );    wp_enqueue_script( 'my-amazing-script' );}add_action( 'wp_enqueue_scripts', 'mihanwp_adding_scripts' );

اینجا از تابع wp_register_script() استفاده کردیم که پارامترهاش این‌شکلیه:

wp_register_script( $handle, $src, $deps, $ver, $args );

پارامتر آخر همون چیزیه که براتون مهمه. اگه مقدارش رو true بذارید، اسکریپت به فوتر منتقل می‌شه. تابع get_template_directory_uri() هم آدرس پوشه‌ی قالب رو برمی‌گردونه. فقط دقت کنید که اگه دارید این کد رو توی یه افزونه می‌نویسید، باید به‌جاش از plugins_url() استفاده کنید.

روش جدیدتر: استفاده از defer در وردپرس ۶.۳ به بعد

از وردپرس ۶.۳ به بعد، پارامتر آخر می‌تونه به‌جای true، یه آرایه باشه که هم فوتر رو مشخص می‌کنه هم استراتژی بارگذاری رو:

function mihanwp_adding_scripts() {    wp_enqueue_script(        'my-amazing-script',        get_template_directory_uri() . '/js/my-amazing-script.js',        array(),        '1.1',        array(            'in_footer' => true,            'strategy'  => 'defer',   // یا 'async'        )    );}add_action( 'wp_enqueue_scripts', 'mihanwp_adding_scripts' );

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

حواستون باشه: این کدها رو هیچ‌وقت توی فایل functions.php قالب اصلی ننویسید! چون با اولین آپدیت قالب، همه‌ی تغییراتتون پاک می‌شه. یا از قالب فرزند (Child Theme) استفاده کنید، یا یه افزونه‌ی کوچیک اختصاصی برای سایتتون بسازید. این نکته رو خیلی جدی بگیرید.

پیدا کردن اسکریپت‌های مزاحم

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

قدیم‌ها می‌گفتیم روی صفحه راست‌کلیک کنید و «View Page Source» رو بزنید و دنبال تگ‌های script بگردید. این روش هنوز کار می‌کنه، ولی امروز دو تا راه خیلی دقیق‌تر دارید:

گزارش PageSpeed Insights

آدرس سایتتون رو توی PageSpeed Insights گوگل بزنید و دنبال بخشی بگردید به اسم «Eliminate render-blocking resources» یا «حذف منابع مسدودکننده‌ی رندر». گوگل دقیقاً بهتون لیست فایل‌هایی رو می‌ده که جلوی نمایش سریع صفحه رو گرفتن، به‌همراه اینکه هر کدوم چند میلی‌ثانیه دارن وقت تلف می‌کنن.

ابزار توسعه‌دهنده‌ی مرورگر

روی صفحه راست‌کلیک کنید و Inspect رو بزنید، بعد برید سراغ تب Network و فیلتر JS رو فعال کنید. حالا صفحه رو رفرش کنید. لیست کامل فایل‌های جاوا اسکریپت با حجم و زمان بارگذاریشون رو می‌بینید. از روی مسیر فایل هم می‌فهمید مال کدوم افزونه یا قالبه؛ مثلاً اگه آدرس فایل چیزی شبیه /wp-content/plugins/test-plugin/js/main.js باشه، یعنی مقصر همون افزونه‌ی test-plugin هست.

گاهی هم می‌بینید که کد جاوا اسکریپت مستقیم داخل خود صفحه نوشته شده و اصلاً فایل جداگانه‌ای وجود نداره (به این می‌گن inline script). توی این حالت برای پیدا کردن منبعش، همه‌ی افزونه‌ها رو غیرفعال کنید و ببینید کد ناپدید می‌شه یا نه. اگه ناپدید نشد، یعنی مال قالبتونه؛ قالب رو موقتاً به یه قالب پیش‌فرض تغییر بدید تا مطمئن بشید.

انتقال اسکریپت افزونه‌ها به فوتر (بدون دستکاری فایل افزونه)

اینجا یکی از مهم‌ترین به‌روزرسانی‌های این مقاله رو داریم. توی خیلی از آموزش‌های قدیمی می‌گن «فایل افزونه رو باز کنید و کد رو ویرایش کنید». این کار رو نکنید! چون با اولین به‌روزرسانی افزونه، تغییراتتون پاک می‌شه و اگه یادتون بره، سایتتون دوباره کند می‌شه بدون اینکه بفهمید چرا. بدتر از اون، خیلی وقت‌ها یه ویرایش اشتباه توی فایل افزونه کل سایت رو از کار می‌ندازه.

راه درست اینه که اسکریپت رو از صف خارج کنید و دوباره با تنظیمات خودتون ثبتش کنید. کد زیر رو توی قالب فرزند یا افزونه‌ی اختصاصیتون بذارید:

function mihanwp_move_script_to_footer() {    // اسکریپت را از صف خارج و حذف ثبت می‌کنیم    wp_dequeue_script( 'script-handle' );    wp_deregister_script( 'script-handle' );    // دوباره ثبتش می‌کنیم، این بار در فوتر    wp_register_script(        'script-handle',        plugins_url( 'js/script.js', dirname( __FILE__ ) ),        array( 'jquery' ),        '1.0',        true    );    wp_enqueue_script( 'script-handle' );}add_action( 'wp_enqueue_scripts', 'mihanwp_move_script_to_footer', 100 );

دو تا نکته‌ی مهم توی این کد هست. اول اینکه عدد 100 در انتهای add_action، اولویت اجراست؛ یعنی این کد بعد از افزونه اجرا می‌شه، وگرنه چیزی برای حذف کردن پیدا نمی‌کنه. دوم اینکه script-handle رو باید با نام واقعی اسکریپت (همون handle که افزونه ثبتش کرده) عوض کنید.

راه ساده‌تر: فقط defer اضافه کنید

اگه نمی‌خواید با dequeue و register درگیر بشید، یه روش خیلی تمیزتر هم هست: با فیلتر script_loader_tag فقط ویژگی defer رو به اسکریپت مورد نظر اضافه کنید:

function mihanwp_add_defer_attribute( $tag, $handle ) {    // نام اسکریپت‌هایی که می‌خواهید defer شوند    $defer_scripts = array( 'script-handle', 'another-handle' );    if ( in_array( $handle, $defer_scripts, true ) ) {        return str_replace( ' src', ' defer src', $tag );    }    return $tag;}add_filter( 'script_loader_tag', 'mihanwp_add_defer_attribute', 10, 2 );

این روش امن‌تره چون اسکریپت رو جابه‌جا نمی‌کنه، فقط به مرورگر می‌گه «عجله نکن، اول صفحه رو نشون بده».

حواستون به jQuery باشه!

یه هشدار مهم که خیلی‌ها ازش بی‌خبرن: انتقال jQuery به فوتر می‌تونه سایتتون رو خراب کنه. چرا؟ چون خیلی از قالب‌ها و افزونه‌ها کدهای کوچیک jQuery رو مستقیم وسط صفحه می‌نویسن. حالا اگه خود کتابخونه‌ی jQuery در فوتر لود بشه، اون کدها موقع اجرا هنوز jQuery رو نمی‌شناسن و با خطای $ is not defined متوقف می‌شن.

نتیجه‌ش چیه؟ منوی موبایل باز نمی‌شه، اسلایدر کار نمی‌کنه، دکمه‌ها بی‌جون می‌شن. برای همین:

• بعد از هر تغییری، حتماً کل سایت رو (مخصوصاً منو، اسلایدر، فرم‌ها و سبد خرید) تست کنید.
• کنسول مرورگر (تب Console توی Inspect) رو باز کنید و ببینید خطای قرمزی هست یا نه.
• اگه به مشکل خوردید، jQuery رو برگردونید به هدر و فقط بقیه‌ی اسکریپت‌ها رو منتقل کنید.

در کل، اگه کدنویسی بلد نیستید یا سایتتون فروشگاهیه و ریسک خراب شدنش رو ندارید، بهتره سراغ روش بعدی برید.

روش بدون کدنویسی: افزونه رخش

تا اینجا هرچی گفتیم نیاز به کدنویسی داشت. ولی واقعیت اینه که برای اکثر سایت‌ها، انجام دستی این کارها هم وقت‌گیره هم پرریسک. مخصوصاً وقتی ۲۰ تا افزونه دارید و هر کدوم چند تا فایل JS لود می‌کنن.

ما توی میهن وردپرس افزونه‌ی رخش رو دقیقاً برای همین ساختیم؛ یه افزونه‌ی کامل بهینه‌سازی سرعت که همه‌ی کارهای این مقاله (و خیلی بیشتر) رو با چند تا تیک ساده انجام می‌ده. توی بخش «CSS و JS» رخش این گزینه‌ها رو دارید:

• بارگذاری تأخیری JS: همون کاری که با کد بالا انجام دادیم، فقط با یه کلیک و برای همه‌ی اسکریپت‌ها.
• تأخیر JS تا تعامل کاربر: این یکی از انتقال به فوتر هم قوی‌تره. اسکریپت‌ها اصلاً اجرا نمی‌شن تا وقتی کاربر اسکرول کنه یا روی چیزی کلیک کنه. تأثیرش روی امتیاز موبایل واقعاً چشمگیره.
• بارگذاری تأخیری jQuery: با مدیریت وابستگی‌ها، بدون اینکه سایتتون بشکنه.
• فشرده‌سازی (Minify) فایل‌های CSS، JS و HTML برای کم شدن حجم.
• حذف CSS بلااستفاده که توی صفحه اصلاً به کار نمیاد.
• اجبار font-display: swap تا متن قبل از لود شدن فونت نمایش داده بشه.

کنارش هم یه‌سری تنظیم تمیزکاری داره که مستقیم به همین بحث ربط داره: غیرفعال‌سازی ایموجی وردپرس، فایل comment-reply.js، oEmbed، CSS بلوک‌های گوتنبرگ و فونت‌های گوگل. اینا فایل‌هایی هستن که وردپرس به‌صورت پیش‌فرض توی همه‌ی صفحات لود می‌کنه و ۹۰٪ سایت‌ها اصلاً بهشون نیازی ندارن.

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

بعد از انجام تغییرات چیکار کنیم؟

هر تغییری که دادید، این سه مرحله رو فراموش نکنید:

1. کش رو پاک کنید. اگه افزونه‌ی کش دارید، حتماً کش رو خالی کنید، وگرنه همچنان نسخه‌ی قدیمی صفحه رو می‌بینید و فکر می‌کنید تغییراتتون اثری نداشته.
2. سایت رو تست کنید. منو، اسلایدر، فرم تماس، سبد خرید و صفحه‌ی پرداخت رو باز کنید و مطمئن بشید چیزی نشکسته. کنسول مرورگر رو هم چک کنید.
3. دوباره امتیاز بگیرید. با PageSpeed Insights قبل و بعد رو مقایسه کنید تا ببینید واقعاً چقدر بهتر شده. فقط یادتون باشه امتیاز موبایل رو مبنا بذارید، چون گوگل هم همون رو مبنا می‌ذاره.

سوالات متداول

جمع‌بندی

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

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

امیدواریم این آموزش براتون مفید بوده باشه. اگه سؤالی داشتید توی بخش دیدگاه‌ها بپرسید، حتماً جواب می‌دیم. پیروز و سربلند باشید. 🙂

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

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