استفاده از منابع شخص ثالث یا همان Third-Party باعث افزایش زمان بارگذاری وبسایت شما می‌شود. معمولاً توسعه‌دهنده هیچ کنترلی بر منابع شخص ثالث ندارد. خب چاره چیست؟ چطور می‌توان هم از مزایای اسکریپت‌های شخص ثالث بهره‌مند شد و هم به سرعت بارگذاری آسیب وارد نکرد؟ در این مقاله از منتوریکس با ما همراه باشید تا هر آنچه نیاز دارید را درباره بهبود منابع شخص ثالث بدانید.

آنچه در این مطلب می خوانید:

1. مشکلاتی که استفاده از اسکریپت‌های شخص ثالث معمولاً به همراه می‌آورد
2. چطور منابع شخص ثالث را تشخیص دهیم؟
3. بررسی گزارش Audit و بهبود عملکرد منابع شخص ثالث در این ابزار
4. استفاده از DevTools برای انسداد درخواست شبکه
5. چگونه جاوا اسکریپت شخص ثالث را به طور موثر بارگیری کنیم؟
6. جمع‌بندی

در وهله اول این سؤال را باید از خودتان بپرسید که منابع شخص ثالث چه منابعی هستند؟ به‌صورت کلی اسکریپت‌هایی که شما ایجاد نکرده باشید یا اسکریپت‌هایی که از طرف سرورهای شخص ثالث ارائه شوند را می‌توان جزء معمول‌ترین منابع شخص ثالث دانست. اسکریپت‌های شخص ثالث در برخی مواقع می‌توانند عملکرد بسیار مفیدی داشته باشند. به‌عنوان مثال بسیاری از اسکریپت‌های جاوا مخصوص بهبود عملکرد و سرعت بارگذاری وبسایت شما هستند. این در حالی است که گاهی همان اسکریپت‌ها با استفاده از منابع شخص سوم، باعث کاهش سرعت بارگذاری وبسایت شما می‌شوند. خب در چه مواقعی بیشتر از جاوا اسکریپت‌های شخص ثالث استفاده می‌شود؟
مواردی که معمولاً از جاوا اسکریپت شخص ثالث استفاده می‌شود:

• گزینه Shareدر شبکه‌های اجتماعی
• کدهای ایمبد ویدئو پلیر
• خدمات چت آنلاین
• Iframe های تبلیغاتی
• اسکریپت‌های آنالیتیکس
• اسکریپت‌های A/B Testing برای آزمودن عملکرد وبسایت
• کتابخانه Helper همانند کتابخانه‌های فرمتینگ، انیمیشن و فانکشنال

مشکلاتی که استفاده از اسکریپت‌های شخص ثالث معمولاً به همراه می‌آورد

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

• تأثیر منفی بر عملکرد

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

• تأثیر منفی بر شبکه

هنگام استفاده از اسکریپت‌های شخص ثالث، برای دسترسی به این نوع منابع، نیاز به ایجاد یک کانکشن جدید است. ساخت یک کانکشن جدید می‌تواند بسیار زمان‌بر و وقت‌گیر باشد. همین مسئله باعث ایجاد تأخیر و افزایش زمان‌ بارگذاری خواهد شد.

• تأثیر منفی بر رندرینگ

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

چطور منابع شخص ثالث را تشخیص دهیم؟

