توسعهٔ وب و بازیراهنمای کاربردی

راهنمای Core Web Vitals؛ بهبود LCP، INP و CLS با برنامه

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

خلاصهٔ کاربردی

آنچه باید بدانید

  • بارگذاری، تعامل و ثبات را جدا اندازه بگیرید.
  • آزمون تکرارپذیر را با دادهٔ واقعی کاربران مقایسه کنید.
  • علت را اولویت‌بندی و کار مشتری را دوباره بررسی کنید.

تجربه‌ای را بسنجید که قابل‌اندازه‌گیری است

راهنمای Core Web Vitals گوگل سه معیار را معرفی می‌کند: LCP برای بارگذاری، INP برای پاسخ‌گویی و CLS برای ثبات ظاهری. مرز تجربهٔ خوب، LCP حداکثر ۲٫۵ ثانیه، INP حداکثر ۲۰۰ میلی‌ثانیه و CLS حداکثر ۰٫۱ است؛ این ارزیابی در صدک ۷۵ و با تفکیک موبایل و دسکتاپ انجام می‌شود. یک اجرای آزمایشگاهی معادل این دادهٔ کاربران واقعی نیست.

تأخیر بزرگ‌ترین عنصر قابل‌دیدن را پیدا کنید

راهنمای بهبود LCP تأخیر پاسخ سرور، کشف منبع، دریافت و نمایش را جدا می‌کند. عنصر واقعی را بررسی کنید و از ابتدا فرض نکنید حتماً عکس است. برای تصویر، کشف زودهنگام و اندازهٔ مناسب مهم است؛ برای متن، وابستگی فونت و سبک را بررسی کنید. اثر تغییر را با همان صفحه و شرایط دستگاه بسنجید.

تعامل‌ها را پاسخ‌گو نگه دارید

بهینه‌سازی INP به تأخیر پیرامون تعامل و کار رشتهٔ اصلی مرورگر توجه می‌کند. اسکریپت‌های بیرونی و کارهای طولانی هنگام منو، فیلتر و ارسال فرم را بررسی کنید. آزمون پذیرش پیشنهادی ما ساده است: در موبایلی معمولی منو را باز کنید، گزینه‌ای انتخاب کنید و فرم معتبر بفرستید. بازخورد باید زود دیده شود و خودِ عملیات هم درست تمام شود.

برای محتوای متغیر فضا رزرو کنید

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

یافته‌ها را به برنامهٔ کوچک اصلاح تبدیل کنید

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

منابع و مطالعهٔ بیشتر

گزارش این مطلب بر پایهٔ منابع اصلی زیر است. توصیه‌های اجرایی، راهنمای عمومی کیاوا هستند و باید با شرایط پروژه تطبیق داده شوند.

  1. Google web.dev: Core Web Vitals
  2. Google web.dev: optimize LCP
  3. Google web.dev: optimize INP
  4. Google web.dev: optimize CLS
از مطالعه تا اجرا

برای پروژهٔ خودت تصمیم بگیر.

نیاز وب‌سایت، سرور یا تیم فناوری‌تان را با کیاوا مطرح کنید.

گفتگو با کیاوا