Core Web Vitals وردپرس؛ راهنمای LCP، INP و CLS
سه معیار اصلی تجربهٔ صفحه را بشناسید، گلوگاه را پیدا کنید و برای بهبود LCP، INP و CLS در سایت وردپرسی تصمیم درست بگیرید.
پاسخ کوتاه
Core Web Vitals کیفیت بارگذاری، پاسخگویی و ثبات بصری را میسنجد. هدفهای خوب شامل LCP حداکثر ۲٫۵ ثانیه، INP حداکثر ۲۰۰ میلیثانیه و CLS حداکثر ۰٫۱ است؛ ارزیابی تجربهٔ واقعی به صدک ۷۵ بازدیدها وابسته است.
سه معیار، سه مسئلهٔ متفاوت
LCP زمان نمایش بزرگترین محتوای قابل مشاهده در محدودهٔ دید را توصیف میکند؛ INP به تأخیر پاسخ بصری در تعاملهای کاربر مربوط است؛ CLS میزان جابهجایی غیرمنتظرهٔ چیدمان را دنبال میکند. اینها سه نام متفاوت برای یک نمرهٔ سرعت نیستند و راهحل یکسانی هم ندارند.
فرض کنید تصویر بالای مقاله دیر ظاهر میشود، منو با تأخیر باز میشود و با بارگذاری تبلیغ متن پایین میرود. بهتر است این سه مشکل را سه کار مستقل بنویسید. کاهش حجم تصویر، لزوماً پردازش سنگین دکمهٔ منو یا فضای رزرو نشدهٔ تبلیغ را اصلاح نمیکند.
مرجع اعداد این مقاله مستندات Web Vitals است که در پایان آمده است. این اعداد هدف عمومی تجربهٔ خوب هستند، نه نتیجهٔ آزمون NexoraPlug یا تضمین رتبه در گوگل.
LCP ضعیف: مسیر محتوای اصلی را دنبال کنید
ابتدا در ابزار بررسی عملکرد مشخص کنید عنصر LCP کدام است. ممکن است تصویر اصلی، تیتر یا یک بلوک متن باشد. بدون این تشخیص، ممکن است زمان را صرف کوچککردن تصویری کنید که اصلاً عامل مشکل نیست.
برای تصویر اصلی، زمان شروع درخواست، حجم انتقال و زمان نمایش آن را جدا ببینید. اگر HTML دیر میرسد، بهبود صرف تصویر کافی نیست. اگر تصویر فقط پس از اجرای اسکریپت کشف میشود، باید شیوهٔ ارائهٔ آن در صفحه بررسی شود.
در یک صفحهٔ محصول فرضی، میتوانید اسلایدر آغازین را با یک تصویر واضح محصول جایگزین کنید و نتیجه را بسنجید. این تغییر علاوه بر حجم، ممکن است انتخاب پیام اصلی را سادهتر کند؛ اما نتیجه باید روی همان قالب و همان دستگاه اندازهگیری شود.
INP ضعیف: با صفحه کار کنید
بارگذاری صفحه و نگاهکردن به آن برای تشخیص تعامل کند کافی نیست. منو را باز کنید، جستجو انجام دهید و فیلترها را تغییر دهید. در پنل Performance ببینید هنگام آن تعامل چه کاری رشتهٔ اصلی مرورگر را اشغال کرده است.
اگر یک فیلتر برای هر حرف تایپشده محاسبهٔ بزرگی انجام میدهد، حجم کار و دفعات اجرای آن را کاهش دهید. در صورت نیاز، کار غیرضروری را از بهروزرسانی فوری رابط جدا کنید. هدف این است که کاربر پاسخ عمل خودش را زود ببیند.
در فرم چندمرحلهای، نمایش وضعیت در حال بررسی میتواند ابهام را کم کند؛ اما نمایش یک انیمیشن بهتنهایی پردازش سنگین را برطرف نمیکند. هم زمان پاسخ و هم صحت خروجی فرم باید بررسی شوند.
CLS ضعیف: قبل از رسیدن محتوا جا باز کنید
برای تصاویر، ویدئو، جایگاه تبلیغ و ابزارهای قابل جاسازی، فضای متناسب با نمایش نهایی در نظر بگیرید. اگر اندازهٔ آنها از ابتدا مشخص نباشد، اضافهشدن محتوا میتواند جای متن و دکمهها را عوض کند.
در صفحهٔ فارسی، تعویض فونت میتواند طول خط و ارتفاع پاراگراف را تغییر دهد. اندازههای نزدیک برای فونت جایگزین و تعداد محدود وزنها را بررسی کنید. تیترهایی که در دسکتاپ یک خطاند ممکن است در موبایل سه خط شوند.
برای اعلانها نیز موقعیت مشخص داشته باشید. اگر پیامی پس از بارگذاری بالای فرم ظاهر میشود، نباید دکمهای که کاربر در حال لمس آن است ناگهان جابهجا شود. این مسئله را با شبکهٔ آهسته و صفحهٔ کوچک بازسازی کنید.
دادهٔ آزمایشگاهی را از دادهٔ واقعی جدا کنید
PageSpeed Insights ممکن است دادهٔ کاربران واقعی را همراه با اجرای آزمایشگاهی نمایش دهد. این دو بازه و روش یکسانی ندارند. دادهٔ میدانی میتواند اثر بازدیدهای گذشته را داشته باشد؛ پس تغییر امروز لزوماً همان لحظه در گزارش تجمیعی دیده نمیشود.
اگر سایت تازه است و دادهٔ میدانی ندارد، نبود گزارش به معنای خوب یا بد بودن قطعی نیست. آزمونهای محلی، بررسی چند دستگاه و ثبت خط مبنا را ادامه دهید تا اطلاعات کافی از استفادهٔ واقعی در دسترس باشد.
برای اولویتبندی، قالبی را انتخاب کنید که هم مشکل واضح دارد و هم مسیر مهمی را پوشش میدهد. اصلاح یک قالب مشترک مقاله ممکن است به چندین صفحه کمک کند. سپس اثر تغییر را با همان معیار و همان سناریوی اولیه بررسی کنید.
چکلیست اجرای این راهنما
برای مرور کارها علامت بزنید. انتخابها فقط تا زمان بازبودن همین صفحه باقی میمانند.
پرسشهای رایج
آیا Lighthouse میتواند INP واقعی سایت را تضمین کند؟
خیر. آزمون معمول بارگذاری، رفتار همهٔ کاربران را بازسازی نمیکند. برای INP باید تعامل و در نهایت دادهٔ میدانی بررسی شود.
اگر سایت دادهٔ CrUX نداشته باشد چه کنیم؟
با آزمون قالبهای مهم و سناریوهای واقعی شروع کنید و نتیجه را محدود به همان شرایط گزارش کنید؛ نبود داده، بهتنهایی نتیجهٔ قبولی یا رد نیست.
منابع و مطالعهٔ بیشتر
مبنای فنی این راهنما، مستندات رسمی زیر است. سناریوهای اجرایی مقاله نمونهٔ پیشنهادیاند؛ نتایج هر سایت باید جداگانه اندازهگیری شوند.