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

سرفصل‌ها

  • ۱ اهمیت ارور Defer parsing of JavaScript و Prefer asynchronous resources
  • ۲ خلاصه‌ی از خطا Defer parsing of JavaScript
  • ۳ جزئیات بیشتر درباره خطا Defer parsing of JavaScript
  • ۴ نحوه رفع ارور Defer parsing of JavaScript
    • ۴٫۱ راه حل اول
    • ۴٫۲ اره حل دوم
    • ۴٫۳ راه حل سوم
    • ۴٫۴ راه حل چهارم

اهمیت ارور Defer parsing of JavaScript و Prefer asynchronous resources

از سری دوره‌های آموزش کار با سایت GTMetrix در خدمت شما هستیم، قصد داریم در این دوره سایتی بهینه توسط ابزارهای آنلاین مثل GTMetrix جی تی متریکس ایجاد کنیم.

در جلسه قبل درباره ارور Combine images using CSS sprites صحبت کردیم. در این جلسه قصد داریم درباره مشکل Defer parsing of JavaScript و همچنین خطای Prefer asynchronous resources صحبت کنیم و ببینیم چطور میتوانیم این مشکل را در سایت پیدا و رفع کنیم و چرا اصلا این موضوع برای بهینه سازی سایت ما مشکل‌ساز است.

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

توصیه می‌شود خیلی پیگیر این بخش از ارور سایت GTMetrix.com نشوید، به دلیل اینکه گاهی رفع این خطا باعث حذف تمامی فایل‌های جاوااسکریپت یا همان JS می‌شود که در خیلی از سایت‌ها نشدی است. یعنی برای رفع این مشکل در آخر مجبور خواهید بود همه کدهای جاوا اسکریپت JavaScript را از سایتتان پاک کنید تا خطا به شکل کامل رفع و امتیاز ۱۰۰ شود، یا اگر تعداد فایل های جاوااسکریپت زیاد باشد مجبور خواهید بود اول آنها را یکی کنید تا کنترل و مدیریت آن راحت‌تر شود که این روش هر چند در  بحث تئوری مشکلی ندارد ولی در عمل ممکن است با ادغام باعث ایجاد تداخل و مشکلات متعدد شود که حاصل آن عدم اجرای دستور در مکان تعریف شده میباشد، پس از الان خیلی به این خطا حساس نباشید.

خلاصه‌ی از خطای Defer parsing of JavaScript

نام: Defer parsing of JavaScript
نوع: مربوط به جاوااسکریپت
اولویت: بالا
میزان سختی: متوسط
میانگین امتیاز: ۶۹%

جزئیات بیشتر درباره خطا Defer parsing of JavaScript

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

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

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

نحوه رفع ارور Defer parsing of JavaScript

  • راه حل اول

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

  • راه حل دوم

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

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

WP Deferred JavaScriptsSpeed Booster Pack

autoptimize

Async JavaScript

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

JCH Optimize

Javascript Async and Defer

scriptsdown

  • راه حل سوم

استفاده از اتریبیوت های defer و یا async در تگ جاوا اسکریپت هم می‌تواند باعث رفع خطای Defer parsing of JavaScript و هم رفع خطای Prefer asynchronous resources در PageSpeed گوگل شود.

 

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

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

اگر زمان اجرای یک فایل جاوا اسکریپت اهمیتی نداشته باشد، بهتر است از async استفاده شود. ولی اگر لازم باشد بعد از لود شدن کامل عناصر HTML فایل جاواکسریپت اجرا شود باید از defer استفاده کنید. نمونه:

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

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

  • راه حل چهارم

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

این خطا باعث کاهش تعداد درخواست های HTTP هم نیز می‌شود و شما اگر قصد دارید تعداد درخواست های سایت خود را در جهت بهینه سازی، کاهش دهید حتما مقاله رفع خطای Make fewer HTTP requests را هم بخوانید.

اجرای روش‌های بالا جدا از اینکه باعث رفع ارور Defer parsing of JavaScript خواهد شد باعث کاهش خطای Prefer asynchronous resources هم می‌شود. همان‌طور که در اول مقاله اشاره کردیم برای کسب امتیاز ۱۰۰ در این فاکتور گوگل خیلی حساسیت به خرج ندهید، هر چند اگر به شکل اصولی فراخوانی ها انجام شود به سئو داخلی کمک فراخوانی می‌کند.

این جلسه از آموزش افزایش سرعت سایت با ابزار GTmetrix هم به پایان رسید در جلسه بعد به معرفی خطای Enable gzip compression در pagespeed  گوگل میپردازیم.

منبع: میزفا

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

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

پاسخی بگذارید

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