«من می‌خواستم روی آن کلیک کنم، چرا تغییر مکان داد؟»
تغییر چیدمان می‌تواند موجب حواس‌پرتی کاربر شود. فرض کنید وقتی مشغول خواندن یک مقاله هستید، تمامی المان‌ها یک‌دفعه حرکت کنند و جمله‌ای که مشغول خواندن آن بودید را گم کرده و مجبور شوید برای پیدا کردن آن کل متن را جستجو کنید. این یک اتفاق بسیار معمول در وب است؛ فرقی نمی‌کند که مشغول خواندن اخبار هستید یا قصد کلیک کردن بر روی دکمه‌های «Search» یا «Add to Cart» را دارید. چنین تجربه‌ای به لحاظ بصری گیج‌کننده و آزاردهنده است.
آنچه در این مطلب می خوانید:
- تصاویر بدون بُعد
- تاریخچه
- بهترین روش مدرن
- در مورد تصاویر ریسپانسیو (واکنش‌گرا) چطور؟
- در مورد صفحه‌آرایی چطور؟
- تبلیغات، embeds و iframes (آی فریم‌ها) بدون بُعد
- محتوای پویا
- فونت‌های وب که موجب FOIT/FOUT می‌شوند
- انیمیشن‌ها یا تصاویر متحرک
- ابزارهای توسعه‌دهنده
در اغلب موارد این اتفاق وقتی رخ می‌دهد که به دلیل اضافه شدن ناگهانی یک المان و یا تغییر اندازه‌ی آن، موقعیت مکانی سایر المان‌ها تغییر می‌کند.
تغییر چیدمان تجمعی (CLS) یک معیار Core Web Vitals است که با جمع کردن امتیازهای تغییر در تغییرات چیدمانی که در بازه‌ی 500 میلی ثانیه از یک ورودی کاربر اتفاق نمی‌افتند، ناپایداری محتوا را اندازه‌گیری می‌کند. این معیار میزان تغییر محتوای قابل رویت در نمایشگر و نیز فاصله‌ی تغییر المان‌های تحت تاثیر را بررسی می‌کند.
اگر با معیارهای وب وایتال آشنا نیستید، پیشنهاد می‌کنیم ابتدا مطلب «راهنمای جامع Core web vitals و توصیه‌هایی برای بهبود معیارها» را بخوانید.
در این راهنما، ما بهینه‌سازی دلایل معمول تغییر چیدمان را بررسی خواهیم کرد.
معمول‌ترین دلایل تغییر چیدمان تجمعی (CLS) عبارت هستند از:
- تصاویر بدون بُعد
- تبلیغات، embeds و iframes (آی فریم‌ها) بدون بعد
- محتوای پویای اضافه شده
- فونت‌های وب که موجب FOIT/FOUT می‌شوند
- فعالیت‌هایی که قبل از به‌روزرسانی DOM منتظر پاسخ شبکه هستند
تصاویر بدون بُعد
همیشه اندازه‌های عرض و ارتفاع المان‌های تصویری و ویدئویی را درج کنید. علاوه بر این، فضای مورد نیاز برای باکس‌هایی با نسبت ابعاد CSS را کنار بگذارید. این رویکرد تضمین می‌کند که مرورگر می‌تواند فضای درست و مناسب را هنگام بارگذاری تصویر اختصاص دهد.
تاریخچه
در روزهای آغازین وب، توسعه‌دهندگان ویژگی‌های width و height را به برچسب‌های img خود اضافه می‌کردند تا مطمئن شوند که قبل از این که مرورگر فچ تصاویر را آغاز کند فضای کافی بر روی صفحه برای آن‌ها اختصاص داده شده باشد. این کار موجب به حداقل رساندن اصلاح و چیدمان مجدد می‌شد. منتوریکس در بخش انجام خدمات سئو توجه ویژه ای به بهینه سازی تصاویر وبسایت کاربران دارد.
به احتمال زیاد متوجه شده‌اید که width و height بالا ابعاد ندارند. این ابعاد پیکسلی تضمین می‌کنند که فضای 360×640 کنار گذاشته می‌شود. تصویر متناسب با این فضا کشیده خواهد شد و فرقی نمی‌کند که ابعاد واقعی آن با این فضا تطابق دارند یا نه.
وقتی Responsive Web Design (طراحی وب واکنشی) ارائه شد، توسعه‌دهندگان ویژگی‌های عرض و ارتفاع را حذف کردند و به جای آن با استفاده از CSS شروع به تغییر اندازه‌ی تصاویر کردند:
یکی از معایب و نقاط ضعف این رویکرد این است که فقط زمانی فضا برای یک تصویر اختصاص داده می‌شود که بارگذاری آن آغاز شود و مرورگر ابعاد آن را تعیین کند. به محض این که تصویر بارگذاری شد، با ظاهر شدن هر تصویر صفحه اصلاح می‌شود. این به لحاظ تجربه‌ی کاربری اصلا خوب نیست.
اینجا است که نسبت ابعاد به کار می‌آید. نسبت ابعاد یک تصویر (نسبت نما) به نسبت عرض به ارتفاع آن تصویر گفته می‌شود. به طور معمول این نسبت به صورت دو عدد که توسط دو نقطه از هم جدا شده‌اند نشان داده می‌شود (به عنوان مثال، 16:9 یا 4:3). برای نسبت ابعاد x:y؛ x واحد عرض و y واحد ارتفاع تصویر است.
این به آن معنی است که اگر یکی از ابعاد را بدانیم، می‌توانیم بعد دیگر را محاسبه کنیم. برای نسبت ابعاد 16:9،
- اگر puppy.jpg ارتفاع 360 پیکسل داشته باشد، عرض آن 360 × (9/16)= 640 پیکسل خواهد بود.
- اگر puppy.jpg عرض 640 پیکسل داشته باشد، ارتفاع آن 640 × (16/9)= 360 پیکسل خواهد بود.
دانستن نسبت ابعاد امکان محاسبه و ذخیره کردن فضای کافی برای ارتفاع و مساحت مربوطه را برای مرورگر فراهم می‌سازد.
بهترین روش مدرن
امروزه، مرورگرهای مدرن نسبت ابعاد پیشفرض تصاویر را بر اساس ویژگی‌های عرض و ارتفاع آن تنظیم می‌کنند. بنابراین، تنظیم کردن آن‌ها به منظور جلوگیری از تغییر چیدمان اهمیت دارد. به لطف گروه کاری CSS، توسعه‌دهندگان فقط کافی است width و height را به صورت نرمال تنظیم کنند:
و شیوه‌نامه‌ی UI تمامی مرورگرها یک نسبت ابعاد پیشفرض را بر اساس ویژگی‌های width و height کنونی المان اضافه می‌کند:
این کار باعث می‌شود که قبل از بارگذاری تصویر، یک نسبت ابعاد بر اساس ویژگی‌های width و height محاسبه شود. این اطلاعات در مراحل آغازین محاسبه‌ی چیدمان فراهم می‌شوند. به محض این که عرض یک تصویر مشخص می‌شود (به عنوان مثال، width=100%)، از نسبت ابعاد به منظور محاسبه‌ی ارتفاع آن استفاده می‌شود.
نکته
- اگر در درک نسبت ابعاد مشکل دارید، از یک ماشین حساب دستی برای این کار کمک بگیرید.
این تغییرات نسبت ابعاد تصاویر در مرورگرهای فایرفاکس و کروم اعمال شده‌اند و به زودی در وب کیت (Safari) هم به کار گرفته خواهند شد.
برای درک عمیق‌تر مفهوم نسبت ابعاد همراه با تفکر بیشتر پیرامون تصاویر، به این لینک مراجعه کنید.
- اگر تصویر شما در یک چارچوب قرار دارد، شما می‌توانید از CSS برای تغییر اندازه‌ی تصویر به ابعاد چارچوب مد نظر استفاده کنید. ما height: auto را تنظیم می‌کنیم تا از ثابت در نظر گرفتن ارتفاع تصویر اجتناب شود (به عنوان مثال، 360 پیکسل).
در مورد تصاویر ریسپانسیو (واکنش‌گرا) چطور؟
وقتی با تصاویر ریسپانسیو کار می‌کنید، srcset تصاویری را تعریف می‌کند که شما اجازه می‌دهید مرورگر انتخاب کند که هر تصویر چه اندازه‌ای داشته باشد. به منظور اطمینان از این موضوع که ویژگی‌های عرض و ارتفاع قابل تنظیم هستند، هر تصویر باید از یک نسبت ابعاد یکسان استفاده کند:
در مورد صفحه‌آرایی چطور؟
صفحات ممکن است ترجیح دهند که از یک نمای برش داده شده از تصویر بر روی نمایشگر باریک یا نمایش کامل تصویر بر روی صفحه نمایش استفاده کنند.
این احتمال وجود دارد که تصاویر نسبت ابعاد متفاوتی داشته باشند و مرورگرها همچنان در حال ارزیابی بهترین راه حل موجود در چنین شرایطی هستند، از جمله این که آیا ابعاد باید بر روی تمامی منابع مشخص شوند یا خیر. تا وقتی که یک راه حل انتخاب شود، چیدمان مجدد امکان‌پذیر است.
تبلیغات، embeds و iframes (آی فریم‌ها) بدون بُعد
در ادامه به بررسی این موارد می‌پردازیم:
تبلیغات
تبلیغات یکی از اصلی‌ترین دلایل تغییر چیدمان بر روی وب به شمار می‌آیند. شبکه‌ها و منتشرکنندگان تبلیغات اغلب از اندازه‌های تبلیغات پویا پشتیبانی می‌کنند. اندازه‌های Ad موجب افزایش عملکرد درآمد می‌شوند که به دلیل بالا رفتن نرخ کلیک و رقابت هر چه بیشتر تبلیغات است.
متاسفانه، این موضوع می‌تواند منجر به تجربه‌ی کاربری نامطلوب و پایین‌تر از سطح بهینه شود زیرا تبلیغات محتوای قابل رویت را به پایین صفحه هل می‌دهند.
طی چرخه‌ی عمر تبلیغات، عوامل متعددی می‌توانند منجر به تغییر چیدمان شوند:
- وقتی یک سایت چارچوب Ad را به DOM اضافه می‌کند
- وقتی یک سایت چارچوب Ad را با کد first-party تغییر اندازه می‌دهد
- وقتی کتابخانه‌ی برچسب Ad بارگذاری می‌شود (و چارچوب آن را تغییر اندازه می‌دهد)
- وقتی Ad فضای چارچوب را پر می‌کند (و اگر Ad نهایی اندازه‌ی دیگری داشته باشد، تغییر اندازه می‌دهد)
خبر خوب این است که برای کاهش تغییر چیدمان ناشی از تبلیغات سایت‌ها می‌توانند راهکارهایی را به کار گیرند. سایت‌ها می‌توانند با استفاده از رویکردهای زیر تغییر چیدمان را کاهش دهند:
- از نظر آماری فضایی را برای تبلیغات کنار بگذارید
به عبارت دیگر، قبل از این که کتابخانه‌ی برچسب‌های تبلیغات بارگذاری شوند، المان را نامگذاری کنید. اگر تبلیغات را در جریان محتوایی قرار می‌دهید، با حفظ اندازه‌ی فضای مورد نیاز تبلیغات از حذف تغییرات چیدمان اطمینان حاصل کنید. چنین تبلیغاتی در صورت بارگذاری در خارج از صفحه نباید موجب تغییر در چیدمان شوند.
- در هنگام درج تبلیغات غیرچسبنده در نزدیکی بالای نمایشگر دقت کنید
در مثال بعدی، توصیه می‌شود که تبلیغات را به زیر لوگوی «world vision» منتقل کنید و مطمئن شوید که فضای کافی برای آن وجود داشته باشد.
- با استفاده از یک placeholder در صورتی که تبلیغات بازگردانده نشدند، از به هم ریختن فضای اختصاص داده شده به تبلیغات جلوگیری کنید
- با نگه داشتن بزرگ‌ترین فضای ممکن برای تبلیغات از هرگونه تغییر چیدمان جلوگیری کنید
این روش کارساز است اما اگر تبلیغات کل فضای اختصاص داده شده را پر نکند، بخشی از آن به صورت فضای خالی باقی می‌ماند.
- بر اساس داده‌های پیشین، محتمل‌ترین اندازه را برای فضای تبلیغاتی در نظر بگیرید
برخی از سایت‌ها ممکن است به این نتیجه برسند که اگر فضای تبلیغات به طور کامل پر نشود، ممکن است در هم ریختن آن فضا موجب کاهش تغییر چیدمان شود. هیچ روش ساده‌ای برای انتخاب اندازه‌ی دقیق وجود ندارد، مگر این که کار تبلیغات را خودتان انجام دهید.
از نظر آماری فضایی را برای تبلیغات کنار بگذارید
به لحاظ آماری المان‌های DOM با سبک اسلات با اندازه‌های یکسان به کتابخانه برچسب انتقال داده می‌شوند. این کار موجب می‌شود تا هنگام بارگذاری کتابخانه، تغییر چیدمان رخ ندهد. اگر این کار را انجام ندهید، کتابخانه ممکن است بعد از چیدمان صفحه اندازه‌ی المان اسلات را تغییر دهد.
همچنین، اندازه‌ی تبلیغات کوچک‌تر را در نظر بگیرید. اگر تبلیغات کوچک‌تری ارائه شود، منتشرکننده می‌تواند چارچوب بزرگ‌تری را برای جلوگیری از تغییر چیدمان تنظیم کند. یکی از معایب این روش این است که مقدار فضای خالی افزایش می‌یابد. بنابراین، این موضوع را به خاطر بسپارید.
از درج تبلیغات در نزدیکی بالای نمایشگر اجتناب کنید
تبلیغاتی که در نزدیکی بالای نمایشگر درج می‌شوند، بیشتر از تبلیغاتی که در وسط قرار می‌گیرند موجب تغییر چیدمان می‌شوند. دلیل این امر آن است که تبلیغات در بالای نمایشگر محتوای بیشتری را به سمت پایین هل می‌دهند، به عبارت دیگر المان‌های بیشتری جابه‌جا می‌شوند. در مقابل، تبلیغاتی که در وسط نمایشگر درج می‌شوند المان‌های کمتر را جابه‌جا می‌کنند.
embeds و iframes
ویجت‌های قابل جاسازی به شما اجازه می‌دهند تا محتوای قابل حمل تحت وب را در صفحات خود جاسازی کنید. (به عنوان مثال، ویدئوهایی از یوتیوب، نقشه‌هایی از گوگل مپ، پست‌های شبکه‌های اجتماعی و غیره). این embedها می‌توانند به شکل‌های مختلف ظاهر شوند:
- فال بک HTML و یک برچسب جاوا اسکریپت که فال بک را به embed فانتزی تبدیل می‌کند
- اسنیپت Inline HTML
- iframe embed
این embedها معمولا از قبل اطلاعاتی در مورد فضای جاسازی ندارند (به عنوان مثال، در مورد یک پست شبکه اجتماعی- آیا دارای یک تصویر، ویدئو یا چند ردیف متن جاسازی شده است؟). در نتیجه، پلتفرم‌های embed همیشه فضای کافی را برای جاسازی فراهم نمی‌کنند و می‌توانند در هنگام بارگذاری موجب تغییر چیدمان شوند.
به منظور حل این مشکل، شما می‌توانید با محاسبه‌ی مجدد فضای کافی برای جاسازی با استفاده از placeholder یا فال بک، CLS را به حداقل برسانید. یک شیوه کاری که می‌توانید برای جاسازی استفاده کنید:
- با بازبینی embed از طریق ابزارهای توسعه‌دهنده‌ی مرورگر، ارتفاع نهایی جاسازی را مشخص کنید.
- به محض این که embed بارگذاری شد، iframe موجود به گونه‌ای تغییر اندازه خواهد داد که متناسب با محتوای آن صفحه باشد.
ابعاد را یادداشت کنید و مطابق با آن یک placeholder را برای embed تنظیم کنید. شاید لازم باشد با استفاده از جستارهای رسانه‌ای، تفاوت‌های موجود در اندازه تبلیغات placeholder را بین فاکتورهای مختلف در نظر بگیرید.
محتوای پویا
خلاصه: از درج محتوای جدید بالاتر از محتوای کنونی اجتناب کنید، مگر این که در واکنش به یک تعامل کاربری صورت گیرد. این کار موجب می‌شود که امکان تغییر چیدمان وجود داشته باشد.
به احتمال زیاد هنگام بارگذاری یک سایت، به دلیل UI که در بالا یا پایین نمایشگر ظاهر می‌شود تغییر چیدمان را تجربه کرده‌اید. همانند تبلیغات، این موضوع اغلب در بنرها و فرم‌هایی رخ می‌دهد که بقیه‌ی محتوای صفحه را جابه‌جا می‌کنند:
- «در خبرنامه ما ثبت‌نام کنید» (هی، یواش! ما تازه با هم آشنا شدیم)
- مطالب مرتبط
- اپلیکیشن ما را نصب کنید (آی او اس یا اندروید)
- ما هنوز سفارش می‌گیریم
- اطلاعیه GDPR
اگر مجبور به نمایش این نوع از قابلیت‌های UI هستید، از قبل فضای کافی را در نمایشگر کنار بگذارید (به عنوان مثال، با استفاده از یک placeholder یا مکان یاب) تا هنگام بارگذاری موجب تغییر و جابه‌جایی محتوا در صفحه نشود.
فونت‌های وب که موجب FOIT/FOUT می‌شوند
دانلود و رندر فونت‌های وب می‌تواند به دو روش موجب تغییر چیدمان شود:
- فونت فال بک با یک فونت جدید جایگزین می‌شود (FOUT بخشی از یک متن بدون استایل یا سبک)
- متن «غیرقابل رویت» تا وقتی که فونت جدید رندر شود، به نمایش درمی‌آید (FOIT بخشی از یک متن غیرقابل رویت)
ابزارهای زیر می‌توانند به شما در به حداقل رساندن این مشکل کمک کنند
- font-display به شما این امکان را می‌دهد تا رفتار رندر فونت‌های سفارشی را با گزینه‌هایی مانند خودکار، تعویض، بلوک، فال بک و optional اصلاح کنید. متاسفانه، تمامی این گزینه‌ها (به جز گزینه‌ی optional) می‌تواند موجب تغییر چیدمان صفحه شود.
- Font Loading API می‌تواند زمان مورد نیاز برای دریافت فونت‌های جدید را کاهش دهد.
در مورد کروم 83، من موارد زیر را توصیه می‌کنم:
- استفاده از تگ link rel=preload در فونت‌های کلیدی وب: یک فونت از قبل بارگذاری شده برای مواجه با ترسیم اول فرصت بیشتری خواهد داشت، در این صورت هیچ تغییر چیدمانی رخ نخواهد داد.
- ترکیب تگ link rel=preload و نمایش فونت: optional
برای جزئیات بیشتر این لینک را مطالعه کنید.
انیمیشن‌ها یا تصاویر متحرک
خلاصه: انیمیشن‌های transform را به جای انیمیشن‌هایی که موجب تغییر چیدمان می‌شوند را در اولویت قرار دهید.
تغییرات در مقادیر ویژگی CSS ممکن است مرورگر را مجاب به واکنش به این تغییرات کند. برخی از مقادیر موجب چیدمان مجدد، ترسیم اولیه و ترکیب‌هایی مانند box-shadow و box-sizing می‌شوند. برخی از ویژگی‌های CSS به روشی کم هزینه‌تر تغییر می‌کنند.
برای کسب اطلاعات بیشتر در مورد ویژگی‌های CSS که منجر به تغییر چیدمان می‌شوند، به CSS Triggers و High-performance animations مراجعه کنید.
ابزارهای توسعه‌دهنده
خوشبختانه ابزارهایی برای اندازه‌گیری و اشکال‌زدایی تغییر چیدمان تجمعی (CLS) موجود هستند.
- Lighthouse 6.0 و نسخه‌های جدیدتر آن از اندازه‌گیری CLS در شرایط آزمایشگاهی پشتیبانی می‌کند. این نسخه همچنین گره‌هایی که بیشتر موجب تغییر چیدمان می‌شوند را هایلایت می‌کند.
- پنل عملکرد در DevTools، تغییرات چیدمان در قسمت Experience از کروم 84 را هایلایت می‌کند. نمای Summary برای گزارش layout shift شامل امتیاز تغییر چیدمان تجمعی و نیز یک مستطیل پوشاننده‌ی مناطق تحت تاثیر است.
- اندازه‌گیری CLS تجمعی در دنیای واقعی در سطح مبدا نیز با استفاده از گزارش تجربه کاربری کروم امکان‌پذیر است. داده‌های CRUX CLS از طریق BigQuery و یک جستار نمونه در عملکرد CLS برای استفاده در دسترس هستند.
این راهنما در اینجا به پایان می‌رسد. امیدوارم این مطلب بتواند تا حدودی تغییرات صفحه‌ی شما را کمتر کند. اگر مایلید درباره انواع معیارهای کور وب وایتال بیشتر بدانید، حتما سری به مجموعه مقالات Core Web Vitals منتوریکس بزنید. همچنین اگر برای کسب‌وکار خود نیاز به دریافت خدمات سئو سایت و مشاوره دیجیتال مارکتینگ دارید، حتما با ما تماس بگیرید.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وبسایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.