می‌توانید تصاویر واکنشگرا را از قبل بارگذاری کنید، که می‌تواند به مرورگر کمک کند تا تصویر صحیح را از یک 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="…">
نمای کلی از پیش بارگیری
پیش بارگیری به شما امکان می دهد قبل از اینکه در 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 استفاده می کنند، آغاز می کند.
موارد استفاده کنید
موارد زیر چند مورد استفاده برای پیش بارگذاری تصاویر واکنش گرا هستند.
تصاویر پاسخگو با تزریق پویا را از قبل بارگذاری کنید
تصور کنید در حال بارگذاری پویا تصاویر قهرمان به عنوان بخشی از نمایش اسلاید هستید و می دانید کدام تصویر ابتدا نمایش داده می شود. در این صورت، احتمالاً می خواهید آن تصویر را در اسرع وقت نشان دهید و منتظر بارگذاری اسکریپت نمایش اسلاید نباشید.
می‌توانید این مشکل را در یک وب‌سایت با گالری تصاویر با بارگذاری پویا بررسی کنید:
- این نمایش اسلاید را در یک برگه جدید باز کنید.
- برای باز کردن DevTools،
Control+Shift+J(یاCommand+Option+Jدر مک) را فشار دهید. - روی تب Network کلیک کنید.
- در لیست کشویی Throttling ، Fast 3G را انتخاب کنید.
- چک باکس Disable cache را غیرفعال کنید.
- صفحه را دوباره بارگیری کنید.
استفاده از preload در اینجا به تصویر اجازه می دهد تا قبل از موعد بارگذاری شود، بنابراین می تواند در زمانی که مرورگر نیاز به نمایش آن داشته باشد، آماده نمایش باشد.
برای مشاهده تفاوتی که بارگذاری اولیه ایجاد می کند، همان گالری تصویری که به صورت پویا بارگذاری شده است را بررسی کنید، اما اولین تصویر از قبل بارگذاری شده است و مراحل مثال اول را دنبال کنید.
با استفاده از مجموعه تصاویر، تصاویر پس زمینه را از قبل بارگذاری کنید
اگر تصاویر پس‌زمینه متفاوتی برای تراکم‌های مختلف صفحه دارید، می‌توانید آنها را در CSS خود با نحو image-set مشخص کنید. سپس مرورگر می‌تواند انتخاب کند که کدام یک را بر اساس DPR صفحه نمایش نشان دهد.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
مشکل تصاویر پس‌زمینه CSS این است که مرورگر تنها پس از دانلود و پردازش تمام CSS در <head> صفحه، آنها را کشف می‌کند.
می توانید این مشکل را در یک وب سایت نمونه با یک تصویر پس زمینه واکنش گرا بررسی کنید.
پیش بارگذاری تصویر پاسخگو به شما امکان می دهد آن تصاویر را سریعتر بارگذاری کنید.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
نادیده گرفتن ویژگی href به شما امکان می دهد اطمینان حاصل کنید که مرورگرهایی که imagesrcset در عنصر <link> پشتیبانی نمی کنند، اما از image-set در CSS پشتیبانی می کنند، منبع صحیح را دانلود می کنند. با این حال، آنها در این مورد از پیش بارگذاری سود نخواهند برد.
می‌توانید نحوه رفتار مثال قبلی با یک تصویر پس‌زمینه پاسخگو از پیش بارگذاری‌شده را در نسخه نمایشی پیش‌بارگذاری پس‌زمینه پاسخگو بررسی کنید.
اثرات عملی از پیش بارگذاری تصاویر پاسخگو
از قبل بارگذاری تصاویر واکنشگرا می تواند آنها را در تئوری سرعت بخشد، اما در عمل چه کاری انجام می دهد؟
برای پاسخ به اینکه من دو نسخه از یک فروشگاه دمو PWA ایجاد کردم: یکی که تصاویر را از قبل بارگذاری نمی کند و دیگری که برخی از آنها را از قبل بارگذاری می کند . از آنجایی که سایت تنبل تصاویر را با استفاده از جاوا اسکریپت بارگیری می کند، احتمالاً از بارگذاری اولیه تصاویری که در نمای اولیه ظاهر می شوند سود می برد.
که نتایج زیر را برای بدون پیش بارگذاری و برای پیش بارگذاری تصویر ایجاد کرد:
- Start Render ثابت ماند.
- شاخص سرعت اندکی بهبود یافته است (273 میلی‌ثانیه، چون تصاویر سریعتر می‌رسند، بخش بزرگی از ناحیه پیکسل را اشغال نمی‌کنند).
- Last Painted Hero به میزان قابل توجهی 1.2 ثانیه بهبود یافت.
پیش بارگیری و <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> انتخاب کند. به هر حال این بهترین روش است، به خصوص زمانی که از نکات اولویت برای کمک به اولویت بندی تصویر مناسب استفاده می کنید.
تأثیرات روی بزرگترین رنگ محتوایی (LCP)
از آنجایی که تصاویر می توانند بزرگترین کاندیدهای رنگ محتوایی (LCP) باشند، بارگذاری اولیه آنها می تواند LCP وب سایت شما را بهبود بخشد.
صرف نظر از اینکه تصویری که از قبل بارگذاری می کنید پاسخگو باشد یا نه، پیش بارگیری ها زمانی بهترین کار را دارند که منبع تصویر در بارگذاری اولیه نشانه گذاری قابل کشف نباشد. همچنین در سایت هایی که نشانه گذاری را در سمت مشتری ارائه می کنند نسبت به سایت هایی که نشانه گذاری کامل را از سرور ارسال می کنند، بهبود LCP بیشتری دریافت خواهید کرد.