Technical Tutorials

برنامه‌های وب مدرن به شدت به یکپارچه‌سازی‌های شخص ثالث برای تحلیل، ویجت‌های چت، تبلیغات و مدیریت روابط مشتری وابسته‌اند. اگرچه این ابزارها برای رشد کسب‌وکار ضروری هستند، اما اغلب هزینه عملکرد سنگینی دارند. اسکریپت‌های بهینه‌نشده شخص ثالث می‌توانند رشته اصلی (main thread) را مسدود کنند، زمان اولین نقاشی محتوای اول (FCP) را به تأخیر بیندازند و کیفیت بزرگ‌ترین نقاشی محتوایی (LCP) را کاهش دهند که این امر مستقیماً بر نمرات معیارهای هسته وب (Core Web Vitals) شما تأثیر منفی می‌گذارد.

این راهنده استراتژی‌های عملی برای کاهش این تأثیرات را بررسی می‌کند و بر به تعویق انداختن اجرا، بارگذاری تنبل (lazy-loading) دارایی‌ها و استفاده از محیط‌های ایزوله (sandbox) برای جداسازی هزینه‌های عملکرد از کد اصلی برنامه تمرکز دارد.

درک تأثیر بر معیارهای هسته وب (Core Web Vitals)

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

برای مثال، یک کتابخانه تحلیلی سنگین که در <head> بارگذاری می‌شود، می‌تواند LCP را به اندازه صدها میلی‌ثانیه به تأخیر بیندازد. علاوه بر این، اگر این اسکریپت‌ها باعث محاسبات مجدد چیدمان (layout recalculations) بیش از حد شوند، می‌توانند با جابجایی غیرمنتظره محتوا پس از اجرای اسکریپت‌ها، بر جابجایی تجمعی چیدمان (CLS) نیز تأثیر منفی بگذارند.

استراتژی ۱: به تعویق انداختن اجرا

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

<!-- بد: رندر را مسدود می‌کند -->
<script src="analytics.js"></script>

<!-- خوب: به صورت ناهمگام دانلود می‌شود و پس از پردازش اجرا می‌شود -->
<script src="analytics.js" defer></script>

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

استراتژی ۲: بارگذاری تنبل برای دارایی‌های حیاتی

همه ابزارهای شخص ثالث نیاز ندارند از لحظه بارگذاری صفحه فعال باشند. ویجت‌های چت، جاسازی‌های شبکه‌های اجتماعی و پخش‌کننده‌های ویدیو کاندیدای عالی برای بارگذاری تنبل هستند. می‌توانید از API ناظر تقاطع (Intersection Observer) برای تشخیص زمانی که یک عنصر وارد محدوده دید (viewport) می‌شود، قبل از بارگذاری اسکریپت مرتبط آن استفاده کنید.

const chatWidget = document.querySelector('#chat-widget');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const script = document.createElement('script');
      script.src = 'https://chat-provider.com/widget.js';
      script.onload = () => console.log('Chat widget loaded');
      document.body.appendChild(script);
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

observer.observe(chatWidget);

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

استراتژی ۳: ایزوله‌سازی با Iframeها

برای محتوای پرخطر شخص ثالث مانند تبلیغات یا فیدهای تولید شده توسط کاربر، در نظر بگیرید که آن‌ها را در یک <iframe> با ویژگی‌های allow و sandbox جاسازی کنید. این کار تأثیر عملکرد اسکریپت شخص ثالث را از سند اصلی شما ایزوله می‌کند.

<iframe 
  src="https://ads-provider.com/banner" 
  width="300" 
  height="250"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
  title="Advertisement">
</iframe>

با استفاده از ویژگی loading="lazy"، محتوای iframe تا زمانی که به محدوده دید نزدیک شود، بارگذاری نمی‌شود. ویژگی sandbox محدودیت‌هایی را اعمال می‌کند که اسکریپت جاسازی شده می‌تواند انجام دهد، که امنیت را افزایش داده و احتمالاً استفاده از منابع را محدود می‌کند. توجه داشته باشید که اگرچه iframeها چیدمان را ایزوله می‌کنند، اما همچنان حافظه مصرف می‌کنند، بنابراین باید با احتیاط از آن‌ها استفاده کنید.

نتیجه‌گیری

بهینه‌سازی اسکریپت‌های شخص ثالث به معنای حذف آن‌ها نیست، بلکه به معنای مدیریت زمینه اجرای آن‌هاست. با به تعویق انداختن اسکریپت‌های غیرحیاتی، بارگذاری تنبل ویجت‌های تعاملی و ایزوله‌سازی جاسازی‌های با تأثیر بالا، می‌توانید معیارهای هسته وب (Core Web Vitals) خود را به طور قابل توجهی بهبود بخشید. موجودی اسکریپت‌های خود را به طور منظم با استفاده از ابزارهایی مانند Lighthouse یا WebPageTest بررسی کنید تا گلوگاه‌های جدید را شناسایی کرده و تجربه کاربری با عملکرد بالا را حفظ کنید.