آموزش های وردپرس

آموزش رفع خطای Defer parsing of JavaScript در GTmetrix

یکی از خطاهای رایجی که هنگام تست سرعت سایت با GTmetrix بهش بر میخوریم با عنوان Defer parsing of JavaScript و Prefer asynchronous resources به ما نمایش داده میشه که هر دو مربوط به فایل‌های جاوا اسکریپت هست و برای حل هر دو خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس راهکار یکسانی وجود داره. وقتی با این دو ارور در جی تی متریکس مواجه میشید به این معنی هست که فایل‌های JS در سایت شما به صورت بهینه استفاده نشده و باعث شده که مدت زمان لود سایت بیشتر از حالت عادی باشه. منظور از بهینه سازی این هست که فایل‌ها در جایی شروع به لود شدن میکنند که باعث میشه مدت زمان لود صفحه بالا بره، در صورتی که اگه فایل‌ها رو بزاریم برای مراحل آخر و در فوتر اجراشون کنیم روی لود سایت تاثیر بدی نمیزارن.

در این آموزش از پایگاه دانش میزبان‌فا قصد دارم به نحوه برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس بپردازم که اگه با این دو خطا مواجه شده باشید به راحتی میتونید با راهکارهای معرفی شده برطرف کنید.

آموزش رفع خطای Defer parsing of JavaScript در GTmetrix

همونطور که میدونید در تمامی سایت‌ها از فایل‌های جاوا اسکریپت برای اجرای برخی کارها در مرورگر استفاده میشه و این فایل‌ها هم معمولا نسبت به سایر فایل‌هایی که به صورت کدنویسی شده هستند حجم بیشتری دارند. مرورگر برای اینکه بتونه این فایل‌ها رو اجرا بکنه باید منتظر بمونه تا اول این فایل‌ها اجرا بشن و بعدش متناسب با همین محتوای سایت رو هم به مرور لود کرده و نمایش بده. مشکل درست در این زمان پیش میاد که بخاطر قرار گرفتن این فایل‌ها در Header باعث میشه که مرورگر ابتدا شروع به دانلود و پردازش این فایل‌ها بکنه و بعدش با رفتن به خطوط بعدی سایر قسمت‌های یک سایت رو که شامل محتوای اون هست نمایش بده. برای همین تا زمانی که فایل‌های JS لود بشن مرورگر همچنان در حال لود صفحه است و همین موضوع باعث میشه کاربران فکر کنند این سایت با کندی کار میکنه.

برای همین بهترین راهکاری که برای حل این مشکل وجود داره این هست که فایل‌های JS رو بیایم و در فوتر سایت اجرا کنیم. در این حالت ابتدا مرورگر میاد و صفحه رو به صورت کامل به کاربر نشون میده و وقتی به بخش کدهای جاوا اسکریپت که حالا در فوتر قرار گرفته رسید، متناسب با دستورت برنامه نویسی که این فایل‌ها دارند سایر بخش‌های سایت رو هم نشون میده. طی یک آزمایشی که گوگل در سال 2011 انجام داده برای لود هر 1 کیلوبایت از یک فایل جاوا اسکریپت به طور میانگین 1 میلی ثانیه زمان لازمه تا هم لود بشه و هم خونده بشه. برای همین اگر مجموع فایل‌های جاوا اسکریپت روی 100 کیلوبایت قرار داشته باشند(که قطعا بیشتر از این میتونه باشه) مدت زمان 200 میلی ثانیه صرف میشه که شاید به صورت عددی زیاد به نظر نیاد، اما رو سرعت لود سایت تاثیر زیادی میزاره.

رفع ارور Prefer asynchronous resources و Defer parsing of JavaScript

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

1. قرار دادن فایل‌های JS در فوتر

اگر سایت شما به صورت HTML طراحی شده میتونید با انتقال کدهایی که مربوط به لود فایل جاوا اسکریپت هستند در فوتر سایت کاری کنید که این فایل‌ها در آخرین مرحله از لود یک صفحه شروع به لود شدن و پردازش در مرورگر بکنند. برای همین از قرار دادن این کدها در بخش head جلوگیری کنید. برای انجام این کار کافیه کدهای JS که با تگ <script> در صفحات HTML فراخوانی میشه رو در فوتر، قبل از تگ بسته </body> قرار بدین تا ابتدا متن‌ها، تصاویر، فونت‌ها و CSS ها لود بشن و سپس در مرحله آخر فایل‌های جاوا اسکریپت شروع به لود شدن بکنند.

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

2. استفاده از اتربیوت‌های defer و async

استفاده از دو اتربیوت defer و async در کدهای JS باعث برطرف کردن خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در جی تی متریکس خواهد شد. وقتی از این دو اتربیوت استفاده کنید به مرورگر میگید که منتظر لود شدن کامل فایل‌های جاوا اسکریپت نمونه و همزمان با اینکه داره فایل JS رو لود میکنه سایر فایل‌ها و صفحه HTML رو هم لود بکنه که در این حالت مشکلی از نظر لود صفحه وجود نخواهد داشت. این دو نوع اتربیوت تفاوتی که با هم دارند در این هست که اگر از حالت defer استفاده کنید، مرورگر منتظر میمونه تا صفحه HTML هم لود بشه و بعد شروع به اجرای فایل JS بکنه اما در صورتی که از حالت async استفاده کنید، به محض لود کامل فایل شروع به اجرا شدن میکنه و دیگه منتظر نمیمونه که بعد از لود کامل صفحه HTML اجرا بشه. در نتیجه بهتره که از گزینه async استفاده کنید.

رفع ارور Prefer asynchronous resources و Defer parsing of JavaScript

برای استفاده از این دو اتربیوت کافیه مشابه نمونه زیر عمل کرده و defer یا async را بعد از آدرس فایل وارد کنید.

<script src="demo-defer.js" defer></script>
<script src="demo-async.js" async></script>
امیدوارم این آموزش هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از اون تونسته باشید نسبت به رفع خطای Defer parsing of JavaScript در GTmetrix اقدام کنید. در صورتی که در رابطه با این آموزش سوال یا مشکلی داشتید در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشم.
3.4/5 - (18 امتیاز)

علی یزدان پرست

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

‫۹ دیدگاه ها

  1. با سلام و احترام
    ممنون میشم اگه دقیق بگین که این کد رو در کدوم قسمت سایت وردپرسی قرار بدیم اگه تصویری باشه ممنون میشم >

    1. سلام، این کدها برای زمانی هست که شما فایل جاوا اسکریپت رو مستقیما تو یکی از فایل‌های قالب یا افزونه وارد می‌کنید. بهتره از افزونه‌های معرفی شده استفاده کنید.

  2. سلام از افزونه WP Deferred JavaScripts استفاده میکنم اما بعد از نصب و فعال سازی و قرار دادن کد js بخش مطالب بیشتر بهم میریزه چیکار کنم؟ افزونه Async JavaScript نصب کردم اما به اندازه WP Deferred JavaScripts نمیتونه بهینه کنه و هیچ تغییری در سرعت نمیکنه لطفا بگید چیکار کنم مرسی

  3. من افزونه WP Deferred JavaScripts رو فعال می کنم کل سایت داغون میشه ولی تو gtmetrix میزنه 😁 100% اوکیه

    1. سلام دوست عزیز. بخاطر این هست که شما از قالب رایگان احتمالا استفاده کردید. در قالب های Premium با ساختار قوی، این مشکل ایجاد نمیشود 🙂

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

  5. سلام من افزونه atuoptimize رو استفاده کردم این مشکل حل شد ولی با خطای Enable compresingمواجه شدم. که سرعت سایت خیلی کمتر شد.
    بعد افزونه غیرفعال کردم دوباره خطایDefer parsing of JavaScript داد. راهکار چیه؟؟

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *