شاخص‌های حیاتی وب برای وب‌سایت‌های کسب‌وکارهای کوچک: راهنمای ساده LCP، INP و CLS

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

شاخص‌های حیاتی وب واقعاً چه هستند؟

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

• LCP (بزرگ‌ترین رنگ‌آمیزی محتوا) – مدت زمانی که طول می‌کشد تا محتوای اصلی (معمولاً یک تصویر هدر یا عنوان) ظاهر شود. هدف زیر ۲.۵ ثانیه است.
• INP (تعامل تا رنگ‌آمیزی بعدی) – سرعت پاسخ صفحه شما هنگام کلیک یا لمس کاربر. هدف زیر ۲۰۰ میلی‌ثانیه است.
• CLS (تغییر چیدمان تجمعی) – میزان جابه‌جایی صفحه شما در حین بارگذاری. هدف کمتر از ۰.۱ است.

اگر هر یک از این موارد در محدوده قرمز باشد، گوگل متوجه می‌شود—و بازدیدکنندگان شما نیز متوجه می‌شوند.

چگونه امتیازهای خود را بررسی کنید (بدون نیاز به کد)

دو ابزار رایگان دارید که دقیقاً وضعیت شما را نشان می‌دهند.

PageSpeed Insights – به pagespeed.web.dev بروید، آدرس خود را وارد کنید و روی Analyze بزنید. امتیازی برای موبایل و دسکتاپ به همراه فهرستی از فرصت‌های مشخص دریافت می‌کنید. بخش «Diagnose performance issues» فهرست کارهای شماست.

Google Search Console – اگر سایت خود را تأیید کرده‌اید، زیر «Experience» > «Core Web Vitals» را ببینید. این بخش داده‌های دنیای واقعی از بازدیدکنندگان واقعی را به تفکیک URL نشان می‌دهد. به شما می‌گوید کدام صفحات «Poor»، «Need improvement» یا «Good» هستند.

هر دو را اجرا کنید. PageSpeed Insights داده‌های آزمایشگاهی و راه‌حل‌ها را ارائه می‌دهد؛ Search Console نشان می‌دهد کاربران واقعی در طول زمان سایت شما را چگونه تجربه می‌کنند.

راه‌حل‌های اولویت‌دار بدون کد که تأثیر واقعی دارند

نیازی نیست حتی یک خط کد را تغییر دهید. با این سه راه‌حل به ترتیب شروع کنید.

۱. تصاویر هدر را فشرده و اندازه‌بهینه کنید

LCP شما تقریباً همیشه یک تصویر است. یک عکس هدر ۴ مگابایتی قاتل شماره یک است.

• تصاویر را به ابعاد دقیقی که نمایش داده می‌شوند تغییر اندازه دهید (معمولاً عرض بیش از ۱۶۰۰ پیکسل نباشد).
• آن‌ها را با ابزارهای رایگانی مانند Squoosh یا TinyPNG فشرده کنید—هدف زیر ۲۰۰ کیلوبایت باشد.
• در صورت پشتیبانی پلتفرم، از فرمت WebP استفاده کنید.

اگر از webceke استفاده می‌کنید، تصاویر به‌صورت خودکار بهینه‌سازی شده و در فرمت‌های مدرن ارائه می‌شوند، بنابراین این مورد برای شما انجام شده است.

۲. اسلایدرها و فونت‌های سنگین مسدودکننده رندر را حذف کنید

اسلایدرها و چرخ‌فلک‌ها چندین تصویر بزرگ و جاوااسکریپت را قبل از ظاهر شدن هر چیز دیگری بارگذاری می‌کنند. آن‌ها LCP را به تأخیر می‌اندازند و به INP آسیب می‌زنند. آن‌ها را با یک تصویر هدر ثابت یا یک شبکه ساده جایگزین کنید.

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

۳. برای تبلیغات و محتوای جاسازی‌شده فضا رزرو کنید

CLS زمانی رخ می‌دهد که محتوا بدون اندازه ثابت بارگذاری شود. تبلیغات، محتوای جاسازی‌شده یوتیوب و پست‌های شبکه‌های اجتماعی از متهمان رایج هستند.

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

این کار مانع از پرش صفحه می‌شود و امتیاز CLS شما را پایین نگه می‌دارد.

قبل و بعد: یک مثال واقعی

یک نانوایی محلی LCP ۵.۸ ثانیه، INP ۳۴۰ میلی‌ثانیه و CLS ۰.۳۲ داشت. پس از فشرده‌سازی تصویر هدر، حذف یک اسلایدر و رزرو فضا برای یک محتوای جاسازی‌شده اینستاگرام، امتیازها به LCP ۱.۹ ثانیه، INP ۱۲۰ میلی‌ثانیه و CLS ۰.۰۴ کاهش یافت.

نتایج فراتر از سرعت بود:

• ترافیک ارگانیک در سه ماه ۴۲٪ افزایش یافت.
• نرخ پرش از ۶۸٪ به ۴۱٪ کاهش یافت.
• سفارش‌های آنلاین ۲۷٪ افزایش یافت.

شاخص‌های حیاتی وب بهتر به این معنی بود که افراد بیشتری ماندند، کاوش کردند و خرید کردند.

قدم بعدی شما

شاخص‌های حیاتی وب برای وب‌سایت‌های کسب‌وکارهای کوچک فقط یک تیک فنی نیستند—آن‌ها مستقیماً بر تعداد مشتریانی که شما را پیدا می‌کنند و به شما اعتماد می‌کنند تأثیر می‌گذارند. امروز امتیازهای خود را با PageSpeed Insights و Search Console بررسی کنید، سپس سه راه‌حل بالا را انجام دهید.

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