در سال‌های اخیر، تاکید گوگل بر روی بهینه‌سازی تجربه کاربری باعث شده است که صفحات سایت‌ها به طرز چشمگیری بهتر طراحی شوند. در می سال 2020، گوگل آپدیت مهمی در زمینه تجربه کاربری صفحات یا Page Experience منتشر کرد که براساس بررسی و تحقیقات انجام شده در واحد تحقیقات گوگل، مشخص شد که کاربران وب سایت‌های با تجربه کاربری بهتر را ترجیح می‌دهند. این مورد به عنوان یک سیگنال جدید در بحث رتبه بندی وب سایت‌ها مطرح شد که به همراه چند معیار دیگر همچون داشتن گواهینامه SSL، موبایل فرندلی بودن و امن بودن سایت، مجموعه‌ای را شکل دادند که با عنوان Core Web Vitals شناخته می‌شوند.

البته Page Experience یا تجربه کاری صفحات به عنوان یک الزام مطرح نمی‌شود. یعنی هیچگونه پنالتی در این مورد تعریف نشده است. اما برای گرفتن رتبه‌های بهتر در جستجوهای گوگل، باید سعی کنید تمامی فاکتورهای ممکن را رعایت کنید تا بتوانید از وب سایت رقبا پیشی بگیرید.

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

سیگنال‌های تجربه کاربری صفحات چیست؟

اگر کمی به گذشته نگاه کنید و ببینید که چطور گوگل سالهاست روی بحث تجربه کاربری تاکید می‌کند، متوجه می‌شوید که چرا این سیگنال‌های جدید اینقدر اهمیت دارند.

گوگل در سال 2014 به تمامی وب سایت‌ها توصیه کرده است که حتماً گواهینامه SSL سایت خود را فعال کنند. 3 سال بعد، شاهد بودیم که در نتایج جستجوی گوگل، به طور مشخص می‌توان دید که چه وب سایت‌هایی به صورت HTTPS فعال هستند و چه وب سایت‌هایی با HTTP، یعنی بدون SSL فعال. اینجا بود که ناگهان مارکترها به خود آمدند و متوجه شدند که 65 درصد از سایت‌ها به خاطر داشتن SSL در رتبه‌بندی‌های برتر قرار می‌گیرند.

در سال 2016، بحث بهینه‌سازی موبایل مطرح شد که اهمیت آن امروزه بیشتر از هر زمان دیگری احساس می‌شود. حالا دیگر هیچ وبمستری نمی‌تواند نسبت به نسخه موبایل و تبلت یک سایت بی توجه باشد. در کنار این موارد، گوگل با وب سایت‌هایی که حفره‌های امنیتی دارند به شدت برخورد می‌کند. علاوه بر پنالتی کردن این وب سایت‌ها، زمانی که کاربری قصد بازدید از سایتی را داشته باشد که از نظر گوگل مشکل امنیتی دارد، حتماً صفحه‌ای برای اطلاع دادن این موضوع به او نمایش داده خواهد شد.

Core Web Vitals چیست؟

در می سال 2021، مفهوم Core Web Vitals یا به صورت خلاصه CWV از سمت گوگل به عنوان یک فاکتور قابل توجه برای رنکینگ معرفی شد. مفهومی که بیش از پیش روی بحث UX یا تجربه کاربری تمرکز دارد.

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

  • Largest Contentful Paint یا LCP مدت زمانی است که طول می‌کشد تا محتوای اصلی صفحه سایت لود شود. توصیه شده که این زمان نباید بیشتر از 2.5 ثانیه شود.
  • First Input Delay یا FID به میزان تعامل اشاره دارد. یعنی مدت زمانی که طول می‌کشد تا کاربر با صفحه شما ارتباطی برقرار کند و مرورگر به او پاسخی بدهد. این زمان نباید بیشتر از 100 میلی ثانیه باشد.
  • Cumulative Layout Shift یا CLS ثبات بصری سایت را در نظر می‌گیرد و اینکه چطور لود شدن محتواهای باقی مانده، روی محتواهای موجود صفحه تاثیر می‌گذارد. برای مثال تصاویر یا تبلیغاتی که سایر محتواها را به پایین صفحه سایت هل می‌دهند یا ویجت‌هایی که از کناره‌ها لود می‌شوند و محتواهای دیگر را به طرفین می‌فرستند. اینها می‌توانند تاثیر منفی روی امتیاز CLS بگذارند.

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

تجربه کاربری از نگاه گوگل دقیقاً چیست و چرا اهمیت دارد؟

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

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

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

چگونه وب سایت خود را بر مبنای خواسته‌های گوگل آماده کنیم؟

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

کارهایی که برای بهبود LCP باید انجام شود

قابلیت بارگزاری فوری (instant loading) را با الگوی PRPL اعمال کنید

  • بخش‌های مهم سایت را از قبل اجرا کنید (Pre-render).
  • مسیر اصلی (initial rout) را در سریع ترین حالت ممکن رندر کنید.
  • المان‌های باقی مانده را از قبل کش کنید (pre-cache).
  • قابلیت Lazy Load را برای سایر مسیرها و المان‌های کمتر مهم فعال کنید.

مسیر رندر اصلی را بهینه‌سازی کنید.

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

فایل‌های CSS را بهینه‌سازی کنید.

  • کدها را تا جای ممکن کوتاه کنید.
  • از Gzip استفاده کنید.
  • CSSهای استفاده نشده را حذف کنید.

تصاویر با حجم بالا را بهینه و فشرده سازی کنید.

  • تصاویر را به اندازه ای که قرار است در نهایت دیده شوند تغییر دهید.
  • سایز تمام تصاویر را زیر 100 کیلوبایت نگه دارید.

تمام فونت‌های وب را بهینه یا حذف کنید.

سایت‌هایی که رندر سمت مشتری دارند، کدهای جاوااسکپریت را حذف کنید.

  • کدها را کوتاه کنید.
  • از gzip استفاده کنید.
  • کدهای بلااستفاده جاوااسکریپت را حذف کنید.

کارهایی که برای بهبود FID باید انجام شود

کدهای third-party را کاهش دهید

  • ویجت‌ها، بلوک‌های تبلیغاتی، پلاگین‌ها و … را چک کنید.
  • کدهایی که ارزش مشخصی به سایت شما اضافه نمی‌کنند یا اضافی هستند را حذف کنید.
  • در صورت لزوم، از تگ async یا تگ‌های اسکریپتی استفاده کنید.
  • هنگام برقراری ارتباط با یک دامنه شخص ثالت (third-party) از ویژگی rel-“preconnect” استفاده کنید.
  • برای دامنه‌های شخص ثالث کم اهمیت تر، از ویژگی rel=” dns-prefetch” استفاده کنید.

زمان اجرای کدهای جاوااسکریپت را کاهش دهید.

  • فقط کدهایی که کاربرانتان به آنها نیاز دارند را با اجرای تقسیم کد برای آنها ارسال کنید.
  • کدها را فشرده و کوتاه کنید.
  • کدهای ناخواسته را حذف کنید.
  • با ذخیره کردن کد خود بر مبنای الگوی PRPL، سفرهای شبکه را کاهش دهید. (Network trips)

رشته فعالیت‌های اصلی را به حداقل برسانید

  • کدهای جاوااسکریپت third- party را بهینه کنید.
  • کنترل کننده‌های ورودی خود را رد کنید.
  • از web worker‌ها استفاده کنید.

تعداد درخواست‌ها را پایین و حجم انتقال را کم نگه دارید.

کارهایی که برای بهبود CLS باید انجام شود

  • ویژگی سایز را برای تصاویر و ویدیوهای خود قرار دهید یا توسط CSS فضایی برای آن در نظر بگیرید.
  • هیچوقت محتوایی را بالای محتوای فعلی بارگذاری نکنید، به جز زمانی که می‌خواهید پاسخی به درخواست کاربر بدهید.
  • از انیمیشن‌های تبدیلی به جای انیمیشن‌های مشخصات که باعث می‌شوند لی آوت صفحه تغییر کنند استفاده کنید.