اولویت‌بندی تصاویر (Image Prioritizer)

توضیحات

این افزونه بارگذاری تصاویر (و ویدیوها) را با اولویت‌بندی برای بهبود بزرگترین ترسیم محتوایی (LCP)، بارگذاری تنبل و انتخاب دقیق‌تر اندازه تصویر بهینه‌سازی می‌کند.

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

1. افزودن لینک‌های پیش‌بارگذاری (preload) با fetchpriority=high مخصوص نقطه شکست (هم به عنوان عناصر LINK[rel=preload] و هم سرآیندهای پاسخ Link) برای URLهای تصویر عناصر LCP:
   1. یک عنصر IMG، شامل ویژگی‌های srcset/sizes که به صورت imagesrcset/imagesizes در LINK ارائه شده‌اند.
   2. اولین عنصر SOURCE با ویژگی type در یک عنصر PICTURE. (عناصر PICTURE جهت‌دهی هنری (Art-directed) که از مدیا کوئری‌ها استفاده می‌کنند، پشتیبانی نمی‌شوند.)
   3. عنصری با ویژگی style خطی برای background-image CSS.
   4. عنصری با background-image CSS که با یک شیوه‌نامه اعمال شده است (زمانی که تصویر از یک منشأ مجاز باشد).
   5. تصویر poster یک عنصر VIDEO.
2. اطمینان از اینکه fetchpriority=high تنها زمانی به یک IMG اضافه می‌شود که عنصر LCP در تمام نقاط شکست واکنش‌گرا باشد.
3. افزودن fetchpriority=low به تگ‌های IMG که در ناحیه دید اولیه ظاهر می‌شوند اما قابل مشاهده نیستند، مانند زمانی که اسلایدهای بعدی کاروسل هستند.
4. بارگذاری تنبل:
   1. اعمال بارگذاری تنبل روی تگ‌های IMG بر اساس اینکه آیا در ناحیه دید اولیه هر نقطه شکست (breakpoint) ظاهر می‌شوند یا خیر.
   2. پیاده‌سازی بارگذاری تنبل تصاویر پس‌زمینه CSS که از طریق ویژگی‌های style خطی اضافه شده‌اند.
   3. بارگذاری تنبل تگ‌های VIDEO با تنظیم ویژگی‌های مناسب بر اساس اینکه آیا در ناحیه دید اولیه ظاهر می‌شوند یا خیر. اگر یک VIDEO عنصر LCP باشد، مقدار preload=auto را دریافت می‌کند؛ اگر در ناحیه دید اولیه باشد، مقدار پیش‌فرض preload=metadata باقی می‌ماند؛ اگر در ناحیه دید اولیه نباشد، مقدار preload=none را دریافت می‌کند. همچنین ویژگی‌های اولیه preload، autoplay و poster ویدیوهای بارگذاری تنبل، هنگامی که VIDEO وارد ناحیه دید می‌شود، بازیابی می‌شوند.
5. Responsive image sizes:
   1. Ensure sizes=auto is set on IMG tags after setting correct lazy-loading (above).
   2. ~~Compute the sizes attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by sizes=auto).~~ (This has been removed due to an issue; use Enhanced Responsive Images instead.)
6. کاهش اندازه تصویر poster یک VIDEO از اندازه کامل به اندازه مناسب برای حداکثر عرض ویدیو (در دسکتاپ).

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

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

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