4 تکنیک مهم رفع مشکلات Core Web Vitals

آیا از مشکل کندی سایت خود خسته شده اید و می خواهید اقدام به رفع مشکلات Core Web Vitals و افزایش سرعت سایت خود کنید؟

خوشبختانه تکنیک ها و راهنماهای زیادی وجود دارند که به شما کمک می کنند سرعت سایت و عملکرد Core Web Vitals را بهبود بخشید. در واقع، فقط در سال های اخیر چندین قابلیت جدید به مرورگر کروم اضافه شده است که امکانات زیر را ارائه می دهد:

• روش های جدید برای بهینه سازی Core Web Vitals سایت
• روش های جدید برای شناسایی مشکلات Core Web Vitals
• همه این ها در مرورگر شما

“همه این ها در مرورگر شما” به این معنی است که تمام این قابلیت ها و ابزارهای جدید برای بهبود مستقیماً در خود مرورگر شما در دسترس هستند. بنابراین برای حل مشکلات Core Web Vitals نیازی به ابزارهای خارجی یا نرم افزارهای پیچیده ندارید. شما می توانید به راحتی این ویژگی ها را از طریق ابزارهای توسعه دهنده و قابلیت های جدید مرورگر برای بهبود عملکرد سایت خود استفاده کنید.

در این مقاله به این قابلیت های جدید مرورگر برای سئو و نحوه استفاده از آن ها برای ارزیابی Core Web Vitals گوگل پرداخته می شود. مواردی  که در این مقاله می خوانید عبارتند از:

• تاثیر Core Web Vitals بر تجربه کاربری و سئو سایت
• اضافه کردن ناوبری فوری و رفع مشکلات Core Web Vitals
• بهبود Core Web Vitals با استفاده از API جدید
• مشاهده معیارهای Core Web Vitals در تب Performance
• تحلیل اجزای LCP و نقش آن در رفع مشکلات Core Web Vitals
• چگونگی ارزیابی Core Web Vitals گوگل

تاثیر Core Web Vitals بر تجربه کاربری و سئو سایت

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

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

1. (LCP) Largest Contentful Paint: محتوا چقدر سریع در صفحه ظاهر می شود؟
2. Cumulative Layout Shift (CLS): آیا محتوا پس از بارگذاری جابه جا می شود؟
3. Interaction to Next Paint (INP): صفحه چقدر به ورودی های کاربر پاسخگو است؟

برای هر یک از این معیارها یک آستانه حداکثر وجود دارد که نباید از آن تجاوز کرد تا سایت بتواند ارزیابی Core Web Vitals گوگل را بگذراند.

1. اضافه کردن ناوبری فوری و Speculation Rules به کروم

تعاریف و اصطلاحاتی که در این بخش با آن ها آشنا می شوید:

• ناوبری فوری: دسترسی سریع و مستقیم به اطلاعات یا بخش های خاصی از یک سیستم یا محتوا، بدون نیاز به جستجوی طولانی یا گشت وگذار زیاد.
• قوانین گمانه زنی (Speculation Rules): قوانین یا دستورالعمل هایی که در شرایط نامطمئن یا پیش بینی ناپذیر برای تصمیم گیری استفاده می شوند.

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

کروم قابلیت جدیدی به نام Speculation Rules معرفی کرده است که می تواند ناوبری فوری را انجام دهد. پس از بارگذاری صفحه اولیه یک سایت، صفحات دیگر می توانند به صورت پیش بارگذاری در پس زمینه قرار گیرند. سپس زمانی که بازدیدکننده روی لینکی کلیک می کند، صفحه ی جدید فورا ظاهر می شود.

یکی از کارهایی که می توانید برای رفع مشکلات Core Web Vitals انجام دهید اضافه کردن ویژگی Speculation Rule به سایت است. ویژگی Speculation Rules به راحتی با اضافه کردن تگ <script type="speculationrules"> به سایت قابل پیاده سازی است. با افزودن ویژگی Speculation Rules می توانید:

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

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

2. بهبود Core Web Vitals با استفاده از API جدید

