بهینه‌ساز جاسازی‌ها (Embed Optimizer)

توضیحات

هدف این افزونه بهینه‌سازی عملکرد جاسازی‌ها در وردپرس، مانند توییت‌ها، ویدیوهای یوتیوب، تیک‌تاک‌ها و موارد دیگر است.

بهینه‌سازی‌های فعلی شامل موارد زیر است:

1. بارگذاری تنبل جاسازی‌ها درست قبل از اینکه در معرض دید قرار بگیرند.
2. افزودن لینک‌های پیش‌اتصال برای جاسازی‌ها در ناحیه دید اولیه.
3. اختصاص فضا برای جاسازی‌هایی که تغییر اندازه می‌دهند جهت کاهش تغییر چیدمان.

بارگذاری تنبل جاسازی‌ها عملکرد را بهبود می‌بخشد زیرا جاسازی‌ها عموماً بسیار پرمصرف هستند، بنابراین بارگذاری تنبل آن‌ها اطمینان حاصل می‌کند که هنگام بارگذاری صفحه با منابع رقابت نمی‌کنند. بارگذاری تنبل جاسازی‌های مبتنی بر IFRAME به سادگی با افزودن ویژگی loading=lazy انجام می‌شود. بارگذاری تنبل جاسازی‌هایی که شامل تگ‌های SCRIPT هستند با استفاده از یک Intersection Observer انجام می‌شود تا زمانی که نگهدارنده FIGURE جاسازی قرار است وارد ناحیه دید شود را رصد کند و سپس تگ SCRIPT را به صورت پویا درج می‌کند.

این افزونه همچنین توصیه می‌کند که افزونه Optimization Detective را نصب و فعال کنید، که چندین بهینه‌سازی فراتر از بارگذاری تنبل را باز می‌کند. بدون Optimization Detective، بارگذاری تنبل در واقع می‌تواند عملکرد را هنگامی که یک جاسازی در ناحیه دید اولیه قرار دارد کاهش دهد. این به این دلیل است که بارگذاری تنبل چنین عناصر ابتدایی ناحیه دید می‌تواند LCP را کاهش دهد زیرا رندر توسط منطق تعیین مرئی بودن عنصر به تأخیر می‌افتد. به همین دلیل است که هسته وردپرس تمام تلاش خود را می‌کند تا از بارگذاری تنبل تگ‌های IMG که در ناحیه دید اولیه ظاهر می‌شوند اجتناب کند، اگرچه روش‌های اکتشافی سمت سرور کامل نیستند. اینجاست که Optimization Detective وارد می‌شود زیرا تشخیص می‌دهد که آیا یک جاسازی در هر ناحیه دید خاص مربوط به نقطه شکست (breakpoint)، مانند موبایل، تبلت و دسکتاپ ظاهر می‌شود یا خیر. (همچنین افزونه Image Prioritizer را ببینید که Optimization Detective را توسعه می‌دهد تا اطمینان حاصل شود که بارگذاری تنبل بر اساس اینکه آیا IMG در ناحیه دید اولیه است یا خیر، به درستی اعمال می‌شود.)

هنگامی که Optimization Detective فعال است، شروع به ردیابی جاسازی‌هایی می‌کند که بر اساس بازدیدهای واقعی از سایت شما در ناحیه دید اولیه (initial viewport) ظاهر می‌شوند. با در دست داشتن این اطلاعات، Embed Optimizer از بارگذاری تنبل جاسازی‌هایی که در ناحیه دید اولیه هستند اجتناب می‌کند. علاوه بر این، برای چنین جاسازی‌هایی که در بالای صفحه (above-the-fold) قرار دارند، Embed Optimizer همچنین لینک‌های پیش‌اتصال (preconnect) را برای منابعی که می‌دانیم توسط آن جاسازی‌ها استفاده می‌شوند، اضافه می‌کند. برای مثال، اگر یک جاسازی یوتیوب در ناحیه دید اولیه ظاهر شود، Embed Optimizer به همراه Optimization Detective ویژگی loading=lazy را حذف کرده و همزمان یک لینک پیش‌اتصال برای https://i.ytimg.com اضافه می‌کند که دامنه‌ای است که تصاویر پوستر ویدیوهای یوتیوب از آن ارائه می‌شوند. چنین لینک‌های پیش‌اتصالی باعث می‌شوند جاسازی‌های ناحیه دید اولیه حتی سریع‌تر بارگذاری شوند.

ویژگی مهم دیگر در Embed Optimizer که توسط Optimization Detective فعال می‌شود، کاهش تغییرات چیدمان ناشی از جاسازی‌هایی است که هنگام بارگذاری تغییر اندازه می‌دهند. این مورد معمولاً در جاسازی‌های نوشته‌های وردپرس یا توییت‌ها دیده می‌شود. Embed Optimizer ارتفاع تغییر یافته این جاسازی‌ها را ردیابی می‌کند. با ذخیره این ارتفاع‌های تغییر یافته، Embed Optimizer ارتفاع مناسب را روی عنصر FIGURE نگهدارنده به عنوان min-height مخصوص ناحیه دید (viewport) تنظیم می‌کند تا هنگام بارگذاری جاسازی، باعث تغییر چیدمان نشود.

از آنجا که کارآگاه بهینه‌سازی (Optimization Detective) برای یادگیری نحوه چیدمان صفحه به بازدیدهای صفحه متکی است، باید منتظر بمانید تا بازدیدهایی از دستگاه موبایل و دسکتاپ داشته باشید تا اعمال بهینه‌سازی‌ها را مشاهده کنید. همچنین توجه داشته باشید که کارآگاه بهینه‌سازی به طور پیش‌فرض بهینه‌سازی‌ها را برای کاربران مدیر وارد شده اعمال نمی‌کند.

لطفاً توجه داشته باشید که بهینه‌سازی‌ها برای اعمال روی بلوک‌های جاسازی (Embed blocks) در نظر گرفته شده‌اند. بنابراین اگر اعمال بهینه‌سازی‌ها را مشاهده نمی‌کنید، مطمئن شوید که جاسازی‌های شما داخل یک بلوک کلاسیک (Classic Block) نیستند.

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