روش‌های مختلفی برای کاهش منابع شخص ثالث وجود دارد. به‌عنوان مثال شما می‌توانید مرتبا اسکریپت‌های اضافی شخص ثالث را حذف کنید. یا اینکه به‌دنبال منابعی باشید که نیازی به آن‌ها نیست و آن‌ها را حذف نمایید. به هر صورت روش‌های مختلفی برای کاهش منابع شخص ثالث، بهینه‌سازی آن‌ها و استفاده مطلوب از این منابع وجود دارند؛ اما پیش از هر چیز، باید بتوانید همانند یک کارآگاه، منابع مزاحم و مضر شخص ثالث وبسایت خود را تشخیص دهید.
برای این کار از ابزار LightHouse کمک می‌گیریم. در مقالات قبلی به تفصیل درباره این ابزار صحبت کردیم. بخش  Performance audit در Lighthouse به شما کمک می‌کند تا بتوانید در کمترین زمان ممکن، منابع شخص ثالث مضر وبسایت خود را تشخیص دهید و با این کار به سرعت و عملکرد وبسایت خود کمک کنید. برای این کار باید ابتدا به قسمت Diagnostics واقع در Reduce JavaScript execution time و Avoid enormous network payloads بروید. در این قسمت جاوا اسکریپت‌های شخص ثالثی که باعث بروز کاهش عملکرد می‌شوند را خواهید یافت.

برای آنکه بتوانید تمامی اسکریپت‌ها و منابع شخص ثالث صفحه خود را بیابید، باید مراحل زیر را پشت سر بگذارید:

1. در ویندوز از کلید ترکیبی CTRL+Shift+J و در مک از CMD+OPT+J استفاده کنید تا داشبورد اصلی DevTools برای شما باز شود
2. بر روی تب Lighthouse کلیک نمایید
3. حالا بر روی Mobile کلیک کنید
4. تیک Performance را بزنید. توصیه می‌شود تیک مابقی گزینه‌ها را در بخش Audits بردارید
5. بر روی Simulated Fast 3G, 4x CPU Slowdown. کلیک نمایید
6. حالا تیک Clear Storage را بگذارید
7. بر روی گزینه Run Audit کلیک نمایید

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

بررسی گزارش Audit و بهبود عملکرد منابع شخص ثالث در این ابزار

همان طور که اشاره کردیم، بعد از کلیک بر روی گزینه Run Audit، گزارشی جامع و تفکیک شده به شما ارائه داده می‌شود. این گزارش شامل بخش‌های مختلفی می‌شود:

• بخش  Third-party usage

بخش Third-party usage به شما لیستی از انواع مختلف تأمین‌کنندگان شخص ثالث را ارائه می‌دهد. این تأمین‌کنندگان همان‌هایی هستند که از منابع صفحه شما استفاده می‌کنند. در این بخش شما می‌توانید به‌صورت کامل تمام منابع شخص ثالث وبسایت خود را بشناسید. برای کنترل و نظارت بر منابع شخص ثالث، مرحله اول شناخت و تحلیل آن‌هاست. پس این بخش را می‌توان گام اول برای بهینه‌سازی منابع شخص ثالث وبسایت دانست.

• بخش Execution Time

 Execution Time هر اسکریپت شامل سه بخش زمان کل CPU، زمان ارزیابی اسکریپت و زمان آنالیز یا همان Parsing می‌شود. در این بخش شما می‌توانید مقداری که هر اسکریپت باعث افزایش زمان بارگذاری و رندرینگ وبسایت شما می‌شود را مشاهده کنید. به این ترتیب بابت تأخیر بارگذاری وبسایت خود از جانب منابع شخص ثالث، اطلاعات بیشتری پیدا خواهید کرد.

• بخش Payload

در این بخش گزارش شما می‌توانید میزان پی – لود هر اسکریپت شخص ثالث را مشاهده کنید. زمانی که پی – لود بیش از 4،000 کیلوبایت باشد، این بخش به شما اخطار می‌دهد. در این بخش می‌توانید لیستی تفکیک شده از پی – لود مربوط به هر اسکریپت را مشاهده کنید و برای هر کدام به‌صورت جداگانه تصمیم‌گیری نمایید. به این طریق می‌توانید با حذف پی – لود برخی از اسکریپت‌ها، به کاهش هزینه شبکه و افزایش سرعت بارگذاری وبسایت خود کمک شایان توجهی نمایید.

استفاده از DevTools برای انسداد درخواست شبکه

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

