راه حل مشکل Eliminate render-blocking resources جی تی متریکس GTMetrix

منتشر شده در 13 دسامبر 2021 آخرین به روز رسانی در 13 دسامبر 2021
مهندس محسن حسن پور
2176 2
تصویر شاخص جی تی متریکس

این پست با مسیر متخصص وردپرس مرتبط است. مشاهده مسیر (Roadmap)

حتما تا کنون با مشکل Eliminate render-blocking resources در سایت جی تی متریکس موجه شده اید. امروز قصد داریم این مشکل را بررسی کنیم. ابتدا ببینم این مشکل چرا بوجود می آید و سپس راه حل مشکل Eliminate render-blocking resources در سایت GTMetrix را بیابیم.

چه زمانی با ارور Render-blocking Resources مواجه می شویم؟

هنگام بررسی سایت خود در سایت GTMetrix ممکن است مانند تصویر زیر سایت جی تی متریکس این ارور را به شما نمایش دهد:

"راه

این مشکل به چه معنا است؟

این مشکل بدان معناست که سایت شما برای اجرا ابتدا میخواهد سورس ها را اجرا کند بعد به رندر سایر المان ها بپردازد.

نحوه رندر ریسورس ها در html - حل مشکل Eliminate render-blocking resources
نحوه رندر ریسورس ها در html

به عبارت دیگر ( مطابق عکس بالا ) صفحه برای اجرا ابتدا بخش شماره 1 را اجرا می کند. سپس به یک ریسورس از جنس جاوا اسکریپت می رسد ( بخش 2 ) که نیاز است دانلود شده و اجرا شود. تا زمانی که این فایل جاوا اسکریپت دانلود و اجرا نشود مرور گر به ادامه ی کد ها نمی پردازد. به عبارت ساده تر این مسئله موجب اتلاف وقت می شود و سایر کد ها تا زمانی که فایل جاوا اسکریپت دانلود و اجرا نشود خوانده نخواهد شد.

راه حل رفع مشکل Eliminate render-blocking resources

برای حل این مشکل کافیست async و یا defer را به تگ <script> اضافه کنید. برای فایل های CSS ای که این مشکل را دارند نیز بصورت زیر عمل کنید:

  • اگر بصورت <link rel="stylesheet"> است باید disabled یا media را به تگ link اضافه کنید.
  • اگر بصورت است باید <link rel="import"> است باید async را به تگ link اضافه کنید.

اگر سایت شما وردپرسی است راه حل زیر برای شما مناسب تر است.

راه حل رفع مشکل Eliminate render-blocking resources در سایت های وردپرسی

برای حل این مشکل کافیست به نقطه script_loader_tag هوک بیندازیم. این نقطه دو پارامتر بر میگرداند:

1. هندل $handle
2. تگ $tag

مقدار هندل همان مقداری است که در تابع enqueue هنگام بارگزاری فایل های CSS و JS استفاده شده است. این مورد را می توانید با کلیک راست بر روی صفحه مورد نظر در سایت و انتخاب گزینه view page resource مقدار id سورس css یا سورس جاوا اسکریپت منهای واژه css و یا واژه js بدست می آید. برای مثال نیز مقدار هندل برابر jquery-migrate است.

پیدا کردن مقدار handle در فایل JS

برای مثال کد زیر را مشاهده نمایی:

function add_async_attribute($tag, $handle) {
    
    if ( 'jquery-core' == $handle || 'jquery-migrate' == $handle ){
        return str_replace( ' src', ' async="async" src', $tag );
    }
    return $tag;
    
}
add_filter('script_loader_tag', 'add_async_attribute', 99, 2);

با این تابع به تگ هایی که دارای هندل jquery-migrate و یا jquery-core هستند مقدار اتریبیوت async=”async” اضافه خواهد شد و در نتیجه مشکل مشکل Eliminate render-blocking resources در جی تی متریکس حل می شود.

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

منبع