مطالب و مقالات

 Core Web Vitals مجموعه‌ای از عوامل خاص هستند که گوگل آن‌ها را در تجربه کاربری کلی صفحه وب مهم می‌داند. Core Web Vitals از سه اندازه‌گیری سرعت صفحه و تعامل کاربر تشکیل‌شده است: بزرگ‌ترین رنگ محتوایی، اولین تأخیر ورودی، و تغییر تجمعی طرح. به‌طور خلاصه، Core Web Vitals زیرمجموعه‌ای از عواملی هستند که بخشی از امتیاز «تجربه صفحه» گوگل خواهند بود (در اصل، روش Google برای اندازه‌گیری UX کلی صفحه شما).

 Core Web Vitals بخشی از ارزیابی کلی Google از "تجربه صفحه" است. می‌توانید داده‌های Core Web Vitals سایت خود را در بخش «بهبودها» حساب Google Search Console خود بیابید. چرا Core Web Vitals مهم هستند؟

گوگل قصد دارد تجربه صفحه را به یک فاکتور رسمی رتبه‌بندی گوگل تبدیل کند. گوگل در بخش حیاتی وب به‌عنوان یک سیگنال جدید تجربه از Core Web Vitals استفاده می کند. صفحه ترکیبی از عواملی است که گوگل برای تجربه کاربر مهم می‌داند، ازجمله استفاده از HTTPS، سازگاری با موبایل، عدم وجود پاپ آپ بینابینی "مرور ایمن و نداشتن بدافزار در صفحه.  Core Web Vitals بخش بسیار مهمی از این امتیاز خواهد بود. درواقع، بر اساس اعلامیه و خود نام، منصفانه است که بگوییم موارد حیاتی وب بزرگ‌ترین بخش از امتیاز تجربه صفحه شمارا تشکیل می‌دهند. مهم است که به این نکته اشاره‌ کنیم که یک امتیاز تجربه صفحه عالی به‌طور جادویی شمارا به جایگاه شماره 1 در گوگل سوق نمی‌دهد. درواقع، گوگل به‌سرعت اشاره کرد که تجربه صفحه یکی از چندین عامل (تقریباً 200) است که آن‌ها برای رتبه‌بندی سایت‌ها در جستجو استفاده می‌کنند. تجربه گوگل در صفحه به‌عنوان یک عامل رتبه‌بندی گفته می‌شود، نیازی به عصبانیت نیست. گوگل گفته است که تا سال آینده فرصت دارید تا نمرات Core Web Vital سایت خود را بهبود ببخشید.  اما اگر می‌خواهید قبل از آن امتیاز Core Web Vitals خود را بهبود ببخشید، عالی است. زیرا در این راهنما قصد دارم هر سه Core Web Vital را تجزیه کنم. این به شما نشان می‌دهد که چگونه هر یک از آن‌ها را بهبود بخشید. بزرگ‌ترین رنگ محتوایی (LCP) LCP مدت‌زمانی است که طول می‌کشد تا یک صفحه از دیدگاه یک کاربر واقعی بارگذاری شود. به‌عبارت‌دیگر: زمان از کلیک بر روی یک پیوند تا مشاهده اکثریت محتوا بر روی صفحه است .LCP  با سایر اندازه‌گیری‌های سرعت صفحه متفاوت است. بسیاری دیگر از معیارهای سرعت صفحه مانند TTFB و First Contextual Paint لزوماً باز کردن یک صفحه وب را برای کاربر نشان نمی‌دهند. از سوی دیگر، LCP روی آنچه واقعاً در مورد سرعت صفحه اهمیت دارد تمرکز می‌کند: توانایی دیدن و تعامل با صفحه شما. می‌توانید امتیاز LCP خود را با استفاده از Google PageSpeed ​​Insights بررسی کنید. موضوعات انفجاری - امتیاز LCP که کمک‌کننده است. به‌خصوص زمانی که نواحی برای بهبود یافتن به میان می‌آیند. آنچه در مورداستفاده از Google Pagespeed Insights روی ابزاری مانند webpagetest.org نیز خوب است این است که می‌توانید عملکرد صفحه خود را در دنیای واقعی (بر اساس داده‌های مرورگر کروم) ببینید بااین‌حال، توصیه می‌کنم به داده‌های LCP خود در GSC خود نگاه کنید. مانند Google PageSpeed ​​Insights، داده‌ها در کنسول جستجو از گزارش تجربه کاربر Chrome می‌آیند. اما برخلاف PageSpeed ​​Insights، شما می‌توانید داده‌های LCP را در کل سایت خود مشاهده کنید. بنابراین به‌جای اینکه صفحات تصادفی را یک‌به‌یک تجزیه‌وتحلیل کنید، فهرستی از URL های خوب، بد… یا جایی دراین‌بین دریافت می‌کنید.

 گوگل دستورالعمل‌های LCP خاصی دارد. آن‌ها سرعت LCP را به سه سطل تقسیم می‌کنند: خوب، نیاز به بهبود، و ضعیف. شما می‌خواهید هر صفحه در سایت شما در عرض 2.5 ثانیه به LCP برسد. این می‌تواند یک چالش واقعی برای صفحات وب بزرگ باشد. یا صفحاتی با امکانات زیاد. به‌عنوان‌مثال، صفحه‌ای را در نظر بگیرید که دارای ده‌ها تصویر با وضوح‌بالاست؛ این صفحه، صفحه با LCP ضعیف خواهید بود و ممکن است LCP مثلاً در حدود 6 بگیرد. (که "ضعیف" در نظر گرفته می‌شود). این بهانه نیست اما نشان می‌دهد که بهبود LCP به‌سادگی نصب CDN نیست. در این صورت ممکن است مجبور شویم برخی از تصاویر را از صفحه حذف کنیم. و کد صفحه را پاک‌کنید. کار سخت؟ مطمئناً. ارزشش را دارد؟ قطعاً.