در این قسمت می‌توانید بر روی هر یک از این درخواست‌ها کلیک کرده و با انتخاب گزینه Block Request URL، آن را بلاک کنید. در نهایت از پنل Network، می‌توانید تأثیر انسداد درخواست این URL را بررسی نمایید. به‌صورت آزمون و خطا می‌توانید درخواست‌های مختلف را مسدود کنید تا به نتیجه دلخواه برسید. توجه داشته باشید برای بررسی تأثیرگذاری انسداد یک درخواست، باید حداقل 3 بار صفحه را ریلود کنید. گاهی ممکن است نتایج شما واقعی نباشند؛ اما بعد از سه بار ریلود کردن و محاسبه مقدار میانگین، به نتیجه واقعی دست پیدا خواهید کرد.

چگونه جاوا اسکریپت شخص ثالث را به طور موثر بارگیری کنیم؟

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

• استفاده از صفات async و defer  بر روی تگ‌های script

با استفاده از صفات async و defer به مرورگر اعلام می‌کنید که در ابتدا حین بارگذاری اسکریپت در پس‌زمینه، HTML را آنالیز یا همان Parse کرده و سپس کد را پس از بارگذاری کامل صفحه، اجرا نماید. به این شکل دانلود اسکریپت باعث انسداد ساختار DOM و رندرینگ پیج شما نمی‌شود. در نتیجه کاربر می‌تواند قبل از اینکه بارگذاری همه اسکریپت‌ها تمام شد، صفحه نمایش را ببیند.
لازم به ذکر است که صفات async و defer از نظر زمان اجرای اسکریپت با هم تفاوت دارند. وقتی از async استفاده کنید، اسکریپت دقیقاً بعد از اینکه دانلود و بارگذاری پنجره تمام شد، بلافاصله اجرا می‌شود. این یعنی ممکن است پیش از اتمام آنالیز یا همان Parsing، دانلود تمام شده، کد اجرا شود و به بروز اختلال در ساختارDOM ختم شود. در حین حال وقتی یک اسکریپت همراه با صفت Defer اجرا شود، بعد از پایان Parsingیا همان آنالیز HTML و قبل از اجرای DOMContentLoadedاجرا خواهد شد.
پس می‌توان نتیجه گرفت فقط زمانی از async استفاده کنید که اسکریپت احتمال دارد زودتر از فرآیند بارگذاری اجرا شود و از defer زمانی استفاده نمایید که از منابع ضروری کمتری استفاده می‌کنید. به‌عنوان مثال در ساختار یک ویدئو پلیر که در نیمه پایینی صفحه شما قرار دارد می‌توانید از defer استفاده کنید.

• استفاده از Early Connections

شما می‌توانید با استفاده از Early Connections باعث صرفه‌جویی در زمان بارگذاری شوید. برای این کار از دو روش Preconnect و dns-prefetch استفاده می‌شود. به مرورگر می‌گوید که پیچ شما قصد دارد یک کانکشن جدید با یک اوریجین متفاوت ایجاد نماید و می‌خواهید این فرآیند سریعاً و در کمترین زمان ممکن صورت بگیرد.
در عین حال بخشی از دستور را به دست می‌گیرد. ایجاد یک کانکشن جدید شامل DNS لوک - آپ و همچنین TCP Handshake است. همچنین  این فرآیند زمانی که برای یک اورجین Secure انجام شود، شامل TLS Negotiation نیز خواهد شد. dns-prefetch چنین به مرورگر دستور می‌دهد که فقط DNS یک دامین خاص را پیش از آنکه به‌صورت واضح و کامل درخواست شود ریزالور (Resolve) نکند.
در نتیجه می‌توان گفت که از Preconnect برای کاکنکش‌های Critical می‌توان استفاده کرد. درباره دامین‌های شخص ثالثی که ضرورت و ارزش پایین‌تری دارند، می‌توانید از dns-prefetch استفاده نمایید.

• استفاده از روش Lazy-Load

