با این کار جزو نفرات اول دوره GA4 منتوریکس هستید. با شما در ارتباط هستیم :)
  • 1
  • 2
  • 3
کتاب الکترونیکی رایگان

برو مرحله بعدی
  • 1
  • 2
  • 3
دوست عزیز
برای ارسال کتاب به ایمیل و شماره موبایل شما نیاز داریم.
برو مرحله آخر
  • 1
  • 2
  • 3
کتاب شما آماده است، دکمه دریافت لینک دانلود را بزنید.

لینک دانلود به شما ایمیل و پیامک شد.

چگونه منابع third-party خود را بهبود ببخشیم؟

تحریریه منتوریکس
تحریریه منتوریکس
10:45، 1400/01/08
چگونه منابع third-party خود را بهبود ببخشیم؟
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه منابع third-party خود را بهبود ببخشیم؟


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

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

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

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

  • گزینه 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 به شما لیستی از انواع مختلف تأمین‌کنندگان شخص ثالث را ارائه می‌دهد. این تأمین‌کنندگان همان‌هایی هستند که از منابع صفحه شما استفاده می‌کنند. در این بخش شما می‌توانید به‌صورت کامل تمام منابع شخص ثالث وبسایت خود را بشناسید.

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

بخش Third-party usage

  • بخش Execution Time

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

بخش Execution Time

  • بخش Payload

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

بخش Payload

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

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

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

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

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

چگونه جاوا اسکریپت شخص ثالث (Third-Party) کند را پیدا کنیم؟

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

روش 5 دقیقه‌ای برای یافتن اسکریپت کند

بخش 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 کلیک کنید
یافتن اسکریپت کند

بخش Third-party usage

این ابزار Lighthouse در بخش Third-party usage به شما لیستی از تأمین‌کنندگان شخص ثالث را ارائه می‌دهد که از منابع صفحه شما استفاده می‌کنند. این بررسی اجمالی به شما کمک می‌کند تا درک بهتری از کد‌های اضافی شخص ثالث صفحه خود داشته باشید. این ابزار در افزونه Lighthouse موجود است و به زودی به Devtools در کروم77 نیز اضافه خواهد شد. 

بخش Third-party usage

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

بخش Reduce JavaScript execution time به شما اسکریپت‌هایی را نشان می‌دهد که زمان زیادی صرف تجزیه و تحلیل، اجرا و ارزیابی آن‌ها می‌شود. در همین بخش می‌توانید تیک گزینه Show third-party resources را بزنید تا اسکریپت‌هایی که به‌شدت از ظرفیت CPU استفاده می‌کنند را هم شناسایی کنید.

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

از پی – لود بیش از حد شبکه جلوگیری کنید

ابزار Lighthouse با کمک Avoid enormous network payloads، تمام درخواست‌های شبکه (شامل درخواست‌های شخص ثالث) را که باعث کاهش زمان بارگذاری صفحه شما می‌شوند را تشخیص می‌دهد. زمانی که پی – لود شبکه شما بیش از 4،000 کیلوبایت باشد، سیستم به شما اخطار خواهد داد. 

از پی – لود بیش از حد شبکه جلوگیری کنید

درخواست شبکه را در Chrome DevTools، بلاک کنید

بخش network request blocking ابزار Chrome DevTools به شما اجازه می‌دهد تا واکنش صفحه وبسایت‌تان تحت شرایطی که منابع یک اسکریپت خاص، استایل‌شیت و غیره موجود نیست، را مشاهده کنید.

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

برای فعال‌سازی درخواست انسداد باید مراحل زیر را پشت سر بگذارید:

  1. در ویندوز از کلید ترکیبی CTRL+Shift+J و در مک از CMD+OPT+J استفاده کنید تا داشبورد اصلی ابزار DevTools برای شما باز شود
  2. بر روی تب Network کلیک کنید
  3. بر روی هر درخواستی که می‌خواهید بلاک شود در همین پنل کلیک راست کنید
  4. بر روی Block Request URL کلیک کنید
درخواست شبکه را در Chrome DevTools، بلاک کنید

