جلسه ۳۸ – رفع ارور Reduce the impact of third-party code

آموزش حل مشکل Reduce the impact of third-party code در جی تی متریکس

رفع ارور Reduce the impact of third-party code

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه ۳۷ درباره رفع ارور Reduce JavaScript execution time صحبت کردیم و در این جلسه یعنی جلسه ۳۸ به آموزش رفع خطای Reduce the impact of third-party code در جی تی متریکس می‌پردازیم. این ارور مربوط به کدهای دامنه‌های third-party هست. یعنی کدهایی که از آدرس‌هایی غیر از دامنه خودمون، در صفحات سایت ما قرار دارند. معمولا از این کدها برای اهداف مختلفی استفاده میشه. مثل استفاده از سرویس‌های پخش ویدئو (مثلا آپارات)، سرویس‌های تبلیغاتی (مثل یکتانت و سنجاق)، دکمه‌های اشتراک گذاری مطالب در شبکه‌های اجتماعی، ابزارهای چت آنلاین (مثل رایچت و کریسپ) و… در همه این موارد کدهای third-party در میان کدهای ما قرار می‌گیره و علی‌رغم مزایایی که داره، ممکنه باعث کاهش سرعت لود صفحه و ایجاد توقف در Render شدن صفحه بشه. پس در این مقاله با راهکارهایی برای بهینه سازی این کدها و حل مشکل Reduce the impact of third-party code آشنا می‌شیم.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Reduce the impact of third-party code

میزان سختی: ****
روی چه مواردی تاثیر می‌ذاره: TTI و First Paint و TBT

علت ایجاد خطای Reduce the impact of third-party code چیست؟

درک علت ایجاد خطای Reduce the impact of third-party code در جی تی متریکس جدید نسبتا ساده ست. برای اینکه مرورگر بتونه صفحه رو Render کنه، باید کدهای موجود در سند HTML رو خط به خط بررسی کنه. اما قبل از اون و برای اینکه بتونه HTML رو دانلود کنه، باید بتونه DNS lookup داشته باشه و با سرور ما Connection (اتصال) ایجاد کنه. همچنین موقع بررسی کدهای صفحه، هروقت مرورگر به منابعی برسه که مربوط به دامنه‌های دیگه (third-party) باشند، باید برای سرور اونها DNS lookup و Connection داشته باشه. و اگه در ادامه بررسی کدهای صفحه باز هم به یه دامنه جدید برسه، باز هم همون آش و همون کاسه. اگرچه فرآیند DNS lookup خیلی سریعه ( DNS lookup چیست )، اما به‌هرحال نیاز به زمان داره. از طرفی هرچقدر سرورهای دامنه‌های third-party ضعیف‌تر باشند، تاثیر اونها روی کاهش سرعت صفحه ما بیشتره و رفع ارور Reduce the impact of third-party code اهمیت بیشتری داره.

از طرف دیگه کار به همینجا ختم نمیشه و معمولا این کدها شامل جاوا اسکریپت‌هایی هستند که اجرا کردنشون به عهده main-thread هست (اگه با نقش حیاتی main-thread آشنا نیستید، main-thread چیست رو مطالعه کنید). بنابراین main-thread درگیر اجرای این اسکریپت‌ها میشه که شاید اجرا شدنشون برای لود اولیه صفحه خیلی هم ضروری نباشه. اما این موضوع باعث متوقف شدن Rendering میشه. در نتیجه یه تجربه کاربری ضعیف خواهیم داشت و کاربران ما باید مدت بیشتری به یه صفحه خالی و بدون محتوا زل بزنند و یا اینکه صفحه رو ترک کنند. وجود جاوا اسکریپت‌های متعدد third-party ممکنه روی معیار Time to Interactive هم اثر بذاره و صفحه دیرتر برای کاربران قابل تعامل بشه.

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

منبع ویدئو

چطور خطای Reduce the impact of third-party code را برطرف کنیم؟

با توضیحاتی که ارائه کردیم، مطمئنا باید فکری به حال کدهای third-party موجود در صفحاتمون کنیم. در ابتدا باید این کدها و منابعشون به دقت بررسی بشن تا ببینیم وجودشون واقعا چقدر ضروری و ارزشمنده. بعدش میشه کدهایی که ارزشی به سایت ما اضافه نمی‌کنند رو حذف کنیم و سایر کدها رو بهینه سازی کنیم.

هرچند که خطای Reduce the impact of third-party code در جی تی متریکس به ندرت دیده میشه و ما در پروژه های سرعت سایت میزفا سایتی رو ندیدیم که این مسئله براش به‌صورت جدی و جزو خطاهای مهم محسوب بشه. معمولا ارور Reduce the impact of third-party code برچسب N/A داره و این یعنی GTmetrix فقط اطلاع رسانی درباره این خطا انجام میده. با کلیک روی این خطا در گزارش Structure جی تی متریکس می‌تونیم دامنه‌های third-party رو به همراه مدت زمانی که هر کدوم از منابع اونها main-thread رو متوقف کرده مشاهده کنیم. معمولا اگه تمام JavaScript های این دامنه‌ها بیش از ۲۵۰ میلی ثانیه main-thread رو متوقف کنند، مشکل Reduce the impact of third-party code به‌صورت یه ارور تلقی میشه و باید براش به فکر چاره بود. در ادامه روش‌هایی رو برای حل این مشکل به شما عزیزان آموزش می‌دیم:

۱. حذف کدهای third-party اضافی

اولین راهکاری که پیشنهاد می‌کنیم اینه که با کمک ابزار GTmetrix کدهای third-party موجود در صفحه‌تون رو بررسی کنید و ببینید آیا وجود همه اونها ضروری و ارزشمنده. اگه اینطور نیست، موارد اضافه رو حذف کنید. همچنین تا جایی که میشه، از دامنه‌ها و ابزارهای معتبر استفاده کنید. برای مثال برای آنالیز رفتار کاربران در سایت، ابزار گوگل آنالیتیکس بهترین گزینه هست. در حالیکه برخی از ابزارها و افزونه‌های آمارگیر دیگه، به شدت باعث کاهش سرعت سایت میشن. این موضوع درباره سایر ابزارها هم صدق می‌کنه. موقع انتخاب ابزارهای چت آنلاین یا سرویس‌های تبلیغاتی یا سرویس‌های A/B Test و… سعی کنید از معتبرترین گزینه‌ها استفاده کنید که سرورهای قوی و معتبری هم دارند.

۲. به تعویق انداختن لود و یا اجرای JavaScript

همونطور که اشاره کردیم، JavaScript های دامنه‌های third-party معمولا بیشترین مشکل رو ایجاد می‌کنند که به دلیل درگیر و متوقف کردن main-thread هست. اما با استفاده از متد Async یا Defer میشه لود یا اجرا شدن این فایل‌های JS رو به‌طور بسیار مناسبی به تعویق انداخت. چرا که تو بیشتر موارد اجرای این اسکریپت‌ها برای لود اولیه صفحه ضروری نیست. برای اطلاع درباره روش استفاده از این متدها، مقاله رفع خطای Defer parsing of JavaScript رو مطالعه کنید.

۳. استفاده از Preconnect

همونطور که گفتیم، یکی از مشکلات اصلی درباره خطای Reduce the impact of third-party code مدت زمان لازم برای ایجاد اتصال (Connection) با سرور دامنه‌های third-party هست. اما با استفاده از Preconnect میشه این مشکل رو برای دامنه‌های third-party مهم‌تر تا حد زیادی برطرف کرد. در این زمینه باید جلسه ۳۳ و مقاله رفع ارور Preconnect to required origins رو مطالعه کنید.

۴. استفاده از Lazy Load

برای منابع و فایل‌هایی که در لود اولیه صفحه نقش اصلی ندارند و تو Viewport (قسمتی از صفحه که کاربر بدون اسکرول کردن مشاهده می‌کنه) نیستند، میشه از Lazy Load یا لود تنبل استفاده کرد. اینطوری مرورگر در لحظات اولیه لود صفحه، به منابع مهم و ضروری رسیدگی می‌کنه که باعث افزایش سرعت سایت و حل مشکل Reduce the impact of third-party در جی تی متریکس میشه. تو مقاله لود تنبل چیست روش بهینه سازی عکس‌ها و ویدئوهای سایت با استفاده از لود تنبل رو توضیح دادیم.

جمع بندی

در این مقاله میزفا درباره روش برطرف کردن خطای Reduce the impact of third-party در GTmetrix جدید صحبت کردیم. این ارور مربوط به بهینه سازی کدهای third-party در سایت ما هست. البته این مشکل خیلی کم در سایت‌ها دیده میشه. با این حال روش‌های لازم برای رفع ارور رو گفتیم. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره ارور Remove duplicate modules in JavaScript bundles صحبت می‌کنیم.

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

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
محمدعرفان صدری
چند سالی هست که تخصصی SEO کار می‌کنم و از این راه به توسعه و رشد کسب و کارهای مختلف کمک می‌کنم. تو این راه سعی می‌کنم دانشم رو به روز نگهدارم و همیشه دنبال یادگیری مطالب جدید هستم. از طرفی سال‌ها پیش زبان انگلیسی تدریس می‌کردم و همون موقع متوجه شدم که علاقه زیادی به معلم بودن و آموزش دادن دارم. برای همین سعی می‌کنم هر وقت فرصت پیدا کردم آموخته‌های خودم رو از طریق بلاگ میزفا با شما عزیزان هم به اشتراک بذارم. در حال حاضر علاقه به یادگیری بازاریابی و خصوصا بازاریابی دیجیتال دارم و امیدوارم بتونم تو این زمینه هم آموزش‌های خوبی رو براتون فراهم کنم.
لیست آموزش GTmetrix نسخه جدید

بدون نظر

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر