بسیاری از سایتها منابع سنگینی مانند تصاویر را درخواست میکنند که برای صفحه نمایشهای خاص بهینه نشدهاند و فایلهای CSS بزرگی حاوی سبکهایی ارسال میکنند که برخی از دستگاهها هرگز از آنها استفاده نخواهند کرد. استفاده از مدیا کوئریها یک تکنیک محبوب برای ارائه استایلشیتها و فایلهای سفارشی به صفحه نمایشهای مختلف است تا میزان دادههای منتقل شده به کاربران را کاهش داده و عملکرد بارگذاری صفحه را بهبود بخشد. این راهنما به شما نشان میدهد که چگونه از مدیا کوئریها برای ارسال تصاویری که فقط به اندازه مورد نیاز بزرگ هستند استفاده کنید، تکنیکی که معمولاً به عنوان تصاویر واکنشگرا شناخته میشود.
پیشنیازها
این راهنما فرض میکند که شما با DevTools کروم آشنا هستید. در صورت تمایل میتوانید از DevTools مرورگر دیگری استفاده کنید. فقط کافی است اسکرینشاتهای Chrome DevTools در این راهنما را به ویژگیهای مرتبط در مرورگر مورد نظر خود نگاشت کنید.
تصاویر پس زمینه واکنش گرا را درک کنید
ابتدا، ترافیک شبکه نسخه آزمایشی بهینهسازی نشده را تجزیه و تحلیل کنید:
- نسخه آزمایشی بهینهسازی نشده را در یک برگه جدید کروم باز کنید.
- برای باز کردن DevTools، کلیدهای «Control+Shift+J» (یا «Command+Option+J» در مک) را فشار دهید.
- روی برگه شبکه کلیک کنید.
- صفحه را دوباره بارگذاری کنید.
خواهید دید که تنها تصویری که درخواست میشود background-desktop.jpg است که حجمی معادل ۱۰۰۶ کیلوبایت دارد:
اندازه پنجره مرورگر را تغییر دهید و توجه کنید که گزارش شبکه هیچ درخواست جدیدی را که توسط صفحه ایجاد میشود نشان نمیدهد. این بدان معناست که برای همه اندازههای صفحه نمایش، از تصویر پسزمینه یکسانی استفاده میشود.
میتوانید استایلهایی که تصویر پسزمینه را کنترل میکنند را در style.css مشاهده کنید:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
در اینجا معنی هر یک از ویژگیهای استفاده شده آمده است:
-
background-position: center center: تصویر را به صورت عمودی و افقی در مرکز قرار میدهد. -
background-repeat: no-repeat: تصویر را فقط یک بار نمایش بده. -
background-attachment: fixed: از اسکرول شدن تصویر پس زمینه جلوگیری میکند. -
background-size: cover: اندازه تصویر را تغییر میدهد تا کل ظرف را بپوشاند. -
background-image: url(images/background-desktop.jpg): آدرس تصویر.
وقتی این استایلها با هم ترکیب میشوند، به مرورگر میگویند که تصویر پسزمینه را با ارتفاع و عرضهای مختلف صفحه نمایش تطبیق دهد. این اولین قدم برای دستیابی به یک پسزمینه واکنشگرا است.
استفاده از یک تصویر پس زمینه واحد برای همه اندازههای صفحه نمایش محدودیتهایی دارد:
- صرف نظر از اندازه صفحه نمایش، مقدار بایت یکسانی ارسال میشود، حتی زمانی که برای برخی از دستگاهها، مانند تلفنها، یک تصویر پسزمینه کوچکتر و سبکتر نیز به همان اندازه خوب به نظر میرسد. به طور کلی، شما میخواهید کوچکترین تصویر ممکن را که همچنان در صفحه نمایش کاربر خوب به نظر میرسد، ارسال کنید تا عملکرد را بهبود بخشیده و در مصرف داده کاربر صرفهجویی کنید.
- در دستگاههای کوچکتر، تصویر کشیده یا برش داده میشود تا کل صفحه را بپوشاند، که به طور بالقوه بخشهای مرتبط با پسزمینه را از دید کاربران پنهان میکند.
در بخش بعدی، یاد خواهید گرفت که چگونه یک بهینهسازی را برای بارگذاری تصاویر پسزمینه مختلف، بسته به دستگاه کاربر، اعمال کنید.
از کوئریهای رسانهای استفاده کنید
استفاده از کوئریهای رسانهای یک تکنیک رایج برای تعریف استایلشیتهایی است که فقط روی انواع خاصی از رسانهها یا دستگاهها اعمال میشوند. آنها با استفاده از قوانین @media پیادهسازی میشوند که به شما امکان میدهد مجموعهای از نقاط توقف را تعریف کنید، که در آنها استایلهای خاصی تعریف میشوند. هنگامی که شرایط تعریف شده توسط قانون @media برآورده شوند (به عنوان مثال، عرض صفحه نمایش مشخص)، گروه استایلهای تعریف شده در داخل نقطه توقف اعمال میشوند.
مراحل زیر میتواند برای اعمال مدیا کوئریها به سایت استفاده شود تا تصاویر مختلفی بسته به حداکثر عرض دستگاه درخواستکننده صفحه، مورد استفاده قرار گیرند.
- در
style.cssخطی که شامل آدرس تصویر پسزمینه است را حذف کنید:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat; background-size: cover;
background-image: url(images/background-desktop.jpg);
}
- در مرحله بعد، بر اساس ابعاد رایج در پیکسلهایی که معمولاً صفحه نمایشهای موبایل، تبلت و دسکتاپ دارند، برای هر عرض صفحه نمایش یک نقطه شکست ایجاد کنید:
برای موبایل:
@media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
برای تبلتها:
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
برای دستگاههای رومیزی:
@media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
نسخه بهینه شده style.css را در مرورگر خود باز کنید تا تغییرات ایجاد شده را مشاهده کنید.
اندازهگیری برای دستگاههای مختلف
سپس سایت حاصل را در اندازههای مختلف صفحه نمایش و در دستگاههای تلفن همراه شبیهسازی شده تجسم کنید:
- سایت بهینه شده را در یک تب جدید کروم باز کنید.
- اندازهی نمای خود را باریک کنید (کمتر از
480px). - برای باز کردن DevTools، کلیدهای «Control+Shift+J» (یا «Command+Option+J» در مک) را فشار دهید.
- روی برگه شبکه کلیک کنید.
- صفحه را دوباره بارگذاری کنید. توجه کنید که چگونه تصویر
background-mobile.jpgدرخواست شده است. - نمای خود را عریضتر کنید. وقتی از
480pxعریضتر شد، توجه کنید که چگونهbackground-tablet.jpgدرخواست میشود. وقتی از1025pxعریضتر شد، توجه کنید که چگونهbackground-desktop.jpgدرخواست میشود.
وقتی عرض صفحه مرورگر تغییر میکند، تصاویر جدید درخواست میشوند.
به طور خاص، وقتی عرض کمتر از مقدار تعریف شده در نقطه شکست موبایل (۴۸۰ پیکسل) باشد، گزارش شبکه زیر را مشاهده خواهید کرد:
اندازه پسزمینه جدید موبایل ۶۷٪ کوچکتر از نمونه دسکتاپ است.
تأثیرات روی بزرگترین رنگ محتوا (LCP)
عناصری که تصاویر پسزمینه CSS دارند، کاندیدی برای Largest Contentful Paint (LCP) در نظر گرفته میشوند، با این حال، تصاویر پسزمینه CSS توسط اسکنر پیشبارگذاری مرورگر قابل شناسایی نیستند ، به این معنی که اگر مراقب نباشید، ممکن است LCP سایت خود را به تأخیر بیندازید.
اولین گزینهای که باید در نظر بگیرید این است که آیا تصویر کاندید LCP شما میتواند در یک عنصر <img> با ویژگیهای srcset و sizes برای واکنشگرایی کار کند یا خیر. اسکنر پیشبارگذاری مرورگر، عناصر <img> را کشف میکند و در حالی که تجزیهکننده هنگام رندر مسدود شده است، درخواستهایی را برای آنها ارسال میکند.
اگر نمیتوانید (یا نمیخواهید) از استفاده از تصویر پسزمینه CSS اجتناب کنید، گزینه دوم این است که تصاویر واکنشگرا را از قبل بارگذاری کنید تا مطمئن شوید که تصویر مناسب را برای اندازه مناسب viewport بارگذاری میکنید. ویژگیهای <link> عناصر media ، imagesrcset و imagesizes به مرورگر یادآوری میکنند که یک راهنمای منبع مشخص فقط در شرایط خاصی از viewport اعمال میشود و از بارگذاریهای اولیه بیهوده متعدد، زمانی که فقط میخواهید یک منبع مناسب برای viewport فعلی را بارگذاری کنید، جلوگیری میکند.
خلاصه
در این راهنما یاد گرفتید که چگونه از کوئریهای رسانهای برای درخواست تصاویر پسزمینه متناسب با اندازههای خاص صفحه نمایش استفاده کنید و هنگام دسترسی به سایت در دستگاههای کوچکتر، مانند تلفنهای همراه، در حجم بایت صرفهجویی کنید. شما از قانون @media برای پیادهسازی یک پسزمینه واکنشگرا استفاده کردید. این تکنیک به طور گسترده توسط همه مرورگرها پشتیبانی میشود. یک ویژگی جدید CSS: image-set() ، میتواند برای همین منظور با خطوط کد کمتر استفاده شود. در زمان نگارش این مطلب، این ویژگی در همه مرورگرها پشتیبانی نمیشود، اما شاید بخواهید روند تکامل پذیرش آن را زیر نظر داشته باشید، زیرا میتواند جایگزین جالبی برای این تکنیک باشد.