رفع JavaScript مسدودکننده رندر در GTmetrix و وردپرس

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

توی این راهنما، اول معنی هشدار رو خیلی ساده بررسی می‌کنیم. بعد سه روش عملی برای رفع JavaScript مسدودکننده رندر در GTmetrix یاد می‌گیرید: استفاده از WP Rocket، افزونه Speed Booster Pack و راهکار رسمی وردپرس برای کدنویسی. تفاوت Defer، Async و Delay رو هم می‌بینید تا روشی رو انتخاب کنید که سایتتون رو خراب نکنه.

خطای Defer Parsing of JavaScript در GTmetrix یعنی چی؟

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

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

چرا این هشدار رو در گزارش‌های جدید با نام دیگه‌ای می‌بینید؟

عبارت Defer Parsing of JavaScript به گزارش قدیمی GTmetrix مربوطه. گزارش‌های جدید این موضوع رو با بررسی‌هایی مثل Eliminate Render-Blocking Resources، یعنی حذف منابعی که نمایش اولیه رو متوقف می‌کنن، نشون می‌دن. به همین خاطر ممکنه همین مشکل رو ببینید، ولی عبارت قدیمی دقیقاً توی گزارش نوشته نشده باشه.

JavaScript چطور نمایش صفحه رو عقب می‌اندازه؟

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

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

قبل از بهینه‌سازی JavaScript چه کارهایی انجام بدید؟

قبل از تغییر تنظیمات، یک نقطه برگشت و یک نتیجه قابل‌مقایسه بسازید. این چند کار ساده جلوی دردسرهای زیادی رو می‌گیره:

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

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

روش اول: رفع مشکل با افزونه WP Rocket

WP Rocket یک افزونه تجاری برای کش و بهینه‌سازی سرعت وردپرسه. اگه این افزونه از قبل روی سایتتون فعاله، می‌تونید بدون اضافه‌کردن کد، شیوه اجرای JavaScript رو تغییر بدید.

فعال‌کردن گزینه Load JavaScript Deferred

از پیشخوان وردپرس وارد تنظیمات WP Rocket بشید و بخش File Optimization رو باز کنید. توی قسمت JavaScript Files، گزینه Load JavaScript Deferred رو فعال کنید و تغییرات رو ذخیره کنید. این قابلیت ویژگی Defer رو به فایل‌های مناسب اضافه می‌کنه تا اجرای اون‌ها پردازش اولیه HTML رو متوقف نکنه.

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

تفاوت Defer با Delay JavaScript Execution

Defer دریافت فایل رو متوقف نمی‌کنه. مرورگر فایل رو هنگام پردازش HTML می‌گیره و اجرای اون رو تا زمان مناسب عقب می‌اندازه. در مقابل، Delay JavaScript Execution یعنی اجرای بعضی اسکریپت‌ها تا یک تعامل مثل حرکت ماوس، لمس صفحه یا فشردن کلید عقب بیفته.

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

چه زمانی باید یک فایل JavaScript رو مستثنا کنید؟

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

همه فایل‌های jQuery رو از همون اول مستثنا نکنید. jQuery یک کتابخانه JavaScript برای ساده‌ترکردن قابلیت‌های تعاملیه، ولی فقط وقتی باید فایل مرتبط با اون رو مستثنا کنید که آزمایش واقعی یا خطای کنسول نیاز به این کار رو نشون بده.

روش دوم: بهینه‌سازی با افزونه Speed Booster Pack

اگه WP Rocket ندارید، Speed Booster Pack یک گزینه رایگان در مخزن رسمی وردپرسه. قبل از نصب، یادتون نره استفاده هم‌زمان از چند افزونه بهینه‌سازی با قابلیت‌های مشابه می‌تونه باعث تداخل بشه.

نصب افزونه و پیداکردن تنظیمات JavaScript

در پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید. عبارت Speed Booster Pack رو جستجو کنید، افزونه رو نصب کنید و بعد دکمه فعال‌سازی رو بزنید.

بعد از فعال‌سازی، صفحه تنظیمات Speed Booster Pack رو باز کنید و بخش مربوط به JavaScript رو پیدا کنید. نام و جای دقیق بعضی گزینه‌ها ممکنه با نسخه افزونه یا زبان پیشخوان فرق داشته باشه، پس دنبال گزینه‌ای باشید که Defer کردن فایل‌های JavaScript رو کنترل می‌کنه.

