سرعت سایت = فروش بیشتر: Core Web Vitals به زبان ساده برای کسب‌وکارها

وقتی برای طراحی سایت هزینه می‌کنید، به رنگ فکر می‌کنید نه به ۲.۵ ثانیه. ولی همین عددها تعیین می‌کنند مشتری می‌ماند یا می‌رود. گوگل به آن Core Web Vitals می‌گوید — سه معیار سرعت از چشم کاربر. سایت کند = مشتری کمتر + رتبه پایین‌تر.

خبر خوب: لازم نیست برنامه‌نویس باشید. در این مقاله هر سه معیار را ساده توضیح می‌دهم، می‌گویم چطور در ۵ دقیقه سایت را تست کنید و چه کاری بیشترین اثر را دارد. برای هر کسی که به طراحی سایت فروشگاهی سریع فکر می‌کند، این اعداد از گرافیک مهم‌ترند.

چرا این مهم است؟ یک کیس واقعی از پروژه نُدرا

سال گذشته برای پروژه سنگ نُدرا — یک فروشگاه سنگ ساختمانی در غرب تهران — سایت را تحویل گرفتیم. طراحی زیبا بود، عکس‌های سنگ‌ها با کیفیت ۴K و حجم هر عکس حدود ۴ مگابایت. روی کاغذ همه‌چیز عالی، ولی در عمل LCP صفحه اصلی ۶.۲ ثانیه بود. یعنی مشتری با اینترنت موبایل ایران باید ۶ ثانیه منتظر می‌ماند تا اولین عکس بزرگ لود شود.

نتیجه؟ نرخ پرش ۷۸٪ و از هر ۱۰۰ بازدید، فقط ۱ نفر فرم تماس را پر می‌کرد. مشتری فکر می‌کرد «سایت بازدید ندارد»، ولی مشکل ترافیک نبود؛ مشکل سرعت بود.

کاری که کردیم: عکس‌ها WebP و next/image (۱۸۰KB میانگین)، فونت با next/font، حذف اسلایدر ۳ مگابایتی. LCP ۶.۲→۱.۸s، CLS ۰.۲۸→۰.۰۲، INP ۳۴۰→۱۲۰ms. تبدیل ۱٪→۳.۴٪ — ۳ برابر تماس با همان ترافیک. این قدرت طراحی سایت سریع است.

خیلی از کسب‌وکارهای شهریار همین مشکل را دارند: هزینه تبلیغ می‌دهند ولی سایت کند همه‌چیز را هدر می‌دهد.

Core Web Vitals چیست؟ سه عددی که گوگل واقعاً چک می‌کند

گوگل از ۲۰۲۱ Core Web Vitals را جزو رتبه‌بندی آورد (منبع: web.dev/vitals). سه معیار اصلی:

۱. LCP — سرعت لود اصلی (باید زیر ۲.۵ ثانیه)

Largest Contentful Paint یعنی «چقدر طول می‌کشد بزرگ‌ترین چیز صفحه — معمولاً عکس هیرو یا تیتر اصلی — دیده شود؟» گوگل می‌گوید زیر ۲.۵ ثانیه خوب است، ۲.۵ تا ۴ نیاز به بهبود، بالای ۴ ضعیف.

۲. INP — سرعت واکنش (باید زیر ۲۰۰ میلی‌ثانیه)

Interaction to Next Paint یعنی «وقتی روی دکمه کلیک می‌کنم، چقدر طول می‌کشد سایت جواب دهد؟» مثلاً کلیک روی «افزودن به سبد»، باز شدن منو، یا فیلتر محصولات. زیر ۲۰۰ms خوب، ۲۰۰-۵۰۰ نیاز به بهبود، بالای ۵۰۰ ضعیف.

۳. CLS — ثبات صفحه (باید زیر ۰.۱)

Cumulative Layout Shift یعنی «صفحه موقع لود تکان می‌خورد؟» حتماً دیده‌اید که می‌خواهید روی دکمه‌ای کلیک کنید و ناگهان تبلیغ لود می‌شود و دکمه جابجا می‌شود و اشتباهی جای دیگر کلیک می‌کنید. امتیاز زیر ۰.۱ خوب، ۰.۱ تا ۰.۲۵ متوسط، بالای ۰.۲۵ ضعیف.

هر سه عدد را می‌توانید همین الان در PageSpeed Insights با وارد کردن آدرس سایت ببینید — هم نسخه موبایل هم دسکتاپ، با داده واقعی کاربران (CrUX) و پیشنهادهای مشخص.

چکلیست عملی: همین امروز این ۷ کار را انجام دهید

لازم نیست کل سایت را دوباره بسازید. این چکلیست را با تیم فنی یا حتی خودتان چک کنید:

• [ ] ۱. تست کنید: آدرس را در PageSpeed Insights بزنید (تب Mobile). قرمز یا سبز؟ اسکرین‌شات بگیرید.
• [ ] ۲. عکس‌ها را سبک کنید: هر عکسی بالای ۵۰۰KB را با ابزار رایگان مثل Squoosh یا TinyPNG به WebP تبدیل کنید. سایز را هم درست کنید — عکس ۴۰۰۰px برای نمایش ۶۰۰px لازم نیست. در طراحی سایت مدرن با Next.js این کار با next/image خودکار است.
• [ ] ۳. سایز را ثابت کنید: به هر عکس width/height بدهید تا مرورگر جا رزرو کند — CLS نصف می‌شود.
• [ ] ۴. فونت را سبک کنید: فقط وزن‌های لازم (400/700) و display: optional — بدون پرش متن.
• [ ] ۵. اسکریپت‌های اضافی را حذف کنید: چت آنلاین، پیکسل فیسبوک، اسکریپت اینستاگرام — هر کدام ۱۰۰-۳۰۰ms اضافه می‌کنند. فقط چیزهایی که واقعاً می‌فروشند را نگه دارید. یک اسلایدر سنگین را با یک تصویر ثابت عوض کنید.
• [ ] ۶. هاست را چک کنید: TTFB بالای ۱.۵s یعنی LCP هیچ‌وقت سبز نمی‌شود. هاست با TTFB زیر ۶۰۰ms بگیرید.
• [ ] ۷. کش را فعال کنید: Gzip/Brotli و کش مرورگر روشن باشد. در Next.js خودکار است؛ در وردپرس با WP Rocket/LiteSpeed یک‌کلیکه.

این ۷ مورد معمولاً ۸۰٪ مشکل را حل می‌کند بدون بازطراحی کامل.

جدول مقایسه: سایت کند vs سایت سریع — تفاوت در عدد و درآمد

| معیار | سایت کند (قبل بهینه‌سازی) | سایت سریع (بعد بهینه‌سازی) | اثر روی کسب‌وکار | | :--- | :--- | :--- | :--- | | LCP | ۵.۸ ثانیه | ۱.۹ ثانیه | هر ۰.۱ ثانیه بهبود ≈ تا ۸٪ افزایش تبدیل (داده گوگل) | | INP | ۳۵۰ms (کند) | ۱۲۰ms (سریع) | کاربر موقع کلیک «قفل» حس نمی‌کند، سبد خرید رها نمی‌شود | | CLS | ۰.۳۲ (پرش زیاد) | ۰.۰۳ (ثابت) | کلیک اشتباه و عصبانیت کاربر حذف می‌شود | | نرخ پرش | ۷۵-۸۰٪ | ۳۵-۴۵٪ | مشتری می‌ماند و می‌خواند | | رتبه گوگل | افت در موبایل | شانس بالاتر در Page Experience | در رقابت با محتوای مشابه، سرعت برنده می‌کند | | هزینه/زمان | — | ۱-۳ روز، ۸-۲۰ میلیون* | بازگشت معمولاً ۱-۲ ماهه |

* اگر خیلی قدیمی و پرافزونه است، بازطراحی به‌صرفه‌تر است — مسیر ایده تا اجرای سایت جدید را ببین.

انتخاب مسیر:

| وضعیت فعلی | بهترین اقدام | زمان تقریبی | | :--- | :--- | :--- | | LCP زیر ۲.۵ ولی CLS خراب | فقط سایز عکس‌ها و فونت را درست کنید | نصف روز | | هر سه قرمز و سایت وردپرسی شلوغ | عکس‌ها + حذف افزونه‌ها + کش | ۱-۲ روز | | هر سه قرمز و قالب قدیمی ۵ ساله | بازطراحی سبک با Next.js یا قالب سبک جدید | ۲-۴ هفته |

اگر برای طراحی سایت جدید برنامه دارید، از روز اول این سه عدد را در قرارداد بنویسید: «تحویل با LCP <2.5s روی موبایل 4G ایران». این یک جمله، شما را از ۶ ماه بعدِ «چرا سایتم کند است؟» نجات می‌دهد.

این راه حل کی به درد نمی‌خوره — صادقانه بگوییم

بهینه‌سازی Core Web Vitals معجزه نیست. اگر مشکل اصلی‌تان این‌هاست، سرعت به‌تنهایی فروش نمی‌آورد:

• قیمت پرت: ۳۰٪ گران‌تر از دیجی‌کالا بدون مزیت = سایت سریع هم نمی‌فروشد.
• ترافیک صفر: روزی ۵ بازدید ×۳ هم می‌شود ۱ تماس. اول ورودی بسازید.
• پورتال داخلی: کسی از گوگل نمی‌آید؛ CLS مهم نیست. پول را جای دیگر خرج کنید.

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

سوالات متداول

۱. آیا ۰.۵ ثانیه واقعاً رتبه را کم می‌کند؟

بله. بین دو محتوای مشابه، تجربه بهتر برنده است — چک‌لیست سئو تکنیکال.

۲. با وردپرس هم می‌شود Core Web Vitals را سبز کرد یا باید بروم سراغ Next.js؟

می‌شود ولی سقف دارد. با WebP، کش خوب و هاست مناسب خیلی از وردپرس‌ها سبز می‌شوند. اما با صفحه‌ساز سنگین + ۳۰ پلاگین، بهتر است یک طراحی سایت سبک با Next.js بسازید — مثل اطلس کابین.

۳. هزینه و زمان؟

سایت معرفی ۵-۱۰ صفحه: ۸-۱۵ میلیون، ۱-۲ روز. فروشگاهی ۲۰۰ محصول: ۱۵-۳۰ میلیون، ۳-۷ روز. بازطراحی از ۴۰ میلیون، ۲-۳ هفته. گزارش PageSpeed را به تماس با ما بفرستید — رایگان می‌گوییم کدام دسته‌اید.

---

سرعت سایت زیرساخت فروش است، نه لوکس. یک تست ۳۰ ثانیه‌ای در PageSpeed Insights بگیرید و با چکلیست مقایسه کنید. اگر خواستید ما سبز کنیم، پیام دهید — با عدد تحویل می‌دهیم، نه حرف.