الگوهای web vitals
مقدمه
مجموعه‌ای از الگوهای رایج و بهینه سازی شده UX برای Core Web Vitals. این مجموعه شامل الگوهایی است که اغلب پیاده سازی آنها بدون آسیب رساندن به امتیازات Core Web Vitals دشوار است. می‌توانید از کدهای موجود در این مثال‌ها استفاده کنید تا مطمئن شوید که پروژه‌هایتان در مسیر درست باقی می‌مانند.
آنچه در این مقاله می‌خوانیم
تصاویر چرخ وفلکی (Carousels)
تصاویر چرخ وفلکی (Carousels) یکی عنصر UX است که تصاویر را به صورت اسلاید نمایش می‌دهد. چرخ فلک های بزرگ و بالای صفحه اغلب شامل عنصر بزرگترین ترسیم محتوای صفحه (LCP) هستند و بنابراین می‌توانند تأثیر قابل توجهی بر LCP داشته باشند. علاوه بر این تعدادی از تصاویر چرخ فلکی از انیمیشن های غیر ترکیبی استفاده می‌کنند که می‌توانند به تغییر چیدمان تجمعی (CLS) کمک کنند. در صفحاتی با چرخ فلک های پخش خودکار امکان ایجاد LCP های بسیار بزرگتری وجود دارد.
در ادامه مثالی از نحوه ایجاد یک تصویر چرخو فلکی را برای نمایش اسلایدی تصاویر می‌بینید این الگو برای بهبود core web vitals بهینه شده است، سعی کنید کدهای خود را براساس این الگو شبیه سازی کنید تا کمترین تاثیر منفی را بر معیارها داشته باشید.
این الگو برای Carousels از اسکرول CSS برای ایجاد انتقال اسلایدهای به صورت روان و سریع استفاده می‌کند که باعث تغییر طرح‌بندی نمی‌شوند.
کاروسل یا اسلایدر وب سایت، روشی مؤثر برای نمایش چندین تصویر یا محتوا در یک فضای واحد است. این کار نه تنها به صرفه جویی در فضای صفحه نمایش کمک می کند، بلکه بازدیدکنندگان را تشویق می کند تا روی محتوای مهم وب سایت تمرکز کنند و جذابیت بصری کلی را به طور موثر بهبود می بخشد.
الگوهای بهینه برای فونت ها
اگر فونتی که از آن استفاده کرده اید بارگذاری نشده باشد، مرورگرها معمولاً هر متنی را که ازآن فونت وب استفاده می‌کند به تأخیر می‌اندازند. در بسیاری از موقعیت ها، این کار First Contentful Paint (FCP) را به تاخیر می‌اندازد و در برخی شرایط، این کار بزرگترین ترسیم محتوایی (LCP) را به تاخیر می‌اندازد.
علاوه بر این، فونت ها می‌توانند باعث تغییر طرح شوند. این تغییرات چیدمان زمانی اتفاق می‌افتد که یک فونت وب و فونت بازگشتی آن مقادیر متفاوتی از فضای صفحه را اشغال کنند.
فونت های میزبانی در شده در سرور
هرگاه فونت‌های خود را ازهاست خودتان بارگذاری می‌کنید می‌توانید با استفاده از الگوی زیر فونت ها را تعریف کنید
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("GoogleSans-Regular.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>
فونت های شخص ثالث
الگوی web vitals برای بهبود در بارگذاری فونت های شخص ثالت است (فونت هایی که از یک سایت دیگر بارگذاری می‌کنید). استفاده از rel="preconnect" باعث بارگذاری زودتر فونت ها و جلوگیری از تاثیرات منفی آن می‌شود
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>
کد بالا دو تکنیک را برای بارگیری فونت شخص ثالث در سریع ترین زمان ممکن ترکیب می‌کند: استفاده از شیوه نامه فونت درون خطی و استفاده از روش پیش اتصال.
الگوهای web vitals برای تصاویر
اگر تصاویر پس از رندر شدن سایر قسمت های صفحه بارگیری شوند، می‌توانند باعث تغییر طرح شوند. این مشکل در موقعیت‌هایی که تصاویر کند بارگذاری می‌شوند برجسته‌تر است – به عنوان مثال، در یک اتصال کند یا هنگام بارگیری یک تصویر با اندازه بزرگ بسیار ملموس تر است.
تگ <img>
بهترین شیوه برای بارگذاری تصاویر استفاده از ابعاد از پیش تعیین شده است، با این کار به سادگی تغییرات چیدمانی که بر تجربه کاربری تاثیر منفی میگذارد به حداقل می‌رسانید.
<img width="267" height="400" src="dog.jpg">
تصاویر واکنش گرا
در حین بارگذاری تصاویر می‌توانید با استفاده از خاصیت srcset چندین عکس با ابعاد مختلف برای استفاده در دستگاه های مختلف قرار دهید تا تضمین کند که عکسی که در گوشی لود می‌شود درای حجم کمتری نسبت به دسکتاپ است.
<!-- Using density descriptors -->
<img width="480" height="330"
srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
src="cat-1x.jpg"
alt="Photo of a cat on a green background">
<!-- Using width descriptors -->
<img width="256" height="128"
srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
src="dog-256w.jpg"
alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
<source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
<source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
<img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>
برای کسب اطلاعات بیشتر در مورد تصاویر واکنش گرا و art direction به مقاله تصاویر گوگل مراجه کنید
اسکرول بی نهایت
اسکرول بی نهایت یک الگوی UX است که در آن محتوا به طور مداوم با اسکرول کاربر به صفحه اضافه می‌شود. برخی از پیاده‌سازی‌های اسکرول بی‌نهایت می‌توانند دلیلی برای تغییر طرح‌بندی باشند. در ادامه الگویی مناسب برای این کار معرفی می‌کنیم تا بتوانید علاوه بر استفاده از این امکان از تاثیرات منفی آن بر تجربه کاربری بکاهید.
در این پیاده‌سازی اسکرول بی‌نهایت هیچ تغییری در طرح‌بندی وجود ندارد
بنرها و اطلاعیه‌ها
بنرها و اعلامیه‌ها دلایل رایج تغییر چیدمان هستند. برای مثال اضافه کردن یک بنر به DOM هنگامی که عناصر صفحه رندر شده‌اند می‌تواند باعث تغییر موقعیت المان های زیرین شود و باعث ایجاد تغیرات ناخوش آیند چیدمان گردد.
بنر متحرک در فوتر یا پاورقی
این فوتر متحرک از پایین صفحه به داخل اسلاید می‌رود. افکت با استفاده از ویژگی تبدیل CSS ایجاد می‌شود. نتیجه یک انیمیشن پرفورمنس است که باعث تغییر چیدمان نمی‌شود.
Modal
Modal ها را می‌توان به عنوان جایگزینی برای اعلامیه‌های بنر استفاده کرد. از آنجایی که مدال‌ها در بالای محتوای صفحه موجود نمایش داده می‌شوند، وقتی نمایش داده می‌شوند باعث تغییر طرح‌بندی نمی‌شوند. اندازه این مودال متناسب با محتوای آن است.
پاورقی چسبناک
پاورقی های چسبناک روشی محبوب برای نمایش اعلامیه ها هستند. اعلامیه‌هایی که در پاورقی قرار می‌گیرند کمتر احتمال دارد عناصر صفحه مانند نوارهای پیمایش، نام تجاری و تبلیغات بنری را مبهم کنند. علاوه بر این، پاورقی های چسبنده وقتی در صفحه قرار می‌گیرند، باعث تغییر طرح بندی نمی‌شوند.
placeholders
Placeholders فضا را برای محتوای آینده رزرو می‌کند. نگهدارنده مکان می‌تواند به عنوان راه حلی برای تغییرات طرح بندی ناشی از تزریق محتوا به صفحه استفاده شود. آنها همچنین می‌توانند در رابطه با بارگذاری تنبل استفاده شوند.
این نگهدارنده ها نشانه‌ای بصری در اختیار کاربران قرار می‌دهند که محتوای جدید در حال بارگذاری است. آنها همچنین به جلوگیری از تغییر طرح کمک می‌کنند.
الگوهای web vitals برای نمایش ویدئوها
ویدئوها می‌توانند با تبدیل شدن به عامل اصلی تغییرات طرح‌بندی، روی Web Vitals تاثیر بگذارد. علاوه بر این، در برخی از سناریوها، فایلهای ویدیویی بزرگ می‌توانند LCP را با انحصار منابع شبکه و تأخیر در بارگذاری سایر منابع صفحه به تاخیر بیندازند.
ویدئوها
<video controls width="960" height="540" poster="flower-960-poster.png">
<source src="flower-960.mp4" type="video/mp4">
</video>
video {
max-width: 100%;
height: auto;
}
این ویدیو بدون ایجاد تغییر در طرح بارگیری می‌شود و یک تصویر پوستر را نمایش می‌دهد.
ویدوئوهای GIF
<video autoplay loop muted playsinline width="320" height="240">
<source src="dog.mp4" type="video/mp4">
</video>
این تگ <video> شبیه یک GIF به نظر می‌رسد اما سرعت بسیار بیشتری دارد.
سوالات متداول الگوهای web vitals
در این مقاله سعی کردیم تعدادی از الگوهای رایج و بهینه سازی شده UX برای core web vitals را به شما معرفی کنیم ، امیدواریم بتوانیم این مقاله را به روز نگه داریم و اطلاعات بیشتری به آن بیفزایم منتظر نظرات و پیشنهادات شما هستیم.
سلام و وقت به بخیر – عالی بود مطلبتون فقط یکم روان ترجمه نشده، سپاس
سلام خیلی ممنون چقدر کامل توضیح دادید من توی صفحه سایت کلیه فایلهای gif رو به ویدئو تبدیل کردم و بسیار توی لود صفحه و خود فیلمها تاثیر داشت با راهنمایی شما اون رو لوپ کردم و تقریبا شبیه gif شد
حالا یه مشکلی دارم و اون اینکه کادر دور فیلم رو چطور حذف کنم تا مثل عکس با پس زمیته قاطی بشه و کاربر نفهمه که فیلمه
سلام خوشحالیم مقاله تونسته کمکتون کنه
برای عدم نمایش کنترل در ویدئوها باید اولا سعی کنید زمینه ویدئوهای ساخته شده با محلی که در وب سایت قرار میگیره یکی باشه و یا حداقل طبق UI توصیه شده قبلا اصلاح شده باشه بعد کافیه کنترلهای ویدئو را بردارید تا فقط فیلم بدون حاشیه و کنترل نمایش داده بشه
برای نمایش ندادن کنترل های پخش کافیه تگ اچ تی ام ال رو به صورت
<video autoplay playsinline></video>
بنویسید تاکنترل ها معلوم نشن البته با یه استایل Css هم می تونید کاری کنید که کلا المان ویدئو بدون هر گونه کنترلی باشه مثل این کد
<pre><video autoplay playsinline style=”pointer-events: none;”></video></pre>
اینم از یه روش استاندارد برای حذف کنترل های ویدئو در html
<pre><video width=”300″ height=”200″ autoplay=”autoplay”>
<source src=”video/supercoolvideo.mp4″ type=”video/mp4″ />
</video></pre>