Core Web Vitals برای سایت فارسی: LCP، CLS، INP

Core Web Vitals برای سایت فارسی یعنی LCP، CLS و INP روی موبایل واقعی. تصویر سنگین، وزن زیاد فونت و اسلایدر تمام‌صفحه معمولاً مقصرند. تیم KGSM روی kgsm.ir این را از اسپرینت طراحی می‌بیند نه به‌عنوان وصله آخر. سرعت بخشی از سئو است و باید در طراحی سایت و در صورت نیاز برنامه‌نویسی از اول باشد. برای بررسی از تماس آدرس صفحه اول را بفرستید.

این راهنما با عنوان «Core Web Vitals برای سایت فارسی: LCP، CLS، INP» از تجربه تحویل پروژه‌های KGSM نوشته شده: محدوده نسخه اول، انتشار مرحله‌ای، و پشتیبانی بعد از تحویل.

مخاطب، ریسک و روش KGSM

صاحب سایت فارسی که روی موبایل کند است یا نمره LCP و CLS و INP را در سرچ یا PageSpeed بد می‌بیند

ویتال بد یعنی کاربر گوشی صفحه را می‌بندد، تبلیغ گران می‌شود، و گوگل تجربه را علیه شما حساب می‌کند.

KGSM سرعت را در طراحی و سئوی فنی با هم می‌بندد: تصویر، فونت فارسی، اسکریپت، و میزبانی — نه نمره مصنوعی دسکتاپ.

LCP: بزرگ‌ترین عنصر را سبک و زود بیاورید

LCP معمولاً تصویر هیرو، اسلایدر، یا تیتر بزرگ با فونت دیررس است. کاور مقاله را JPEG یا WebP کوچک کنید و ابعاد را در HTML بگذارید. تصویر هیرو را lazy نکنید؛ زیر تا را lazy کنید. اسلایدر تمام‌صفحه را حذف کنید یا اسلاید اول را همان فایل سبک هیرو کنید. روی میزبانی ایرانی مسیر فایل را کوتاه کنید؛ سی‌دی‌ان خارجی گاهی از داخل ایران دیر جواب می‌دهد. KGSM در طراحی سایت هیرو را با بودجه کیلوبایت می‌بندد نه با کیفیت دوربین تبلیغاتی. پیش‌بار فونت فقط برای وزن متن اصلی باشد. اگر LCP متن است، فونت را با font-display=swap بیاورید تا متن مخفی نماند. نمره دسکتاپ PageSpeed را جشن نگیرید؛ فیلد موبایل در Search Console همان تجربه کاربر ایرانی است. یک صفحه اول زیر دو و نیم ثانیه روی ۴G هدف عملی نسخه اول است نه صد از صد آزمایشگاه.

تصویر هیرو را lazy نکنید؛ ابعاد را در HTML بگذارید. اسلایدر پنج‌تصویره LCP را روی گوشی به بالای چهار ثانیه رساند تا اسلاید اول همان هیرو شد.

CLS: پرش چیدمان راست‌چین را ببندید

CLS در سایت فارسی اغلب از بنر بالای صفحه، فونت جایگزین با عرض متفاوت، اسلایدر، و تبلیغ دیررس می‌آید. برای تصویر عرض و ارتفاع ذخیره کنید تا پاراگراف بعد از لود نپرد. جای اینماد، چت، و نوار کوکی را از اول در چیدمان بگذارید. فونت وزیر یا ایران‌سنس اگر دیر بیاید و عرض حروف عوض شود، منوی راست‌چین می‌پرد. وزن‌ها را کم کنید و متریک فونت را نزدیک نگه دارید. KGSM اسلایدر خودکار را به‌خاطر CLS و حواس‌پرتی حذف می‌کند مگر پیام واحد داشته باشد. روی موبایل دکمه ثابت تماس اگر ارتفاع را بدون رزرو عوض کند نمره را خراب می‌کند. فونت آیکون دیررس همان پرش را می‌سازد؛ SVG داخل صفحه پایدارتر است. بعد از تغییر قالب وردپرس دوباره فیلد CLS را ببینید چون افزونه جدید بنر می‌گذارد. تست را با throttle شبکه انجام دهید نه روی وای‌فای دفتر.

چت شخص ثالث INP منو را خراب کرد؛ به بعد از کلیک منتقل شد. فونت فارسی را به دو وزن محدود کنید و swap بگذارید.

INP: کلیک باید در همان لحظه جواب بدهد

INP تأخیر بعد از کلیک یا لمس است. منوی موبایل سنگین، اسلایدر ج‌اس، و چند تگ منیجر همزمان ورودی را قفل می‌کنند. اسکریپت شخص ثالث — چت، نقشه، آنالیتیکس تکراری — را به بعد از تعامل یا به یک ابزار کم کنید. رویداد اسکرول و انیمیشن را روی رشته اصلی سبک نگه دارید. KGSM در برنامه‌نویسی وب باندل فرانت را می‌شکند تا صفحه اول فقط همان را لود کند که برای دیدن و فرم لازم است. دکمه خرید یا ارسال فرم را به کتابخانه سنگین گره نزنید. روی گوشی میان‌رده ایرانی تست کنید؛ لپ‌تاپ توسعه‌دهنده دروغ می‌گوید. اگر چارچوب فرانت کل صفحه را هیدراته می‌کند، برای ویترین شرکتی شاید HTML سرور کافی باشد و INP خودبه‌خود بهتر شود. خطای اعتبارسنجی فرم را بدون رفرش کامل نشان دهید تا لمس دوم معطل شبکه نماند و کاربر فکر نکند دکمه مرده است.

اسلایدر تمام‌صفحه را از صفحه اول بردارید. فونت چهار وزن CLS منوی راست‌چین را هر بار ورود اول نشان داد.

فونت فارسی، تصویر و میزبانی را با هم ببینید

ویتال سایت فارسی جدا از فونت و هاست درست نمی‌شود. دو وزن فونت، زیرمجموعه حروف اگر ابزار دارید، و پرهیز از چهار خانواده همزمان. تصاویر را قبل از آپلود در پنل فشرده کنید؛ آموزش ویرایشگر را در تحویل بگذارید وگرنه فردا کاور هشت‌مگابایتی برمی‌گردد. میزبانی را با TTFB روی موبایل ایران بسنجید. کش صفحه و HTTP/2 را روشن کنید. بعد از این‌ها سئو فیلد کروم را پایش می‌کند چون آزمایشگاه با فیلد یکی نیست. KGSM این بسته را در طراحی و توسعه یک‌جا قیمت می‌دهد تا سرعت «فاز دو» نشود. اگر قالب آماده هر افزونه را لود می‌کند، هزینه ویال را در برآورد ریدیزاین ببینید. برای طرح بهبود از تماس لینک PageSpeed و آدرس میزبان را بفرستید تا نسخه اول روی کار واقعی باشد نه روی نمره لپ‌تاپ. ویدیو خودکار را از هیرو موبایل بردارید.

کاور هشت‌مگابایتی بعد از آموزش ویرایشگر دیگر آپلود نشد و LCP برگشت. چت و نقشه را بعد از تعامل کاربر لود کنید.

TTFB را با اینترنت موبایل ایران اندازه بگیرید نه با وای‌فای دفتر. CDN خارجی از داخل ایران کند بود؛ فایل استاتیک روی هاست نزدیک آمد.

نمره دسکتاپ ۹۵ بود و فیلد موبایل قرمز؛ تصمیم روی فیلد گرفته شد. ویرایشگر را آموزش دهید تا کاور فشرده‌نشده آپلود نشود.

نمره آزمایشگاه را با گزارش فیلد Search Console یکی ندانید. اسلایدر پنج‌تصویره LCP را روی گوشی به بالای چهار ثانیه رساند تا اسلاید اول همان هیرو شد.

چت شخص ثالث INP منو را خراب کرد؛ به بعد از کلیک منتقل شد. افزونه جدید را قبل از انتشار از نظر CLS روی موبایل چک کنید.

چک‌لیست اجرا

• تصویر هیرو را lazy نکنید؛ ابعاد را در HTML بگذارید.
• فونت فارسی را به دو وزن محدود کنید و swap بگذارید.
• اسلایدر تمام‌صفحه را از صفحه اول بردارید.
• چت و نقشه را بعد از تعامل کاربر لود کنید.
• TTFB را با اینترنت موبایل ایران اندازه بگیرید نه با وای‌فای دفتر.
• ویرایشگر را آموزش دهید تا کاور فشرده‌نشده آپلود نشود.
• نمره آزمایشگاه را با گزارش فیلد Search Console یکی ندانید.
• افزونه جدید را قبل از انتشار از نظر CLS روی موبایل چک کنید.

سناریوی واقعی 1

اسلایدر پنج‌تصویره LCP را روی گوشی به بالای چهار ثانیه رساند تا اسلاید اول همان هیرو شد.

تصویر هیرو را lazy نکنید؛ ابعاد را در HTML بگذارید.

سناریوی واقعی 2

چت شخص ثالث INP منو را خراب کرد؛ به بعد از کلیک منتقل شد.

فونت فارسی را به دو وزن محدود کنید و swap بگذارید.

سناریوی واقعی 3

فونت چهار وزن CLS منوی راست‌چین را هر بار ورود اول نشان داد.

اسلایدر تمام‌صفحه را از صفحه اول بردارید.

سناریوی واقعی 4

کاور هشت‌مگابایتی بعد از آموزش ویرایشگر دیگر آپلود نشد و LCP برگشت.

چت و نقشه را بعد از تعامل کاربر لود کنید.

سناریوی واقعی 5

CDN خارجی از داخل ایران کند بود؛ فایل استاتیک روی هاست نزدیک آمد.

TTFB را با اینترنت موبایل ایران اندازه بگیرید نه با وای‌فای دفتر.

سناریوی واقعی 6

نمره دسکتاپ ۹۵ بود و فیلد موبایل قرمز؛ تصمیم روی فیلد گرفته شد.

ویرایشگر را آموزش دهید تا کاور فشرده‌نشده آپلود نشود.

صفحات مرتبط KGSM

ادامه را در KGSM و خدمات سئو و بهینه‌سازی، طراحی سایت ببینید. مقالات مرتبط: راهنمای سئو سایت فارسی ۱۴۰۵ — چک‌لیست عملی برای رتبه گوگل، شروع کار با Google Search Console برای سایت ایرانی. برای برآورد محدوده نسخه اول از فرم تماس استفاده کنید.

وقتی این نکته به تیم زنده می‌رسد باید قانون اجرایی باشد نه اسلاید: تصویر هیرو را lazy نکنید؛ ابعاد را در HTML بگذارید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.

وقتی این نکته به تیم زنده می‌رسد باید قانون اجرایی باشد نه اسلاید: فونت فارسی را به دو وزن محدود کنید و swap بگذارید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.

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

وقتی این نکته به تیم زنده می‌رسد باید قانون اجرایی باشد نه اسلاید: چت و نقشه را بعد از تعامل کاربر لود کنید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.

وقتی این نکته به تیم زنده می‌رسد باید قانون اجرایی باشد نه اسلاید: TTFB را با اینترنت موبایل ایران اندازه بگیرید نه با وای‌فای دفتر. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.

وقتی این نکته به تیم زنده می‌رسد باید قانون اجرایی باشد نه اسلاید: ویرایشگر را آموزش دهید تا کاور فشرده‌نشده آپلود نشود. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.

وقتی این نکته به تیم زنده می‌رسد باید قانون اجرایی باشد نه اسلاید: نمره آزمایشگاه را با گزارش فیلد Search Console یکی ندانید. برایش مالک و تاریخ بازبینی بگذارید تا در اولین هفته شلوغ فراموش نشود.