CSS برای Web Vitals

تکنیک های مرتبط با CSS برای بهینه سازی Web Vitals

Katie Hempenius

Una Kravets

روشی که استایل‌ها و طرح‌بندی‌های خود را می‌نویسید، می‌تواند تأثیر زیادی بر Core Web Vitals داشته باشد. این به ویژه برای تغییر چیدمان تجمعی (CLS) و بزرگترین رنگ محتوایی (LCP) صادق است.

این مقاله تکنیک های مرتبط با CSS را برای بهینه سازی Web Vitals پوشش می دهد. این بهینه‌سازی‌ها بر اساس جنبه‌های مختلف صفحه تجزیه می‌شوند: چیدمان، تصاویر، فونت‌ها، انیمیشن‌ها و بارگذاری. در طول راه، بهبود یک صفحه نمونه را بررسی خواهیم کرد:

طرح بندی

درج محتوا در DOM

درج محتوا در یک صفحه پس از بارگیری محتوای اطراف، سایر موارد موجود در صفحه را پایین می‌آورد. این باعث تغییر چیدمان می شود.

اعلامیه های کوکی ، به ویژه آنهایی که در بالای صفحه قرار می گیرند، نمونه رایج این مشکل هستند. سایر عناصر صفحه که اغلب باعث این نوع تغییر طرح بندی هنگام بارگیری می شوند عبارتند از تبلیغات و جاسازی ها.

شناسایی کنید

ممیزی Lighthouse "Avoid large layout shifts" عناصر صفحه را که جابجا شده اند شناسایی می کند. برای این دمو، نتایج به این صورت است:

اعلان کوکی در این یافته‌ها فهرست نشده است، زیرا خود اعلامیه کوکی هنگام بارگیری تغییر نمی‌کند. بلکه باعث می شود آیتم های زیر آن در صفحه (یعنی div.hero و article ) جابجا شوند. برای اطلاعات بیشتر در مورد شناسایی و رفع تغییرات طرح‌بندی، به اشکال‌زدایی تغییرات طرح‌بندی مراجعه کنید.

رفع کنید

اعلامیه کوکی را با استفاده از موقعیت مطلق یا ثابت در پایین صفحه قرار دهید.

قبل از:

.banner {
  position: sticky;
  top: 0;
}

بعد از:

.banner {
  position: fixed;
  bottom: 0;
}

راه دیگر برای رفع این تغییر چیدمان، رزرو فضا برای اطلاعیه کوکی در بالای صفحه است. این رویکرد به همان اندازه مؤثر است. برای اطلاعات بیشتر، به بهترین شیوه های اطلاعیه کوکی مراجعه کنید.

تصاویر

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

تصاویر معمولاً بزرگترین عنصر رنگ محتوایی (LCP) در یک صفحه هستند. سایر عناصر صفحه که می توانند عنصر LCP باشند عبارتند از بلوک های متنی و تصاویر پوستر ویدیو. زمانی که عنصر LCP بارگذاری می شود، LCP را تعیین می کند.

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

در سایت مثال، تصویر پس زمینه اطلاعیه کوکی در واقع یک تصویر بزرگ است. برای بهبود LCP، به جای آن که یک تصویر را برای ایجاد افکت بارگذاری کنید، می‌توانید گرادیان را در CSS نقاشی کنید.

رفع کنید

CSS .banner را برای استفاده از گرادیان CSS به جای تصویر تغییر دهید:

قبل از:

background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")

بعد از:

background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);

تصاویر و چیدمان تغییر می کند

مرورگرها تنها زمانی می توانند اندازه تصویر را تعیین کنند که تصویر بارگذاری شود. اگر بارگذاری تصویر پس از رندر شدن صفحه اتفاق بیفتد، اما فضایی برای تصویر در نظر گرفته نشده باشد، زمانی که تصویر ظاهر می‌شود، تغییر طرح اتفاق می‌افتد. در نسخه ی نمایشی، تصویر قهرمان هنگام بارگیری باعث تغییر طرح بندی می شود.

شناسایی کنید

برای شناسایی تصاویر بدون width و height واضح، از ممیزی "عناصر تصویر دارای عرض و ارتفاع صریح هستند" Lighthouse استفاده کنید.

در این مثال، هر دو تصویر قهرمان و تصویر مقاله دارای ویژگی های width و height هستند.

رفع کنید

ویژگی های width و height را روی این تصاویر تنظیم کنید تا از تغییر طرح بندی جلوگیری کنید.

قبل از:

<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">

بعد از:

<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">

فونت ها

فونت ها می توانند رندر متن را به تأخیر بیندازند و باعث تغییر طرح شوند. در نتیجه، تحویل سریع فونت ها مهم است.

تأخیر در ارائه متن

به‌طور پیش‌فرض، اگر فونت‌های وب مرتبط با آن هنوز بارگذاری نشده باشند، مرورگر فوراً یک عنصر متنی را ارائه نمی‌کند. این کار برای جلوگیری از "فلش متن بدون استایل" (FOUT) انجام می شود. در بسیاری از موقعیت‌ها، این کار First Contentful Paint (FCP) را به تاخیر می‌اندازد. در برخی شرایط، این کار بزرگترین رنگ محتوایی (LCP) را به تاخیر می اندازد.

چیدمان تغییر می کند