اصطلاحی که در این بخش با آن آشنا خواهید شد:

• Long Animation Frames API

 INP که نشان دهنده سرعت پاسخ صفحه به کاربر است؛ به عنوان یکی از معیارهای Core Web Vitals در مارس 2024 معرفی شد. تعاملات کند معمولاً به دلیل اجرای کدهای جاوا اسکریپت در صفحه اتفاق می افتند. با این حال، شناسایی اینکه کدام تعاملات کند هستند و کدام اسکریپت ها باعث تأخیر می شوند، می تواند مشکل باشد.

برای شناسایی اسکریپت هایی که باعث کندی تعامل می شوند، گوگل Long Animation Frames API را به کروم اضافه کرده است. این API می تواند تأخیرهای رندر را به اسکریپت های خاصی که در سایت اجرا می شوند نسبت دهد. Long Animation Frames می گوید که باید چه اسکریپت هایی را اصلاح کنید تا امتیاز INP خود را بهبود بخشید.

استفاده مستقیم از این API کمی پیچیده است، اما می توانید با کمک کتابخانه web-vitals.js گوگل، رفع مشکلات Core Web Vitals را آسان تر کنید.

با استفاده از ویژگی Long Animation Frames می توانید متوجه شوید:

• کدام اسکریپت های خاص باعث کندی سایت شما می شوند
• چرا کد در حال اجرا است (برای مثال، در پاسخ به تعاملات کاربر است یا در حال اجرای یک وظیفه در پس زمینه صفحه)
• زمان پردازش چگونه صرف می شود (مثلاً در اجرای کد صرق می شود یا در به روزرسانی چیدمان صفحه)

3. معیارهای Core Web Vitals در تب جدید Performance 

اصطلاحی که در این قسمت با آن آشنا می شوید عبارتست از:

• تب جدید DevTools Performance

ابزار Chrome DevTools مدت هاست که یک ابزار عالی برای تجزیه و تحلیل عملکرد فنی سایت بوده است، اما تا پیش از این، نمای کلی دقیقی از داده های Core Web Vitals ارائه نمی کرد. با این حال، تب جدید DevTools Performance  اکنون به شما امکان شناسایی و رفع مشکلات Core Web Vitals را می دهد. به کمک این تب جدید می توانید موارد زیر را به راحتی مشاهده کنید:

• نمای کلی از Core Web Vitals در صفحه فعلی
• فهرستی از تعاملات صفحه و جابجایی های چیدمان
• داده های واقعی کاربران از گزارش تجربه کاربری کروم (CrUX)

ابزار Chrome DevTools و تب DevTools Performance هر دو داخل مرورگر کروم قرار دارند. برای دسترسی به این ابزارها، کافی است کروم را باز کنید و سپس:

1. روی صفحه وب راست کلیک کنید و گزینه “Inspect” یا “Inspect Element” را انتخاب کنید.
2. در پنجره باز شده، به تب Performance بروید.

در این بخش می توانید اطلاعات دقیق درباره عملکرد وب سایت خود را ببینید (از جمله داده های Core Web Vitals). از اطلاعات موجود در تب Performance می توانید برای شناسایی و رفع مشکلات Core Web Vitals استفاده کنید.

فهرست تعاملات کاربران به شما کمک می کند تا مشکلات امتیاز INP (که مربوط به سرعت تعاملات کاربر است) را شناسایی کنید. دیگر لازم نیست تمام جزئیات عملکرد صفحه را ثبت کنید تا سرعت یک تعامل را بررسی کنید. به کمک فهرست تعاملات می توانید به راحتی به اطلاعات لازم در خصوص سرعت تعامل کاربران دست پیدا کنید.

4. تحلیل اجزای (LCP) Largest Contentful Paint

امتیازLargest Contentful Paint (LCP) تحت تأثیر عوامل مختلفی است، مانند زمان پاسخ سرور، زمان بارگذاری تصویر یا زمان لازم برای نمایش محتوا. گوگل اخیراً مقاله ای منتشر کرده که نشان می دهد بر اساس داده های واقعی از کاربران، کدام یک از این عوامل گفته شده بیشترین تأثیر را بر LCP دارند.

گوگل متوجه شده که بارگذاری تصاویر یکی از عوامل تأثیرگذار بر امتیاز LCP است، اما تنها ۱۰٪ از ارزش کلی آن را تشکیل می دهد. این یعنی سایر عوامل مانند زمان پاسخ سرور و بارگذاری منابع دیگر، نقش بیشتری دارند. بنابراین، فقط توجه به بهینه سازی تصاویر برای پایین آمدن امتیاز LCP کافی نیست.

برای بهینه سازیLargest Contentful Paint (LCP) و بهبود سرعت بارگذاری صفحه، می توانید روی چندین عامل کلیدی تمرکز کنید:

1. بهینه سازی سرور: زمان پاسخ سرور نقش بزرگی در LCP دارد. استفاده از CDN و بهینه سازی تنظیمات سرور می تواند سرعت بارگذاری را بهبود دهد.
2. بارگذاری منابع بهینه: اطمینان حاصل کنید که تصاویر و ویدئوها بهینه شده اند (حجم کمتر و فرمت های مناسب مانند WebP) تا سریع تر بارگذاری شوند.
3. اولویت دهی به محتوای اصلی: محتوای اصلی صفحه (مثل تصاویر بزرگ یا متن های برجسته) باید سریع تر از سایر منابع بارگذاری شوند. این کار می تواند با استفاده از ویژگی های lazy loading و preload انجام شود.
4. کاهش درخواست های شبکه ای اضافی: هرچه درخواست های شبکه ای کمتری انجام شود، بارگذاری سریع تر خواهد بود.

با تمرکز روی این 4 نکته می توانید امتیاز LCP را بهبود بخشید و به رفع مشکلات Core Web Vitals کمک نمایید.

چگونگی ارزیابی Core Web Vitals

در این مقاله از آموزش سئو سایت، به برخی از ابزارهای جدید تشخیصی که می توانید برای بررسی و رفع مشکلات Core Web Vitals در سایت خود استفاده کنید اشاره شد. همچنین به بررسی تکنولوژی های جدید مرورگر کروم که به شما کمک می کنند تا سایتی سریع تر داشته باشید پرداختیم.

برای پیگیری بهینه سازی ها و نظارت بر معیارهای Core Web Vitals خود، می توانید از ابزارهای نظارت بر عملکرد سایت مانند Google PageSpeed Insights، GTmetrix و WebPageTest استفاده کنید. این ابزارها به شما کمک می کنند تا مشکلات سایت خود را شناسایی کنید. با شناسایی مشکلات سایت و مقایسه عملکرد سایتتان با رقبا،می توانید تجربه ای با بهترین کیفیت ارائه دهید.

ابزارهای نظارت به شما کمک می کنند تا روندهای بلندمدت سایت را شناسایی کنید و تغییرات اعمال شده را دوباره بررسی کنید و تأثیر مثبت آن ها را ارزیابی کنید. همچنین ابزارهای نظارت بر عملکرد سایت به شما اطمینان می دهند که به سرعت متوجه مشکلات جدیدی که ممکن است وارد سایت شما شوند، خواهید شد.

بطور کلی ابزارهای نظارت، سه نوع داده اصلی را برای کمک به درک و بهینه سازی سرعت صفحه ارائه می دهند:

• نظارت مصنوعی: بینش دقیق تری از زمان بارگذاری صفحه بدست آورید.
• نظارت بر تجربیات واقعی کاربران: تجربیات واقعی بازدیدکنندگان سایت را بررسی کنید.
• نظارت بر معیارهای CrUX: پیگیری معیارهایی که بر رتبه بندی گوگل تأثیر می گذارند.

با استفاده از ابزارهای نظارتی مانند GTmetrix و به کمک آموزش سئو می توانید عملکرد سایت خود را بهبود بخشیده و اقدامات لازم را برای ارائه بهترین تجربه به کاربران انجام دهید.