بارها در طول این مقاله اشاره کردیم که استفاده از اسکریپت‌های شخص ثالث، اجتناب‌ناپذیر است. به همین دلیل تمام این روش‌ها را به شما معرفی می‌کنیم تا در عین استفاده از آن‌ها، مانع افزایش زمان بارگذاری وبسایت خودتان شوید. Lazy-Load یکی از روش‌هایی است که می‌توانید برای افزایش سرعت بارگذاری وبسایت خود حین وجود منابع شخص ثالث، استفاده کنید.
در این روش بخشی از محتوای صفحه شما که در نیمه اول پیج به نمایش در می‌آید، با سرعت بیشتری بارگذاری می‌شود. این بخش همان قسمتی است که در لحظه ورود، کاربر با آن مواجه خواهد شد و انتظار دارد که به سرعت رندر شود. از Lazy- Load در نیمه دوم صفحه که کاربر برای دسترسی به آن باید صفحه را به پایین بکشد، استفاده می‌شود. محتوای تبلیغاتی را می‌توانید به‌عنوان Lazy-Loadبه کار ببرید. به این طریق تبلیغات پس از بارگذاری محتوای اصلی وبسایت شما بارگذاری می‌شوند و کاربر حس رضایت‌مندی را تجربه می‌کند. شما می‌توانید از API معروف Intersection Observer برای ایجاد محتوای Lazy-load استفاده کنید.

• استفاده از روش سلف – هاستینگ

با استفاده از اسکریپت‌های شخص ثالث به روش سلف – هاستینگ، کنترل بیشتری بر روند بارگذاری اسکریپت خواهید داشت. در این روش شما می‌توانید زمان DNS Lookup و Round-Trip را کاهش دهید، هدر HTTP Caching را بهینه‌سازی کنید و در عین حال از مزایای سرویس HTTP/2 Server Push بهره‌مند شوید. استفاده از اسکریپت A/B Testingبه روش سلف – هاستینگ می‌تواند زمان بارگذاری وبسایت شما را تا حدود 1.8 ثانیه کاهش دهد. فقط به یاد داشته باشید که با استفاده از روش سلف – هاستینگ، امکان بروزرسانی خودکار اسکریپت‌ها وجود ندارد. البته برای حل این مشکل یک API طراحی شده است که به‌صورت خودکار وظیفه بروزرسانی این اسکریپت‌ها را بر عهده می‌گیرد.

بیشتر بخوانید: دریافت خدمات سئو وبسایت از منتوریکس 

• استفاده از Service Worker برای کش اسکریپت از سرورهای شخص ثالث

استفاده از Service Worker ها به شما این امکان را می‌دهد تا کنترل بیشتری بر روند کش داشته باشید و در عین حال از مزایای CDN شخص ثالث بهره‌مند شوید. استفاده از Service Worker ها به باعث می‌شوند تا بتوانید روند ری – فتچ شدن اسکریپت‌ها از شبکه را به‌خوبی مدیریت و کنترل کنید. همچنین این روش باعث می‌شود تا درخواست‌هایی که از یک منبع غیرضروری شخص‌ثالث به وجود می‌آیند، تا زمانی که بارگذاری پیج به لحظه کلیدی برسد، محدود شوند.
خب دولوپرهای عزیز، شما به‌صورت کامل با چگونگی بهینه‌سازی منابع شخص ثالث آشنا شدید. پس پیش از شروع باید ابتدا منابع شخص ثالث خود را تشخیص دهید، آن‌ها را تحلیل کنید و در نهایت با مدیریت کامل، آن‌ها را بهینه‌سازی نمایید.

بیشتر بخوانید: چگونه جاوا اسکریپت شخص ثالث را به طور موثر بارگیری کنیم؟

جمع‌بندی

در این مقاله به روش‌های بهبود منابع third-party پرداختیم. اگر به مطالعه در زمینه کور وب وایتال علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات core web vitals منتوریکس دیدن کنید. همچنین اگر برای کسب‌وکار خود به مشاوره دیجیتال مارکتینگ یا بهبود سئو سایت نیاز دارید، با ما تماس بگیرید.

تحریریه منتوریکس

این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.