تصاویر واکنشگرا را از قبل بارگذاری کنید

بری پولارد
یواو ویس

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

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

پشتیبانی مرورگر

  • کروم: 73.
  • لبه: 79.
  • فایرفاکس: 78.
  • سافاری: 17.2.

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

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

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

نمای کلی از پیش بارگذاری

پشتیبانی مرورگر

  • کروم: 50.
  • لبه: ≤79.
  • فایرفاکس: 85.
  • سافاری: 11.1.

منبع

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

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

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">

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

موارد استفاده کنید

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

تصاویر پاسخگو با تزریق پویا را از قبل بارگذاری کنید

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

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

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

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

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

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

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

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

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

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

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

اثرات عملی از پیش بارگذاری تصاویر پاسخگو

از قبل بارگذاری تصاویر واکنشگرا می تواند آنها را در تئوری سرعت بخشد، اما در عمل چه کاری انجام می دهد؟

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

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

  • Start Render ثابت ماند.
  • شاخص سرعت اندکی بهبود یافته است (273 میلی‌ثانیه، چون تصاویر سریع‌تر می‌رسند، بخش بزرگی از ناحیه پیکسل را اشغال نمی‌کنند).
  • Last Painted Hero به میزان قابل توجهی 1.2 ثانیه بهبود یافت.
مقایسه نوار فیلم WebPageTest که تصاویر از پیش بارگذاری شده را نشان می دهد حدود 1.5 ثانیه سریعتر نمایش داده می شوند.
تصاویر هنگام بارگذاری از قبل سریعتر به دست می‌آیند و تجربه کاربر را تا حد زیادی بهبود می‌بخشند.

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

گروه کاری Web Performance در حال بحث در مورد افزودن یک معادل پیش بارگذاری برای 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)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

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

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

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

اثرات روی بزرگترین رنگ محتوایی (LCP)

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

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