بارگذاری تنبل(Lazy Loading) منابع ثالث با استفاده از فاسادها(facade)

بارگذاری تنبل (Lazy Loading) یک تکنیک بهینه‌سازی عملکرد است که بارگذاری منابع غیرضروری را به تأخیر می‌اندازد تا زمانی که به آن‌ها نیاز باشد. این تکنیک به‌ویژه برای بهبود زمان بارگذاری اولیه صفحه مفید است و مستقیماً بر تجربه کاربری و سئو تأثیر می‌گذارد. زمانی که این تکنیک با منابع شخص ثالث ترکیب می‌شود، می‌تواند به‌طور قابل‌ملاحظه‌ای میزان داده‌های غیرضروری که باید دریافت و پردازش شوند را کاهش دهد و اطمینان حاصل کند که تنها محتوای ضروری ابتدا بارگذاری می‌شود. در زمینه منابع شخص ثالث، این شامل اسکریپت‌ها، تصاویر، فایل‌های CSS و فونت‌های خارجی است که برای رندر اولیه صفحه ضروری نیستند.

منابع شخص ثالث چیستند؟

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

مفهوم فاسادها

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

مزایای بارگذاری تنبل منابع شخص ثالث با استفاده از فاسادها

1. زمان بارگذاری اولیه سریع‌تر: بارگذاری تنبل منابع شخص ثالث با استفاده از فاسادها می‌تواند به‌طور قابل‌ملاحظه‌ای میزان داده‌های بارگذاری‌شده در زمان بارگذاری اولیه صفحه را کاهش دهد. این کار مسدود شدن خط اصلی را کاهش می‌دهد و به صفحه این امکان را می‌دهد که سریع‌تر رندر و قابل تعامل شود، که باعث بهبود عملکرد مشهود و امتیازهای Core Web Vitals مانند "Largest Contentful Paint" (LCP) و "First Input Delay" (FID) می‌شود.
2. کاهش پهنای باند شبکه: با به تأخیر انداختن بارگذاری منابع غیرضروری شخص ثالث، حجم کلی داده‌های منتقل‌شده (پهنای باند شبکه) کاهش می‌یابد. این موضوع به‌ویژه برای کاربران با اتصالات اینترنتی کند یا دستگاه‌های موبایل اهمیت دارد، زیرا کاهش پهنای باند می‌تواند تفاوت زیادی در عملکرد ایجاد کند.
3. تجربه کاربری بهبود یافته: محتوای اصلی صفحه بدون منتظر ماندن برای بارگذاری منابع شخص ثالث قابل مشاهده و قابل تعامل می‌شود. در نتیجه، کاربران می‌توانند سریع‌تر با محتوای صفحه تعامل داشته باشند، حتی اگر دیگر منابع غیرضروری در حال بارگذاری در پس‌زمینه باشند.
4. کاهش ریسک مسدود شدن منابع: بدون بارگذاری تنبل، منابع شخص ثالث می‌توانند خط اصلی را مسدود کرده یا منابع ضروری مانند فایل‌های CSS یا تصاویر را به تأخیر بیندازند. با استفاده از فاسادها، این منابع تنها زمانی که نیاز است بارگذاری می‌شوند و مانع از مسدود شدن مسیر اصلی می‌شوند و مشکلات مربوط به مسدود شدن رندر را به حداقل می‌رسانند.
5. کنترل بیشتر بر وابستگی‌های خارجی: با استفاده از فاسادها برای بارگذاری منابع شخص ثالث، توسعه‌دهندگان کنترل بیشتری بر زمان و تأثیر این وابستگی‌های خارجی دارند. آن‌ها می‌توانند بارگذاری عناصر ضروری صفحه را اولویت‌بندی کنند و منابع شخص ثالث کم‌اهمیت را تنها زمانی که لازم است بارگذاری کنند. این کار به جلوگیری از گلوگاه‌های مرتبط با وابستگی‌ها کمک کرده و عملکرد کلی صفحه را بهبود می‌بخشد.

