پیش‌بارگیری تصاویر واکنش‌گرا

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

تاریخ انتشار: ۳۰ سپتامبر ۲۰۱۹، آخرین به‌روزرسانی: ۱۰ ژوئیه ۲۰۲۶

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

نمای کلی تصاویر واکنش‌گرا

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

فرض کنید درحال مرور وب در صفحه‌نمایشی با عرض ۳۰۰ پیکسل هستید و صفحه تصویری با عرض ۱۵۰۰ پیکسل درخواست می‌کند. آن صفحه مقدار زیادی از داده تلفن همراه شما را هدر داده است چون صفحه‌نمایش شما نمی‌تواند با آن وضوح اضافی کاری انجام دهد. در حالت ایده‌آل، مرورگر نسخه‌ای از تصویر را واکشی می‌کند که فقط کمی پهن‌تر از اندازه صفحه‌نمایش شما است، مثلاً ۳۲۵ پیکسل. این کار باعث می‌شود تصویر با وضوح بالا بدون هدر رفتن داده‌ها بار شود و تصویر سریع‌تر بار شود.

تصاویر واکنش‌گرا به مرورگرها اجازه می‌دهد منابع تصویری مختلفی را برای دستگاه‌های مختلف واکشی کنند. اگر از شبکه توزیع محتوای تصویر استفاده نمی‌کنید، چند بعد برای هر تصویر ذخیره کنید و آن‌ها را در مشخصه srcset مشخص کنید. مقدار w به مرورگر می‌گوید که عرض هر نسخه چقدر است، بنابراین می‌تواند نسخه مناسب را برای هر دستگاهی انتخاب کند:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

نمای کلی پیش‌بارگیری

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

<link rel="preload" as="image" href="important.png" fetchpriority="high">

‫imagesrcset و imagesizes

عنصر <link> از مشخصه‌های imagesrcset و imagesizes برای پیش‌بارگیری تصاویر واکنش‌گرا استفاده می‌کند. از آن‌ها در کنار <link rel="preload"> استفاده کنید، با نحو srcset و sizes که در عنصر <img> استفاده شده است.

برای مثال، اگر می‌خواهید تصویر واکنش‌گرایی را که با این کد مشخص شده است پیش‌بارگیری کنید:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

می‌توانید این کار را با افزودن موارد زیر به <head> HTML خود انجام دهید:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

این کار درخواستی را بااستفاده از همان منطق انتخاب منبعی که srcset و sizes استفاده می‌کنند آغاز می‌کند.

موارد استفاده

در زیر چند مورد استفاده برای پیش‌بارگیری تصاویر واکنش‌گرا آورده شده است.

پیش‌بار کردن تصاویر واکنش‌گرای تزریق‌شده به‌صورت پویا

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

می‌توانید این مشکل را در وب‌سایتی با گالری تصاویر بارشده به‌صورت پویا بررسی کنید:

  1. این نمونه نمایشی نمایش اسلاید را در برگه جدیدی باز کنید.
  2. برای باز کردن DevTools، کلید Control+Shift+J (یا Command+Option+J در Mac) را فشار دهید.
  3. روی برگه شبکه کلیک کنید.
  4. در فهرست کرکره‌ای Throttling (محدود کردن سرعت)، Fast 3G (نسل سوم سریع) را انتخاب کنید.
  5. چارگوش انتخاب غیرفعال کردن حافظه نهان را غیرفعال کنید.
  6. صفحه را مجدد بار کنید.
پانل شبکه Chrome DevTools آبشاری را نشان می‌دهد که در آن منبع JPEG فقط پس‌از بارگیری برخی‌از جاوا اسکریپت‌ها شروع به بارگیری می‌کند.
بدون پیش‌بارگیری، تصاویر پس‌از اینکه مرورگر اجرای اسکریپت را به‌پایان رساند شروع به بار شدن می‌کنند. برای تصویر اول، این تأخیر غیرضروری است.

استفاده از preload در اینجا به تصویر اجازه می‌دهد تا زودتر از موعد بارگیری شود، بنابراین می‌تواند آماده نمایش باشد وقتی مرورگر نیاز به نمایش آن دارد.

پانل شبکه Chrome DevTools که آبشاری را با منبع JPEG نشان می‌دهد که به‌موازات برخی‌از جاوا اسکریپت‌ها بارگیری می‌شود.
پیش‌بار کردن تصویر اول باعث می‌شود که هم‌زمان با دستورگان شروع به بار شدن کند.

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

پیش‌بار کردن تصاویر پس‌زمینه بااستفاده از image-set

اگر تصاویر پس‌زمینه متفاوتی برای تراکم‌های مختلف صفحه‌نمایش دارید، می‌توانید آن‌ها را در CSS خود با نحو image-set مشخص کنید. سپس مرورگر می‌تواند براساس DPR صفحه‌نمایش، انتخاب کند کدام‌یک را نمایش دهد.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

مشکل تصاویر پس‌زمینه CSS این است که مرورگر آن‌ها را تنها پس‌از بارگیری و پردازش همه CSS در <head> صفحه کشف می‌کند.

می‌توانید این مشکل را در وب‌سایت نمونه با تصویر پس‌زمینه واکنش‌گرا بررسی کنید.

پانل شبکه Chrome DevTools که آبشاری را با منبع JPEG نشان می‌دهد که فقط پس‌از CSS شروع به بارگیری می‌کند.
در این مثال، بارگیری تصویر تا زمانی که CSS به‌طور کامل بارگیری نشود شروع نمی‌شود، که باعث تأخیر غیرضروری در نمایش تصویر می‌شود.

پیش‌بارگیری تصویر واکنش‌گرا به شما امکان می‌دهد آن تصاویر را سریع‌تر بار کنید.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

