معیارهای Core Web Vitals زیر مجموعه‌ای از معیارهای Web Vitals هستند که بر تمام صفحات وب اعمال می‌شوند. این معیارها باید توسط تمامی صاحبان وب به کار گرفته شوند. هر یک از معیارهای Core Web Vitals نمایانگر وجه متمایزی از تجربه کاربری هستند و توسط ابزارهای میدانی قابل اندازه‌گیری خواهند بود. از این رو، یک تجربه‌ی واقعی از یک خروجی کاربر محور را نشان می‌دهند.
معیارهای تشکیل دهنده‌ی معیارهای Core Web Vitals با گذشت زمان تکامل می‌یابند. این معیارها عبارت هستند از:
به منظور بهبود معیارهای Core Web Vitals، باید با نحوه‌ی بهبود هر یک از این سه معیار آشنا شویم. از این رو، در ادامه نحوه‌ی بهبود هر یک از معیارهای LCP، FID و CLS را به صورت مختصر بررسی خواهیم کرد. برای انجام سئوی وبسایت می توانید از خدمات seo در منتوریکس استفاده نمایید.
بزرگترین ترسیم محتوای صفحه LCP
چگونه بزرگترین ترسیم محتوایی (LCP) را بهبود بخشیم؟
یکی از فاکتورهایی که موجب ضعیف شدن تجربه کاربری می‌شود، مدت زمانی است که طول می‌کشد تا کاربر محتوای رندر شده را بر روی صفحه نمایش مشاهده کند. اولین ترسیم محتوایی (FCP) مدت زمان لازم برای رندر محتوای DOM اولیه را اندازه‌گیری می‌کند. اما مدت زمان رندر بزرگترین ترسیم محتوایی را اندازه‌گیری نمی‌کند.
بزرگترین ترسیم محتوایی (LCP) یکی از مهم‌ترین معیارهای Core Web Vitals است و زمان رندر شدن بزرگترین ترسیم محتوایی بر روی نمایشگر را نشان می‌دهد.
هرچه زمان بیشتری طول بکشد تا مرورگر محتوا را از سرور دریافت کند، رندر بر روی نمایشگر بیشتر طول می‌کشد. زمان پاسخ سریع‌تر سرور به طور مستقیم هر معیار بارگذاری صفحه ازجمله LCP را بهبود می‌بخشد.
قبل از هر چیز دیگری، نحوه مدیریت محتوا را بهبود بخشید. از زمان رسیدن به اولین بایت (TTFB) را برای اندازه‌گیری زمان پاسخ سرور به کار گیرید. شما می‌توانید به روش‌های مختلفی TTFB و در نتیجه LCP را بهبود بخشید:
- سرور خود را بهینه‌سازی کنید
- کاربران را به یک CDN نزدیک‌تر هدایت کنید
- از Cache Assets کمک بگیرید
- یک ارتباط Third-Party ایجاد کنید
- از signed exchanges استفاده نمایید
سرور خود را بهینه کنید
به جای سرویس‌دهی فوری یک صفحه استاتیک به درخواست مرورگر، چارچوب‌های وب سمت سرور باید به صورت دینامیکی ایجاد شوند. به عبارت دیگر، چارچوب‌ها به جای ارسال یک فایل HTML کامل وقتی که درخواست مرورگر آماده است، باید از منطق برای ساخت صفحه استفاده کرد. بسیاری از چارچوب‌های وب که بر روی سرور اجرا می‌شوند، راهنمایی دارند که می‌توانید به منظور سرعت بخشیدن به این فرآیند از آن‌ها استفاده کنید.
کاربران را به یک CDN نزدیک‌تر هدایت کنید
شبکه تحویل محتوا (CDN) شبکه‌ای از سرورهای توزیع شده در مکان‌های مختلف است. استفاده از CDN را در نظر بگیرید تا اطمینان حاصل کنید که کاربران هرگز منتظر درخواست شبکه به سرورهای دور نمانند.
از Cache Assets کمک بگیرید
اگر HTML شما ثابت است و نیازی به تغییر در هر درخواست نیست، حافظه نهان می‌تواند از بازسازی غیر ضروری آن جلوگیری کند. با ذخیره‌سازی یک نسخه از HTML تولید شده بر روی دیسک، حافظه نهان سمت سرور می‌تواند TTFB را کاهش داده و استفاده از منابع را به حداقل رساند.
یک ارتباط Third-Party ایجاد کنید
درخواست‌های سرور به منشا شخص ثالث نیز می‌تواند موجب بهبود LCP شوند، خصوصا اگر برای نمایش محتوای مهم بر روی نمایشگر مورد نیاز باشند.
بیشتر بخوانید: چگونه LCP را بهینه کنیم؟
چگونه تاخیر ورودی اول (FID) را بهبود بخشیم؟
تاخیر ورودی اول (FID) یکی دیگر از معیارهای Core Web Vitals به حساب می‌آید که اولین برداشت کاربر از تعامل و پاسخگویی سایت را مد نظر دارد. این معیار زمانی که کاربر برای اولین بار با صفحه تعامل می‌کند و زمانی که مرورگر واقعا به به آن تعامل پاسخ نشان می‌دهد را اندازه‌گیری می‌کند. برخلاف دو معیار دیگر از معیارهای Core Web Vitals، این معیار میدانی است و به تعامل واقعی کاربر نیاز دارد. بنابراین، امکان شبیه‌سازی آن وجود ندارد.
تاخیر ورودی اول FID از معیارهای اصلی Core Web Vitals
یکی از اصلی‌ترین دلایل تاخیر ورودی اول (FID) نامطلوب، اجرای کدهای سنگین جاوا اسکریپت است. بهینه‌سازی چگونگی تجزیه، کامپایل و اجرای این کدها می‌تواند تاثیر بسزایی در بهبود FID داشته باشد. روش‌های متعددی برای این منظور وجود دارند که عبارت هستند از:
- تسک‌های طولانی را تفکیک کنید
- صفحه خود را برای آمادگی به تعامل بهینه‌سازی کنید
- از یک web worker استفاده کنید
- زمان اجرای جاوا اسکریپت را کاهش دهید
تسک‌های طولانی را تفکیک کنید
تفکیک و تجزیه‌ی کدهای طولانی به تسک‌های کوچک‌تر و غیر همزمان یکی از موثرترین روش‌ها برای بهبود FID است. هر قسمت از کد که main thread را برای 50 میلی ثانیه یا بیشتر مسدود می‌کند به عنوان یک تسک طولانی به حساب می‌آیند. با استفاده از روش‌هایی مانند جداسازی کدها و تفکیک تسک‌های طولانی، تاخیر ورودی اول به طرز چشمگیری بهبود می‌یابد.
صفحه خود را برای آمادگی به تعامل بهینه سازی کنید
امتیاز ضعیف FID می‌تواند دلایل مختلفی داشته باشد که از مهم‌ترین آن‌ها می‌توان به اجرای اسکریپت اول شخص، واکشی داده و اجرای اسکریپت شخص ثالث اشاره کرد. هر یک از این موارد بر جنبه‌های مختلف آمادگی به تعامل صفحه تاثیر می‌گذارند. بنابراین، می‌توان با بهینه کردن آن‌ها، FID را بهبود بخشید.
از یک web worker استفاده کنید
یکی از مهم‌ترین دلایل تاخیر ورودی، انسداد thread است. یک web worker به شما این امکان را می‌دهد تا جاوا اسکریپت را بر روی background thread اجرا کنید. همین امر می‌تواند موجب بهبود معیار تاخیر ورودی اول (FID) شود.
زمان اجرای جاوا اسکریپت را کاهش دهید
محدود کردن مقدار جاوا اسکریپت بر روی صفحه، زمان مورد نیاز مرورگر برای اجرا و پیاده‌سازی یک کد جاوا اسکریپت را کاهش می‌دهد. در چنین شرایطی، سرعت و زمان پاسخگویی مرورگر به تعامل کاربر افزایش می‌یابد. برای این منظور می‌توانید از دو روش استفاده کنید:
- جاوا اسکریپت استفاده نشده را به تعویق بیاندازید
- Polyfillهای استفاده نشده را به حداقل برسانید
با به کارگیری هر یک از موارد مذکور، اجرای کدهای سنگین جاوا اسکریپت بر روی main thread کمتر شده و همین امر موجب می‌شود تا مرورگر بتواند به تعاملات کاربر سریع‌تر پاسخ دهد. به عبارت دیگر، وقتی main thread در حال اجرای کدهای سنگین نیست، به سرعت به تعامل کاربر پاسخ می‌دهد.
بیشتر بخوانید: چگونه FID را بهینه کنیم؟
چگونه تغییر چیدمان تجمعی (CLS) را بهبود بخشیم؟
تغییر چیدمان تجمعی (CLS) یک دیگر از معیارهای Core Web Vitals است که ناپایداری محتوا را اندازه‌گیری می‌کند. برای این منظور امتیازهای تغییر در تغییرات چیدمانی که در بازه‌ی 500 میلی ثانیه از یک ورودی کاربر اتفاق نمی‌افتند را با هم جمع می‌کند.
تغییر چیدمان تجمعی 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 منتوریکس سر بزنید. همچنین شما می‌توانید برای دریافت خدمات بهبود سئو سایت مبتنی بر این معیارها و یا مشاوره دیجیتال مارکتینگ با ما در تماس باشید.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وبسایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.