نحوه پیاده‌سازی بارگذاری تنبل با فاسادها</h2َََ

پیاده‌سازی بارگذاری تنبل با فاسادها نیازمند ایجاد استراتژی‌ای برای نحوه و زمان بارگذاری منابع شخص ثالث است. یکی از روش‌های رایج استفاده از API مشاهده تقاطع (Intersection Observer API) است تا زمانی که کاربر به بخشی از صفحه که نیاز به بارگذاری یک منبع شخص ثالث دارد اسکرول می‌کند، آن را تشخیص دهد. در آن زمان، فاساد به‌طور دینامیک منبع شخص ثالث را بارگذاری می‌کند، بدون آنکه روند بارگذاری صفحه را مسدود کند. به‌عنوان مثال: // استفاده از Intersection Observer برای بارگذاری تنبل منابع شخص ثالثconst thirdPartyElement = document.querySelector("#third-party-widget"); const observer = new IntersectionObserver((entries, observer) => {  entries.forEach(entry => {    if (entry.isIntersecting) {      // بارگذاری دینامیک اسکریپت شخص ثالث      const script = document.createElement("script");      script.src = "https://example.com/third-party.js";      document.body.appendChild(script);      observer.disconnect();    }  });}, { threshold: 0.5 }); // بارگذاری زمانی که 50% از عنصر قابل مشاهده است observer.observe(thirdPartyElement); در این مثال، اسکریپت تنها زمانی بارگذاری می‌شود که عنصر شخص ثالث وارد نمای صفحه (50% قابل مشاهده) شود. این اطمینان حاصل می‌کند که اسکریپت بارگذاری‌شده، روند بارگذاری اولیه صفحه را مسدود نکند.

بهترین شیوه‌ها برای بارگذاری تنبل منابع شخص ثالث با فاسادها

1. اولویت‌بندی منابع ضروری: اطمینان حاصل کنید که تنها منابع غیرضروری شخص ثالث بارگذاری شوند. منابع ضروری مانند فایل‌های CSS یا اسکریپت‌هایی که بر عملکرد اصلی صفحه تأثیر می‌گذارند، باید بدون تأخیر بارگذاری شوند.
2. اجتناب از بارگذاری بیش از حد منابع شخص ثالث: استفاده بیش از حد از منابع شخص ثالث می‌تواند منجر به وابستگی‌های پیچیده و زمان‌های بارگذاری کند شود. سعی کنید تعداد اسکریپت‌ها و ویجت‌های شخص ثالث استفاده‌شده در سایت را به حداقل برسانید.
3. نظارت بر عملکرد منابع شخص ثالث: حتی اگر منابع شخص ثالث به‌صورت تنبل بارگذاری شوند، همچنان می‌توانند بر عملکرد تأثیر بگذارند. به‌طور منظم عملکرد اسکریپت‌ها و ویجت‌های شخص ثالث را بررسی کنید تا مطمئن شوید که تأثیر منفی بر زمان بارگذاری یا تجربه کاربری ندارند.
4. آزمایش در دستگاه‌های مختلف: بارگذاری تنبل ممکن است بر روی دستگاه‌های مختلف به‌ویژه دستگاه‌های موبایل با اتصالات کند متفاوت عمل کند. اطمینان حاصل کنید که پیاده‌سازی بر روی انواع مختلف دستگاه‌ها تست شده باشد تا عملکرد بهینه حاصل شود.
5. استفاده از شبکه تحویل محتوا (CDN): هنگام بارگذاری تنبل منابع شخص ثالث، استفاده از CDN می‌تواند این منابع را سریع‌تر به کاربران برساند. یک CDN می‌تواند زمان بارگذاری منابع را با تحویل آن‌ها از سروری که به محل کاربر نزدیک‌تر است کاهش دهد.

نتیجه‌گیری

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