فعال‌کردن Defer و ذخیره تنظیمات

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

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

روش سوم: اضافه‌کردن Defer بدون افزونه

اگه با کدنویسی وردپرس آشنا هستید و اسکریپت موردنظر رو خودتون ثبت می‌کنید، می‌تونید از راهکار رسمی وردپرس استفاده کنید. این روش برای تازه‌کارها انتخاب اول نیست، چون باید نام شناسه اسکریپت و وابستگی‌های اون رو درست بشناسید.

چرا نباید فایل‌های اصلی وردپرس یا قالب اصلی رو ویرایش کنید؟

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

استفاده از راهکار رسمی وردپرس برای اسکریپت‌های ثبت‌شده

وردپرس از نسخه ۶.۳ امکان تعیین راهبرد بارگذاری اسکریپت رو داخل wp_enqueue_script() و wp_register_script() داره. آرگومان strategy به وردپرس می‌گه برای اسکریپت ثبت‌شده از defer یا async استفاده کنه و هم‌زمان وابستگی‌های اون رو هم در نظر بگیره.

function mihanwp_enqueue_deferred_script() {
    wp_enqueue_script(
        'mihanwp-example-script',
        get_stylesheet_directory_uri() . '/assets/js/example.js',
        array(),
        '1.0.0',
        array(
            'strategy'  => 'defer',
            'in_footer' => true,
        )
    );
}
add_action( 'wp_enqueue_scripts', 'mihanwp_enqueue_deferred_script' );

توی این نمونه، mihanwp-example-script شناسه اسکریپته و مسیر /assets/js/example.js فقط یک نمونه‌ست. باید شناسه، مسیر، وابستگی‌ها و نسخه رو با اطلاعات واقعی فایل خودتون جایگزین کنید. این کد برای تغییر خودکار همه فایل‌های سایت طراحی نشده.

اضافه‌کردن کد به قالب فرزند یا افزونه اختصاصی

اگه قالب فرزند دارید، کد رو به فایل functions.php همون قالب اضافه کنید. راه تمیزتر اینه که یک افزونه اختصاصی کوچک داشته باشید تا تغییر قالب روی کد اثر نذاره. قبل از فعال‌کردن کد روی سایت اصلی، اون رو توی یک نسخه آزمایشی امتحان کنید.

از فیلتر قدیمی clean_url برای چسباندن defer به همه نشانی‌های دارای .js استفاده نکنید. اون روش اطلاعات وابستگی اسکریپت‌ها رو درست مدیریت نمی‌کنه و حتی ممکنه HTML نادرست بسازه.

تفاوت Async، Defer و Delay JavaScript چیه؟

هر سه روش می‌خوان اثر JavaScript روی نمایش صفحه رو کمتر کنن، ولی زمان دریافت و اجرای فایل توی اون‌ها فرق داره:

• Defer: فایل هم‌زمان با پردازش HTML دریافت می‌شه و بعد از کامل‌شدن پردازش سند اجرا می‌شه.
• Async: فایل هم‌زمان دریافت می‌شه، ولی به‌محض آماده‌شدن اجرا می‌شه و ترتیب اجرای چند فایل تضمین‌شده نیست.
• Delay: اجرای فایل تا زمان تعامل کاربر یا شرطی که ابزار بهینه‌سازی تعیین کرده عقب می‌افته.

Defer چطور ترتیب اجرای فایل‌ها رو حفظ می‌کنه؟

اسکریپت‌های خارجی دارای Defer طبق ترتیب حضورشون در سند اجرا می‌شن. این رفتار برای فایل‌هایی که به هم وابسته هستن مناسب‌تره. بااین‌حال، ثبت اشتباه وابستگی‌ها در وردپرس یا ترکیب کدهای درون‌خطی با فایل‌های خارجی هنوز می‌تونه مشکل درست کنه.

چرا Async برای همه اسکریپت‌ها مناسب نیست؟

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

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

برای بیشتر تازه‌کارها، Defer از طریق یک افزونه معتبر نقطه شروع ساده‌تریه. اگه اسکریپت اختصاصی می‌سازید، راهبرد رسمی وردپرس کنترل دقیق‌تری بهتون می‌ده. Delay می‌تونه نتیجه قوی‌تری بسازه، ولی به آزمایش بیشتری نیاز داره. Async رو فقط برای فایل‌های مستقل انتخاب کنید.