با حذف مشخصه href می‌توانید مطمئن شوید مرورگرهایی که از imagesrcset در عنصر <link> پشتیبانی نمی‌کنند، اما از image-set در CSS پشتیبانی می‌کنند، منبع صحیح را بارگیری می‌کنند. بااین‌حال، در این مورد از پیش‌بارگیری بهره‌مند نخواهند شد.

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

پانل «شبکه» Chrome DevTools آبشاری را نشان می‌دهد که در آن منبع JPEG به‌طور موازی با CSS بارگیری می‌شود.
در اینجا، تصویر و CSS هم‌زمان شروع به بارگیری می‌کنند و این باعث می‌شود تصویر سریع‌تر بار شود.

تأثیرات عملی پیش‌بارگذاری تصاویر واکنش‌گرا

پیش‌بار کردن تصاویر واکنش‌گرای شما می‌تواند از نظر تئوری سرعت آن‌ها را افزایش دهد، اما در عمل چه می‌کند؟

برای پاسخ به این سؤال، دو نسخه از فروشگاه نمایشی برنامه وب پیش‌رونده ایجاد کردم: یکی که تصاویر را پیش‌بارگیری نمی‌کند، و دیگری که برخی‌از آن‌ها را پیش‌بارگیری می‌کند. چون سایت تصاویر را بااستفاده از جاوا اسکریپت به‌صورت بارکردن کُند بار می‌کند، احتمالاً از پیش‌بار کردن تصاویری که در نمای اولیه ظاهر می‌شوند سود می‌برد.

این کار نتایج زیر را برای بدون پیش‌بارگیری و برای پیش‌بارگیری تصویر ایجاد کرد:

  • شروع پردازش تغییری نکرده است.
  • شاخص سرعت کمی بهبود یافت (۲۷۳ میلی‌ثانیه، چون تصاویر سریع‌تر می‌رسند و بخش بزرگی از ناحیه پیکسل را اشغال نمی‌کنند).
  • آخرین قهرمان رنگ‌شده به‌طور قابل‌توجهی (۱٫۲ ثانیه) بهبود یافت.
مقایسه نوار فیلم WebPageTest نشان می‌دهد که تصاویر پیش‌بارگذاری‌شده حدود ۱٫۵ ثانیه سریع‌تر نمایش داده می‌شوند.
تصاویر هنگام پیش‌بارگیری به‌طور قابل‌توجهی سریع‌تر می‌رسند و تجربه کاربری را به‌طور چشمگیری بهبود می‌بخشند.

پیش‌بارگیری و <picture>

«گروه کاری عملکرد وب» درحال بحث درباره افزودن معادل پیش‌بارگیری برای srcset و sizes است، اما نه برای عنصر <picture> که مورد استفاده «جهت هنری» را مدیریت می‌کند.

هنوز چند مشکل فنی برای حل کردن برای پیش‌بارگیری <picture> وجود دارد، اما در این میان، راه‌حل‌هایی وجود دارد:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

منطق انتخاب منبع تصویر عنصر <picture> به‌ترتیب از مشخصه‌های media عناصر <source> عبور می‌کند، اولین موردی را که مطابقت دارد پیدا می‌کند، و از منبع پیوست‌شده استفاده می‌کند.

چون پیش‌بارگیری واکنش‌گرا مفهومی از «ترتیب» یا «اولین مطابقت» ندارد، باید نقاط شکست را به چیزی شبیه به موارد زیر ترجمه کنید:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

پیش‌بارگیری و type

عنصر <picture> همچنین از مطابقت در اولین type پشتیبانی می‌کند تا به شما امکان دهد قالب‌های تصویر مختلفی ارائه دهید تا مرورگر بتواند اولین قالب تصویری را که پشتیبانی می‌کند انتخاب کند.

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

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

اما برخلاف <picture>، در اولین نوع پشتیبانی‌شده متوقف نخواهد شد. بنابراین اگر چندین پیش‌بارگیری برای چندین نوع گنجانده شده باشد، همه تصاویر پیش‌بارگیری خواهند شد:

این کار را نکنید — پیش‌بار کردن چند نوع:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

به‌جای آن، این کار را انجام دهید — ترجیحی‌ترین نوع را پیش‌بارگیری کنید:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

پیش‌بارگیری جدیدترین قالب (در این مورد AVIF) به‌عنوان یک ارتقای پیش‌رو عمل می‌کند، که در آن مرورگرهای پشتیبانی‌کننده از آن نوع بهره‌مند می‌شوند و مرورگرهای دیگر از پیش‌بارگیری بهره‌مند نخواهند شد.

برای سایت‌هایی که تصویر به‌سرعت در HTML قابل‌یافتن است، توصیه می‌کنیم از پیش‌بارگیری اجتناب کنید و درعوض، اسکنر پیش‌بارگیری تصاویر را از عناصر <picture> و <source> دریافت کند. این کار درهرصورت روال مطلوبی است، به‌ویژه هنگام استفاده از اولویت واکشی برای کمک به اولویت‌بندی تصویر مناسب، زیرا اجازه می‌دهد تصویر دقیق براساس پشتیبانی مرورگر پیش‌بار شود. همچنین خطر قدیمی شدن پیش‌بارگیری از نشانه‌گذاری اصلی را هنگام تغییر تصاویر یا صفحه‌ها ازبین می‌برد.

تأثیرات بر «بزرگ‌ترین نقاشی دارای محتوا» (LCP)

چون تصاویر می‌توانند نامزدهای «بزرگ‌ترین نقاشی دارای محتوا» (LCP) باشند، پیش‌بار کردن آن‌ها می‌تواند LCP وب‌سایت شما را بهبود بخشد.

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