در این لحظه یک منوی کشویی در ابزار DevTools ظاهر می‌شود. از این پنجره می‌توانید مشاهده کنید که کدام درخواست‌ها بلاک شده‌اند.
برای اینکه تأثیر منفی اسکریپت‌های شخص ثالث مزاحم را اندازه‌گیری کنید، باید مراحل زیر را انجام دهید:

  1. از پنل Network می‌توانید برای اندازه‌گیری زمانی که بارگذاری صفحه شما زمان می‌برد، استفاده کنید. برای آنکه این تست در شرایط واقعی و نه آزمایشگاهی و ایزوله انجام شود، باید network throttling و CPU throttling را انتخاب کنید. توجه داشته باشید که گاهی اثر اسکریپت‌های شخص ثالث بر روی شبکه‌های بسیار سریع و قدرتمند همانند دسکتاپ‌های پرسرعت، بسیار ناچیز و قابل چشم‌پوشی است. در چنین شرایطی حتماً باعث تأثیر منفی اسکریپت را بر روی موبایل نیز اندازه‌گیری کنید
  2. URL ها یا دامین‌هایی که احساس می‌کنید مربوط به اسکریپت شخص ثالث مزاحم شما هستند را بلاک کنید
  3. صفحه را ری – لود کرده و زمان بارگذاری را حالا بدون حضور جاوا اسکریپت‌های مزاحم شخص ثالث اندازه‌گیری کنید

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

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

در پنل Performance ابزار DevTools می‌توانید از قابلیت Multiple Recordings در این راستا استفاده کنید. این قابلیت جدید، فرآیند کار را تا حد بسیاری ساده‌تر می‌کند.

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

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

  • بررسی Preconnect

link rel="preconnect" به مرورگر اطلاع می‌دهد که صفحه شما می‌خواهد یک کانکشن جدید با یک اوریجین دیگر ایجاد کند و می‌خواهید این فرآیند به سرعت انجام شود. زمانی که درخواست یک منبع از یک اوریجین پری – کانکتد به وجود بیاید، دانلود به سرعت انجام می‌شود.

بررسی Preconnect

توجه

فقط پری – کانکتد به دامین Critical از کانکشن سریعتر استفاده می‌کند. دلیل این است که مرورگر هر کانکشنی که در عرض 10 ثانیه مورد استفاده قرار نگیرد را از بین می‌برد. زمانی که در مواقع غیرضروری از پری – کانکتینگ استفاده کنید، باعث به تأخیر افتادن منابع خود خواهید شد. پس تعداد دامین‌های پری – کانکتد خود را محدود کنید و برای بررسی تأثیر آن‌ها بر عملکرد وبسایت خود، از تست‌ مربوطه استفاده نمایید.

  • بررسی dns-prefetch

link rel="dns-prefetch در حقیقت بخشی از link rel="preconnect" را مدیریت می‌کند. ایجاد یک کانکشن جدید شامل DNS LookUp و همچنین TCP Handshake می‌شود. در ضمن این فرآیند برای یک اوریجین Secure، شامل TLS Negotiation نیز خواهد شد. dns-prefetch چنین دستور می‌دهد که مرورگر فقط DNS یک دامین خاص را قبل از اینکه به‌صورت واضح و کامل درخواست شود را ریزالور (Resolve) کند.

روش Preconnect برای کانکش‌های ضروری و Critical بسیار مفید است و در مورد دامین‌های شخص ثالثی که ضرورت و ارزش کمتری دارند می‌توانید از روش dns-prefetch استفاده کنید. 

بررسی dns-prefetch
لازم به ذکر است مرورگرهایی که از dns-prefetch پشتیبانی می‌کنند، با مرورگرهایی که از Preconnect پشتیبانی می‌کنند، کمی تفاوت دارند. پس می‌توان گفت که از dns-prefetch می‌توانید به‌عنوان فال – بک مرورگری که از Preconnect پشتیبانی نمی‌کند استفاده کنید. برای این کار می‌توانید از کد زیر استفاده نمایید:

بررسی dns-prefetch

  • استفاده از صفات 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 در نیمه دوم صفحه که کاربر برای دسترسی به آن باید صفحه را به پایین بکشد، استفاده می‌شود.

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

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

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

استفاده از اسکریپت A/B Testingبه روش سلف – هاستینگ می‌تواند زمان بارگذاری وبسایت شما را تا حدود 1.8 ثانیه کاهش دهد. فقط به یاد داشته باشید که با استفاده از روش سلف – هاستینگ، امکان بروزرسانی خودکار اسکریپت‌ها وجود ندارد. البته برای حل این مشکل یک API طراحی شده است که به‌صورت خودکار وظیفه بروزرسانی این اسکریپت‌ها را بر عهده می‌گیرد.

برای اینکه درباره پروتکل http2 بیشتر بدانید؛ پیشنهاد می کنیم مقاله http2 چیست و چگونه از HTTP2 استفاده کنیم؟ را نیز مطالعه کنید. 

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

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

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

سخن پایانی

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

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

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

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف