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

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

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

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

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

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

به عبارت دیگر ( مطابق عکس بالا ) صفحه برای اجرا ابتدا بخش شماره 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 است.

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

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 در جی تی متریکس حل می شود.

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

منبع