در اینجا مواردی وجود دارد که می‌توانید برای بهبود LCP سایت خود انجام دهید:

 اسکریپت‌های غیرضروری شخص ثالث را حذف کنید: مطالعه اخیر سرعت صفحه ما نشان داد که هر اسکریپت شخص ثالث یک صفحه را 34 میلی‌ثانیه کاهش می‌دهد.

میزبان وب خود را ارتقا دهید: میزبانی بهتر = زمان بارگذاری سریع‌تر ازجمله LCP.

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

 حذف عناصر صفحه بزرگ: Google PageSpeed ​​Insights به شما می‌گوید که آیا صفحه شما عنصری دارد که LCP صفحه شمارا کند می‌کند. بزرگ‌ترین عنصر رنگ محتوا CSS خود را کوچک کنید. CSS حجیم می‌تواند زمان LCP را به‌طور قابل‌توجهی به تأخیر بیندازد. تأخیر ورودی اول (FID) در مرحله بعد، بیایید نگاهی به دومین Core Web Vital Google: First Input Delay بیندازیم. بنابراین در این مرحله، صفحه شما به FCP رسیده است. اما سؤال اینجاست: آیا کاربران می‌توانند با صفحه شما تعامل داشته باشند؟ خوب، این دقیقاً همان چیزی است که FID اندازه‌گیری می‌کند: مدت‌زمانی که کاربر برای تعامل واقعی با صفحه شما نیاز دارد.

. اولین دستورالعمل تأخیر ورودی Google، FID ازنظر فنی مدت‌زمانی که طول می‌کشد تا اتفاقی در یک صفحه بیفتد را اندازه‌گیری می‌کند. بنابراین از این نظر امتیاز سرعت صفحه است. اما یک‌قدم فراتر از آن است و مدت‌زمانی را که کاربران برای انجام کاری در صفحه شما نیاز دارند اندازه‌گیری می‌کند. برای صفحه‌ای که 100% محتوا دارد (مانند یک پست وبلاگ یا مقالات خبر)FID احتمالاً چیز مهمی نیست. تنها "تعامل" واقعی پایین کشیدن صفحه است.

به‌عنوان‌مثال، به تجربه بارگذاری صفحه‌ای مانند این فکر کنید: صفحه ورود به سیستم Reddit با چنین صفحه ورود به سیستم، زمان بارگذاری محتوا چندان مهم نیست. آنچه مهم است این است که با چه سرعتی می‌توانید جزئیات ورود خود را تایپ کنید. با این کار، در اینجا مواردی وجود دارد که می‌توانید برای بهبود امتیازات FID سایت خود انجام دهید. به حداقل رساندن (یا به تعویق انداختن) جاوا اسکریپت: تعامل کاربران با یک صفحه درحالی‌که مرورگر در حال بارگیری JS است تقریباً غیرممکن است. بنابراین به حداقل رساندن یا به تعویق انداختن JS در صفحه شما کلید FID است. اسکریپت‌های شخص ثالث غیر مهم را حذف کنید: درست مانند FCP، اسکریپت‌های شخص ثالث (مانند Google Analytics، Heatmaps و غیره) می‌توانند بر FID تأثیر منفی بگذارند. از کش مرورگر استفاده کنید: این به بارگذاری سریع‌تر محتوا در صفحه شما کمک می‌کند. که به مرورگر کاربر شما کمک می‌کند تا کارهای بارگیری JS را سریع‌تر انجام دهد.

 تغییر چیدمان تجمعی (CLS) تغییر چیدمان تجمعی (CLS) نشان‌دهنده پایداری یک صفحه در هنگام بارگذاری است ). بانام مستعار "پایداری بصری(به‌عبارت‌دیگر: اگر عناصر در صفحه شما با بارگیری صفحه حرکت کنند، CLS بالایی دارید. که بد است. مثال تغییر چیدمان تجمعی در عوض، می‌خواهید عناصر صفحه‌تان در هنگام بارگذاری نسبتاً پایدار باشند. به‌این‌ترتیب، وقتی صفحه به‌طور کامل بارگذاری می‌شود، کاربران مجبور نیستند دوباره یاد بگیرند که لینک‌ها، تصاویر و فیلدها در کجا قرار دارند. یا به‌اشتباه روی چیزی کلیک کنید. در اینجا معیارهای خاصی وجود دارد که Google برای CLS در نظر گرفته است: دستورالعمل‌های تغییر چیدمان تجمعی Google همان‌طور که می‌بینید، این چیزی است که من باید روی آن کارکنم. مخصوصاً روی موبایل.

اینجا چند کار ساده وجود دارد که می‌توانید برای به حداقل رساندن CLS انجام دهید. از ابعاد مشخصه اندازه تنظیم برای هر رسانه (ویدئو، تصاویر، GIF، اینفوگرافیک و غیره) استفاده کنید: به‌این‌ترتیب، مرورگر کاربر دقیقاً می‌داند که آن عنصر چقدر فضای آن صفحه را اشغال می‌کند. و در همان لحظه آن را تغییر نمی‌دهد زیرا صفحه به‌طور کامل بارگیری می‌شود. همچنین اطمینان حاصل کنید که عناصر تبلیغاتی دارای یک فضای رزرو شده هستند: در غیر این صورت ممکن است به‌طور ناگهانی در صفحه ظاهر شوند و محتوا را به پایین، بالا یا به طرفین فشار دهند.

 آن‌ها سرعت LCP را به سه سطل تقسیم می‌کنند: خوب، نیاز به بهبود، و ضعیف.

گردآوری و ترجمه: مهندس مرتضی خیری