سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه ۳۷ درباره رفع ارور Reduce JavaScript execution time صحبت کردیم و در این جلسه یعنی جلسه ۳۸ به آموزش رفع خطای Minimize third-party usage یا اسم قدیم Reduce the impact of third-party code در جی تی متریکس می‌پردازیم.
این ارور مربوط به کدهای دامنه‌های third-party هست. یعنی کدهایی که از آدرس‌هایی غیر از دامنه خودمون، در صفحات سایت ما قرار دارند.
معمولا از این کدها برای اهداف مختلفی استفاده میشه. مثل استفاده از سرویس‌های پخش ویدئو (مثلا آپارات)، سرویس‌های تبلیغاتی (مثل یکتانت و سنجاق)، دکمه‌های اشتراک گذاری مطالب در شبکه‌های اجتماعی، ابزارهای چت آنلاین (مثل رایچت و کریسپ) و… در همه این موارد کدهای third-party در میان کدهای ما قرار می‌گیره و علی‌رغم مزایایی که داره، ممکنه باعث کاهش سرعت لود صفحه و ایجاد توقف در Render شدن صفحه بشه.
پس در این مقاله با راهکارهایی برای بهینه سازی این کدها و حل مشکل Reduce the impact of third-party code آشنا می‌شیم.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Minimize third-party usage
میزان سختی: ****
روی چه مواردی تاثیر می‌ذاره: TTI و First Paint و TBT
علت ایجاد خطای Minimize third-party usage چیست؟
درک علت ایجاد خطای Minimize third-party usage یا 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 صحبت می‌کنیم.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.
