الزامات مارکتینگ بر ای ورود به دنیای دیجیتال3
الزامات مارکتینگ برای ورود به دنیای دیجیتال پارت آخر
ژوئن 29, 2020
آموزش رفع خطای serve scaled image در GTmetrix
جولای 1, 2020

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

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

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

 

علت خطای Prefer asynchronous resources و خطای Defer parsing of JavaScript در GTmetrix

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

این مقاله رو هم بخونید
آموزش رفع خطای compress componets with gzip درgtmetrix

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

حال چگونه این دو خطا را حل کنیم؟

روش اول : قرار دادن فایل‌های JS در فوتر:

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

 

روش دوم : استفاده از افزونه ها  و پلاگین در وردپرس و جوملا :

روش دوم استفاده از افزونه  وPlugin است، چندین افزونه برای این کار موجود است و ما لیست بهترین پلاگین هایی که این امکان را برای شما فراهم می‌کنند تا فایل‌های JS را در انتهای صفحات لود شوند را لیست کردیم :

چند افزونه مخصوص وردپرس:

  • WP Deferred JavaScripts : بهترین پیشنهاد ما استفاده از افزونه WP Deferred JavaScripts می باشد.این افزونه کاملا خودکار و بدون نیاز به هیچ گونه پیکربندی می تواند با به تعویق انداختن رندر جاوا اسکریپت ها ، خطا Defer parsing of JavaScript را برای وردپرس شما رفع کند. همچنین پس از نصب این افزونه در پیشخوان وردپرس در قسمت تنظیمات –> WP Deferred Javascripts می توانید جاوا و url های که تمایل ندارید defer شوند را وارد این قسمت کنید.
  • Speed Booster Pack : برای شروع، ابتدا آن را نصب و فعال کنید ،سپس مراحل زیر را دنبال کنید:
Speed Booster Pack

مراحل نصب افزونه Speed Booster Pack

 

  1. 1. به پیشخوان وردپرس خود بروید.
  2. در پیشخوان وردپرس خود بر روی Speed Booster کلیک کنید.
  3. در بالا بر روی زبانه Advanced کلیک کنید و گزینه Defer parsing of JS files را فعال کنید.
  4. پس از اتمام، بر روی ذخیره تغییرات کلیک کنید.
این مقاله رو هم بخونید
انتخاب دامنه مناسب - قسمت اول

 

  • autoptimize
  • Async JavaScript

چند افزونه مخصوص جوملا:

  • JCH Optimize
  • Javascript Async and Defer
  • Scriptsdown
فایل‌های JS

خطای Defer parsing of JavaScript

روش سوم : استفاده از اتربیوت‌های defer و async :

 

وجه مشترک این دو اتریبیوت ها این است که مروگر منتظر لود شدن کامل فایل جاوا اسکریپت نمی‌ماند و همزمان با لود کردن این فایل، ادامه فایل HTMرا هم لود می‌کند، که این کار باعث می‌شود صفحه خیلی زودتر در مرورگر کاربر نمایش داده شود.اما تفاوت بین اتریبیوت های defer و async این است که، اسکریپت‌هایی که به صورت async تعریف شده باشند، به محض اینکه به طور کامل لود شوند، اجرا خواهند شد. اما اسکریپت‌های از نوع defer حتی اگر به طور کامل هم لود شوند، منتظر مانده تا کل صفحه HTML لود شود و بعد از آن اجرا می‌شوند .اگر زمان اجرای یک فایل جاوا اسکریپت اهمیتی نداشته باشد، بهتر است از async استفاده شود. ولی اگر لازم باشد بعد از لود شدن کامل عناصر HTML فایل جاواکسریپت اجرا شود باید از defer استفاده کنید. نمونه:

<script src=”demo-defer.js” defer></script>

<script src=”demo-async.js” async></script>

 

اتربیوت‌های defer و async

اتربیوت‌های defer و async

 روش چهارم : حل مشکل JavaScript از طریق فایل function.php به روش دستی :

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

  1. ابتدا وارد پیشخوان وردپرس شده و از منوی ابزار سمت راست ابتدا قسمت نمایش و سپس روی ویرایشگر پوسته کلیک کنید.
  2. پرونده php را انتخاب نمایید.
  3. کد زیر را در پایین همین پرونده قرار دهید.
  4. در پایان به روی دکمه آبی رنگ بروزرسانی در پایین صفحه کلیک نمایید.
این مقاله رو هم بخونید
آموزش رفع خطای Avoid bad requests درGTmetrix

 

در آخر

 

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

مطالب قبلی :

آموزش رفع خطای image optimazation  در gtmetrix

 

Aida Parvaresh
Aida Parvaresh
آیداپرورش هستم،علاقمند به تکنولوژی و تولید محتوا،مدتیه که با تیم خوب هفت وب همکاری دارم.

2 Comments

  1. […] مطلب قبلی : آموزش رفع خطای serve scaled image در gtmetrix […]

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

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