چگونه Core Web Vitals را بهبود ببخشیم؟

تحریریه منتوریکس
تحریریه منتوریکس
11:02، 1400/02/29
چگونه Core Web Vitals را بهبود ببخشیم؟
1 رای    میانگین 5/5
لطفا شما هم امتیاز بدهید!

چگونه Core Web Vitals را بهبود ببخشیم؟


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

به منظور بهبود معیارهای Core Web Vitals، باید با نحوه‌ی بهبود هر یک از این سه معیار آشنا شویم. از این رو، در ادامه نحوه‌ی بهبود هر یک از معیارهای LCP، FID و CLS را به صورت مختصر بررسی خواهیم کرد.

چگونه بزرگ‌ترین ترسیم محتوایی (LCP) را بهبود بخشیم؟

بزرگترین ترسیم محتوای صفحه LCP

چگونه بزرگ‌ترین ترسیم محتوایی (LCP) را بهبود بخشیم؟

یکی از فاکتورهایی که موجب ضعیف شدن تجربه کاربری می‌شود، مدت زمانی است که طول می‌کشد تا کاربر محتوای رندر شده را بر روی صفحه نمایش مشاهده کند. اولین ترسیم محتوایی (FCP) مدت زمان لازم برای رندر محتوای DOM اولیه را اندازه‌گیری می‌کند. اما مدت زمان رندر بزرگ‌ترین ترسیم محتوایی را اندازه‌گیری نمی‌کند.
بزرگ‌ترین ترسیم محتوایی (LCP) یکی از مهم‌ترین معیارهای Core Web Vitals است و زمان رندر شدن بزرگ‌ترین ترسیم محتوایی بر روی نمایشگر را نشان می‌دهد.

هرچه زمان بیشتری طول بکشد تا مرورگر محتوا را از سرور دریافت کند، رندر بر روی نمایشگر بیشتر طول می‌کشد. زمان پاسخ سریع‌تر سرور به طور مستقیم هر معیار بارگذاری صفحه ازجمله LCP را بهبود می‌بخشد.
قبل از هر چیز دیگری، نحوه مدیریت محتوا را بهبود بخشید. از زمان رسیدن به اولین بایت (TTFB) را برای اندازه‌گیری زمان پاسخ سرور به کار گیرید. شما می‌توانید به روش‌های مختلفی TTFB و در نتیجه LCP را بهبود بخشید:

  • سرور خود را بهینه کنید
  • کاربران را به یک CDN نزدیک روت کنید
  • دارایی‌های حافظه نهان
  • صفحات HTML را ابتدا با حافظه نهان سرو کنید
  • اتصالات شخص ثالث را ابتدا ایجاد کنید

سرور خود را بهینه کنید

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

کاربران را به یک CDN نزدیک روت کنید

شبکه تحویل محتوا (CDN) شبکه‌ای از سرورهای توزیع شده در مکان‌های مختلف است. استفاده از CDN را در نظر بگیرید تا اطمینان حاصل کنید که کاربران هرگز منتظر درخواست شبکه به سرورهای دور نمانند.

دارایی‌های حافظه نهان

اگر HTML شما ثابت است و نیازی به تغییر در هر درخواست نیست، حافظه نهان می‌تواند از بازسازی غیر ضروری آن جلوگیری کند. با ذخیره‌سازی یک نسخه از HTML تولید شده بر روی دیسک، حافظه نهان سمت سرور می‌تواند TTFB را کاهش داده و استفاده از منابع را به حداقل رساند.

صفحات HTML را ابتدا با حافظه نهان سرو کنید

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

اتصالات شخص ثالث را ابتدا ایجاد کنید

درخواست‌های سرور به منشا شخص ثالث نیز می‌تواند موجب بهبود LCP شوند، خصوصا اگر برای نمایش محتوای مهم بر روی نمایشگر مورد نیاز باشند.

بیشتر بخوانید: چگونه LCP را بهینه کنیم؟

چگونه تاخیر ورودی اول (FID) را بهبود بخشیم؟

تاخیر ورودی اول (FID) یکی دیگر از معیارهای Core Web Vitals به حساب می‌آید که اولین برداشت کاربر از تعامل و پاسخگویی سایت را مد نظر دارد. این معیار زمانی که کاربر برای اولین بار با صفحه تعامل می‌کند و زمانی که مرورگر واقعا به به آن تعامل پاسخ نشان می‌دهد را اندازه‌گیری می‌کند. برخلاف دو معیار دیگر از معیارهای Core Web Vitals، این معیار میدانی است و به تعامل واقعی کاربر نیاز دارد. بنابراین، امکان شبیه‌سازی آن وجود ندارد.

چگونه تاخیر ورودی اول (FID) را بهبود بخشیم؟

تاخیر ورودی اول FID از معیارهای اصلی Core Web Vitals

یکی از اصلی‌ترین دلایل تاخیر ورودی اول (FID) نامطلوب، اجرای کدهای سنگین جاوا اسکریپت است. بهینه‌سازی چگونگی تجزیه، کامپایل و اجرای این کدها می‌تواند تاثیر بسزایی در بهبود FID داشته باشد. روش‌های متعددی برای این منظور وجود دارند که عبارت هستند از:

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

تسک‌های طولانی را تفکیک کنید

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

از یک وب کارگر استفاده کنید

یکی از مهم‌ترین دلایل تاخیر ورودی، انسداد نخ است. یک وب کارگر به شما این امکان را می‌دهد تا جاوا اسکریپت را بر روی نخ پس زمینه اجرا کنید. همین امر می‌تواند موجب بهبود معیار تاخیر ورودی اول (FID) شود.

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

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

  • جاوا اسکریپت استفاده نشده را به تعویق بیاندازید
  • Polyfillهای استفاده نشده را به حداقل برسانید

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

بیشتر بخوانید: چگونه FID را بهینه کنیم؟

چگونه تغییر چیدمان تجمعی (CLS) را بهبود بخشیم؟

تغییر چیدمان تجمعی (CLS) یک دیگر از معیارهای Core Web Vitals است که ناپایداری محتوا را اندازه‌گیری می‌کند. برای این منظور امتیازهای تغییر در تغییرات چیدمانی که در بازه‌ی 500 میلی ثانیه از یک ورودی کاربر اتفاق نمی‌افتند را با هم جمع می‌کند.

چگونه تغییر چیدمان تجمعی (CLS) را بهبود بخشیم؟

تغییر چیدمان تجمعی CLS از معیارهای اصلی Core Web Vitals

معمول‌ترین دلایل تغییر چیدمان تجمعی (CLS) عبارت هستند از:

  • تصاویر بدون بعد
  • تبلیغات، embeds و iframes (آی فریم‌ها) بدون بعد
  • محتوای پویای اضافه شده
  • فونت‌های وب که موجب FOIT/FOUT می‌شوند

در صورتی که بتوانید هر یک از دلایل بالا را تا حدودی کمرنگ کنید، تغییر چیدمان تجمعی (CLS) بهبود می‌یابد.

تصاویر بدون بعد

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

تبلیغات، embeds و iframes (آی فریم‌ها) بدون بعد

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

محتوای پویا

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

فونت‌های وب که موجب FOIT/FOUT می‌شوند

دانلود و رندر فونت‌های وب می‌تواند موجب تغییر چیدمان شده و تجربه کاربری را نامطلوب سازد. برای به حداقل رساندن این مشکل ابزارهایی وجود دارند که از مهم‌ترین آن‌ها می‌توان به font-display و Font Loading API اشاره کرد.

بیشتر بخوانید: چگونه CLS را بهینه کنیم؟

سخن پایانی

همان طور که اشاره شد، معیارهای Core Web Vitals  شامل سه معیار LCP، FID و CLS هستند. در این مطلب رویکردهایی برای بهبود هر یک از این معیارها آورده شده است که با پیروی از آن‌ها می‌توانید معیارهای Core Web Vitals را بهبود بخشید.

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

تحریریه منتوریکس
تحریریه منتوریکس

این مطالب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف