جاوا اسکریپت شخص ثالث کند را شناسایی کنید

مهارت های کارآگاهی عملکرد خود را با Lighthouse و Chrome DevTools افزایش دهید.

Milica Mihajlija

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

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

اگر فقط 5 دقیقه فرصت دارید

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

برای اجرای ممیزی:

1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
2. روی تب Lighthouse کلیک کنید.
3. روی موبایل کلیک کنید.
4. چک باکس Performance را انتخاب کنید. (شما می توانید بقیه چک باکس ها را در قسمت حسابرسی پاک کنید.)
5. روی Simulated Fast 3G, 4x CPU Slowdown کلیک کنید.
6. چک باکس Clear Storage را انتخاب کنید.
7. روی Run audits کلیک کنید.

استفاده از شخص ثالث

ممیزی استفاده شخص ثالث Lighthouse لیستی از ارائه دهندگان شخص ثالث را که یک صفحه استفاده می کند نشان می دهد. این بررسی اجمالی می تواند به شما در درک بهتر تصویر بزرگ و شناسایی کدهای اضافی شخص ثالث کمک کند. ممیزی در افزونه Lighthouse موجود است و به زودی به DevTools در Chrome 77 اضافه خواهد شد.

کاهش زمان اجرای جاوا اسکریپت

ممیزی زمان اجرای جاوا اسکریپت Lighthouse Reduce اسکریپت هایی را برجسته می کند که تجزیه، کامپایل یا ارزیابی آنها زمان زیادی می برد. برای کشف اسکریپت های شخص ثالث فشرده CPU، کادر انتخاب Show Sources شخص ثالث را انتخاب کنید.

از بارهای سنگین شبکه خودداری کنید

ممیزی بارهای عظیم شبکه Lighthouse Avoid درخواست های شبکه را شناسایی می کند - از جمله درخواست های شخص ثالث - که ممکن است زمان بارگذاری صفحه را کاهش دهد. زمانی که بار شبکه شما از 4000 کیلوبایت بیشتر شود، ممیزی با شکست مواجه می شود.

درخواست‌های شبکه را در Chrome DevTools مسدود کنید

مسدود کردن درخواست شبکه Chrome DevTools به شما این امکان را می‌دهد که ببینید وقتی یک اسکریپت، صفحه سبک یا منبع خاصی در دسترس نیست، صفحه شما چگونه رفتار می‌کند. پس از شناسایی اسکریپت‌های شخص ثالثی که گمان می‌کنید بر عملکرد تأثیر می‌گذارند، با مسدود کردن درخواست‌های آن اسکریپت‌ها، نحوه تغییر زمان بارگذاری خود را اندازه‌گیری کنید.

برای فعال کردن مسدود کردن درخواست: 1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود. 1. روی تب Network کلیک کنید. 1. روی هر درخواستی در پنل Network کلیک راست کنید. 1. Block request URL را انتخاب کنید.

یک برگه مسدود کردن درخواست در کشوی DevTools ظاهر می شود. شما می توانید مدیریت کنید که کدام درخواست ها در آنجا مسدود شده اند.

برای اندازه گیری تاثیر اسکریپت های شخص ثالث:

1. با استفاده از پنل شبکه ، مدت زمان بارگذاری صفحه شما را اندازه بگیرید. برای شبیه‌سازی شرایط دنیای واقعی، throttling شبکه و throttling CPU را روشن کنید. (در اتصالات سریع‌تر و سخت‌افزار دسکتاپ، تأثیر اسکریپت‌های گران‌قیمت ممکن است به اندازه تلفن همراه نباشد.)
2. URL ها یا دامنه های مسئول اسکریپت های شخص ثالث را که فکر می کنید مشکل ساز هستند مسدود کنید.
3. صفحه را دوباره بارگیری کنید و دوباره اندازه گیری کنید که چقدر طول می کشد تا بدون اسکریپت های شخص ثالث مسدود شده بارگذاری شود.

امیدواریم شاهد بهبود سرعت باشید، اما گاهی اوقات مسدود کردن اسکریپت های شخص ثالث ممکن است تاثیری را که انتظار دارید نداشته باشد. اگر اینطور است، لیست URL های مسدود شده را کاهش دهید تا زمانی که آدرسی که باعث کندی می شود را جدا کنید.

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