تعویض فونت، در حالی که برای نمایش سریع محتوا به کاربر بسیار عالی است، این پتانسیل را دارد که باعث تغییر چیدمان شود. این تغییرات چیدمان زمانی اتفاق می‌افتد که یک فونت وب و فونت بازگشتی آن مقادیر متفاوتی از فضای صفحه را اشغال کنند. استفاده از فونت‌های با نسبت مشابه، اندازه این تغییرات طرح‌بندی را به حداقل می‌رساند.

شناسایی کنید

برای دیدن فونت هایی که در یک صفحه خاص بارگذاری می شوند، تب Network را در DevTools باز کنید و بر اساس فونت فیلتر کنید. فونت ها می توانند فایل های بزرگ باشند، بنابراین فقط استفاده از فونت های کمتر به طور کلی برای عملکرد بهتر است.

برای اینکه ببینید چقدر طول می کشد تا فونت درخواست شود، روی زبانه زمان بندی کلیک کنید. هر چه زودتر فونت درخواست شود، زودتر می توان آن را بارگیری و استفاده کرد.

برای مشاهده زنجیره درخواست برای فونت، روی تب Initiator کلیک کنید. به طور کلی، هرچه زنجیره درخواست کوتاه‌تر باشد، فونت را زودتر می‌توان درخواست کرد.

رفع کنید

این نسخه ی نمایشی از Google Fonts API استفاده می کند. فونت های گوگل گزینه بارگیری فونت ها را از طریق تگ های <link> یا عبارت @import فراهم می کند. قطعه کد <link> شامل یک راهنمایی منبع preconnect است. این باید منجر به تحویل سریعتر شیوه نامه نسبت به استفاده از نسخه @import شود.

در یک سطح بسیار بالا، می‌توانید نکات منبع را به عنوان راهی برای اشاره به مرورگر در نظر بگیرید که باید یک اتصال خاص را تنظیم کند یا یک منبع خاص را دانلود کند. در نتیجه مرورگر این اقدامات را اولویت بندی می کند. هنگام استفاده از نکات منابع، به خاطر داشته باشید که اولویت دادن به یک اقدام خاص، منابع مرورگر را از سایر اقدامات دور می کند. بنابراین، نکات منابع باید با تفکر و نه برای همه چیز استفاده شوند. برای اطلاعات بیشتر، به برقراری اتصالات شبکه زود هنگام برای بهبود سرعت درک شده صفحه مراجعه کنید.

عبارت @import زیر را از شیوه نامه خود حذف کنید:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');

تگ های <link> زیر را به <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=Roboto:wght@100&display=swap" rel="stylesheet">

این تگ‌های پیوند به مرورگر دستور می‌دهند تا ارتباط اولیه‌ای با مبداهای استفاده شده توسط فونت‌های Google برقرار کند و برگه سبکی را که حاوی اعلامیه فونت برای Montserrat و Roboto است بارگیری کند. این تگ‌های <link> باید تا حد امکان زودتر در <head> قرار گیرند.

انیمیشن ها

اولین روشی که انیمیشن‌ها روی Web Vitals تأثیر می‌گذارند، زمانی است که باعث تغییر طرح‌بندی می‌شوند. دو نوع انیمیشن وجود دارد که باید از استفاده از آنها اجتناب کنید: انیمیشن‌هایی که طرح‌بندی را فعال می‌کنند و افکت‌های «انیمیشن مانند» که عناصر صفحه را جابه‌جا می‌کنند. معمولاً این انیمیشن ها را می توان با معادل های کارآمدتر با استفاده از ویژگی های CSS مانند transform ، opacity و filter جایگزین کرد. برای اطلاعات بیشتر، نحوه ایجاد انیمیشن های CSS با کارایی بالا را ببینید.

شناسایی کنید

ممیزی Lighthouse "Avoid non-composited animations" ممکن است برای شناسایی انیمیشن های غیرقابل اجرا مفید باشد.

رفع کنید

دنباله انیمیشن slideIn را تغییر دهید تا از transform: translateX() به جای انتقال ویژگی margin-left استفاده کنید.

قبل از:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}

بعد از:

.header {
  animation: slideIn 1s 1 ease;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

CSS بحرانی

استایل شیت ها رندر را مسدود می کنند. این به این معنی است که مرورگر با یک شیوه نامه مواجه می شود، تا زمانی که مرورگر صفحه سبک را دانلود و تجزیه نکرده باشد، دانلود منابع دیگر را متوقف می کند. این ممکن است LCP را به تاخیر بیاندازد. برای بهبود عملکرد، حذف CSS استفاده نشده ، درون‌بندی CSS حیاتی و به تعویق انداختن CSS غیر بحرانی را در نظر بگیرید.

نتیجه گیری

اگرچه هنوز جا برای پیشرفت‌های بیشتر وجود دارد (مثلاً استفاده از فشرده‌سازی تصویر برای ارائه سریع‌تر تصاویر)، اما این تغییرات به طور قابل توجهی Web Vitals این سایت را بهبود بخشیده است. اگر این یک سایت واقعی بود، گام بعدی جمع‌آوری داده‌های عملکرد از کاربران واقعی بود تا ارزیابی شود که آیا آستانه‌های Web Vitals برای اکثر کاربران برآورده می‌شود یا خیر. برای اطلاعات بیشتر درباره Web Vitals، به Learn Web Vitals مراجعه کنید.