چطور از خراب‌شدن سایت بعد از Defer جلوگیری کنید؟

بعد از هر تغییر، سایت رو هم روی کامپیوتر و هم روی موبایل آزمایش کنید. این موارد رو یکی‌یکی جلو ببرید:

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

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

چطور نتیجه بهینه‌سازی رو در GTmetrix بررسی کنید؟

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

کش سایت و مرورگر رو پاک کنید

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

تست رو با شرایط یکسان دوباره اجرا کنید

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

گزارش Eliminate Render-Blocking Resources رو بررسی کنید

توی جزئیات گزارش، بخش Eliminate Render-Blocking Resources رو باز کنید. بررسی کنید فایل JavaScript هدف هنوز توی فهرست دیده می‌شه یا نه. یادتون باشه فایل‌های CSS هم می‌تونن مسدودکننده رندر باشن و Defer کردن JavaScript اون‌ها رو اصلاح نمی‌کنه.

تغییرات TBT، LCP و CLS رو مقایسه کنید

TBT یا Total Blocking Time مدت زمانی رو نشون می‌ده که کارهای سنگین، رشته اصلی مرورگر رو در محیط آزمایش مشغول نگه می‌دارن. TBT جزو Core Web Vitals نیست، ولی یک معیار آزمایشگاهی مفید برای پیدا‌کردن کارهای سنگین JavaScript محسوب می‌شه.

LCP زمان نمایش بزرگ‌ترین محتوای قابل‌دیدن و CLS میزان جابه‌جایی ناخواسته چیدمان رو اندازه می‌گیرن. Core Web Vitals فعلی شامل LCP، INP و CLS هستن. پس TBT، LCP و CLS گزارش GTmetrix رو کنار تجربه واقعی کاربر بررسی کنید و فقط دنبال سبزشدن یک عدد نباشید.

اگه بعد از Defer بخشی از سایت خراب شد چه کار کنید؟

فایل مشکل‌ساز رو پیدا و مستثنا کنید

اول Defer رو موقتاً خاموش کنید. اگه مشکل برطرف شد، گزینه رو دوباره روشن کنید و فایل‌های مشکوک رو یکی‌یکی مستثنا کنید. نام فایل توی کنسول مرورگر یا بخش Network معمولاً سرنخ خوبی بهتون می‌ده.

وابستگی اسکریپت‌ها رو بررسی کنید

بعضی فایل‌ها قبل از اجرا به jQuery یا یک فایل دیگه نیاز دارن. اگه کد اختصاصی دارید، وابستگی رو در آرایه وابستگی‌های wp_enqueue_script() ثبت کنید. صرفاً تغییر ترتیب ظاهری تگ‌ها همیشه مشکل رو حل نمی‌کنه.

تنظیمات رو مرحله‌به‌مرحله برگردونید

اگه چند گزینه مثل ترکیب فایل‌ها، کم‌حجم‌سازی، Defer و Delay رو روشن کردید، همه رو یک‌جا دست‌کاری نکنید. گزینه‌ها رو یکی‌یکی به حالت قبل برگردونید و بعد از هر مرحله کش رو پاک کنید. این کار دقیقاً نشون می‌ده کدوم تنظیم باعث مشکل شده.

سؤال‌های رایج

جمع‌بندی و انتخاب روش مناسب

برای رفع JavaScript مسدودکننده رندر در GTmetrix، اول فایل مشکل‌ساز رو پیدا کنید و نتیجه فعلی رو ثبت کنید. اگه WP Rocket دارید، گزینه Load JavaScript Deferred نقطه شروع مناسبیه. برای یک راه رایگان می‌تونید Speed Booster Pack رو آزمایش کنید. اگه اسکریپت اختصاصی دارید، از آرگومان رسمی strategy => defer در وردپرس استفاده کنید.

بعد از هر تغییر، کش رو پاک کنید و منو، فرم، اسلایدر، سبد خرید و پرداخت رو امتحان کنید. در پایان هم گزارش Eliminate Render-Blocking Resources و تغییرات TBT، LCP و CLS رو با شرایط یکسان مقایسه کنید. بهترین تنظیم، تنظیمی نیست که فقط امتیاز بیشتری می‌گیره؛ باید سرعت قابل‌احساس و کارکرد درست سایتتون رو با هم حفظ کنه.

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

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