توصیه های گوگل کروم برای بهینه سازی Core Web Vitals

مهمترین مطالبی که در این خبر آمده است:

• هسته حیاتی گوگل (Core Web Vitals) سه معیار هستند که زمان بارگذاری یا لود صفحه، تعامل و ثبات بصری را اندازه‌گیری می‌کنند.
• تیم کروم گوگل یک سال را صرف یافتن مهم‌ترین نکاتی کرد که می‌توانست در مورد کور وب ویتال(Core Web Vitals) ارائه دهد.
• توصیه هایی که باید در صورت محدود بودن زمان اولویت بندی کنید.

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

بهینه سازی (LCP)

متریک LCP یا Largest Contentful Paint ، مدت زمانی را که طول می کشد تا محتوای اصلی یک صفحه برای کاربران قابل مشاهده باشد، اندازه گیری می کند.
گوگل می گوید که تنها حدود نیمی از وب سایت ها کمترینLCP توصیه شده را برآورده می کنند.
این ها بهترین توصیه های گوگل برای بهبود LCP هستند.

مطمئن شوید که منبع LCP به راحتی در منبع HTML یافت می شود

طبق سالنامه وب 2022 در بایگانی HTTP، حدود 72 درصد از صفحات وب تلفن همراه دارای یک تصویر به عنوان محتوای اصلی هستند. برای بهبود LCP، وب سایت ها باید از لود سریع تصاویر مطمئن شوند.
اگر صفحه ای منتظر بماند تا فایل های CSS یا جاوا اسکریپت به طور کامل دانلود، تجزیه و پردازش شوند قبل از شروع بارگیری تصویر، رسیدن به آستانه LCP گوگل غیرممکن است.
به عنوان یک قاعده کلی، اگر عنصر LCP یک تصویر باشد، باید URL تصویر در منبع HTML وجود داشته باشد.

مطمئن شوید که منبع LCP اولویت بندی شده است

علاوه بر داشتن منبع LCP در کد HTML، گوگل توصیه می‌کند که آن را اولویت‌بندی کنید و منابع کم اهمیت تر دیگر را عقب نمانید.
حتی اگر تصویر LCP خود را با استفاده از تگ استاندارد (img) در منبع HTML گذاشته باشید، و چندین تگ (script) در بخش (head) صفحه وب قبل از تگ (img) وجود داشته باشد، می تواند زمان بارگذاری را از منبع تصویر به تاخیر بیاندازد.
بهتر است از هرگونه اقدامی که ممکن است اولویت تصویر LCP را کاهش دهد، مانند افزودن ویژگی loading=lazy اجتناب کنید.
مراقب استفاده از ابزارهای بهینه سازی تصویر که به طور خودکار بارگذاری کُند را برای همه تصاویر اعمال می کند، باشید.

استفاده از (CDN) برای کاهش (TTFB)

یک مرورگر باید قبل از لود هر منبع اضافی، اولین بایت از پاسخ اولیه HTML را دریافت کند.
اندازه گیری این زمان، TTFB یا Time to First Byte نامیده می شود که هر چه سریعتر اتفاق بیفتد، فرآیندهای بعدی زودتر شروع می شوند.
برای به حداقل رساندن TTFB، محتوای خود را از مکانی (سروری) نزدیک به کاربران خود ارائه دهید و از حافظه پنهان یا کش (caching) برای محتوای درخواستی مکرر استفاده کنید.

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

بهینه سازی (CLS)

CLS یا Cumulative Layout Shift معیاری است که برای ارزیابی پایداری بصری یک وب سایت استفاده می شود. طبق گفته گوگل، حدود 25 درصد از وب سایت ها استانداردهای توصیه شده برای این معیار را ندارند.

توصیه های گوگل درباره CLS

اندازه های واضح ، برای محتوای روی صفحه تنظیم کنید

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

مطمئن شوید که صفحات شرایط Bfcache را دارد

مرورگرها از قابلیتی به نام حافظه کش (back/forward cache) یا به اختصار bfcache استفاده می کنند که به صفحات امکان می دهد، فوراً از تاریخچه مرورگر استفاده کنند و لود شوند.
این ویژگی می تواند با حذف تغییرات طرح در حین بارگذاری صفحه، عملکرد را به میزان قابل توجهی بهبود بخشد.
گوگل توصیه می‌کند بررسی کنید که آیا صفحات شما برای bfcache با استفاده از Chrome DevTools واجد شرایط هستند یا خیر و روی دلایلی که چرا این شرایط را ندارند کار کنید.

اجتناب از انیمیشن ها یا انتقال

یکی از دلایل رایج تغییر چیدمان، متحرک سازی عناصر در وب سایت است، مانند بنرهای کوکی یا سایر بنرهای اعلان که از بالا یا پایین به داخل می لغزند.
این انیمیشن‌ها می‌توانند محتوای دیگر را از مسیر خارج کنند و بر CLS تأثیر بگذارند. حتی زمانی که این کار را نمی کنند، متحرک سازی آنها همچنان می تواند بر CLS تأثیر بگذارد.
گوگل می‌گوید: صفحاتی که از CSS های متحرک استفاده می‌کنند، عموما طرح صفحه آنها (layout) تحت تاثیر قرار میگیرد و 15 درصد کمتر احتمال دارد که CLS «خوب» داشته باشند.
برای کاهش این موضوع، بهتر است از متحرک سازی یا انتقال هر ویژگی CSS که مرورگر نیاز دارد طرح آن را به روز کند، خودداری کنید، مگر اینکه در پاسخ به ورودی کاربر، مانند ضربه زدن یا کلیک دکمه باشد.
استفاده از ویژگی CSS transform برای انیمیشن ها در صورت امکان توصیه می شود.

بهینه سازی (FID)

FID معیاری است که سرعت واکنش وب سایت به تعاملات کاربر را اندازه گیری می کند.
اگرچه اکثر وب سایت ها در این زمینه عملکرد خوبی دارند، اما گوگل معتقد است که فضایی برای بهبود وجود دارد.
معیار جدید گوگل، Interaction to Next Paint یا INP، جایگزینی بالقوه برای FID است، و توصیه‌های ارائه‌شده در زیر به FID و INP مرتبط هستند.

از کارهای طولانی اجتناب کنید

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

از جاوا اسکریپت غیر ضروری خودداری کنید

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

از رندرهای بزرگ خودداری کنید

جاوا اسکریپت تنها چیزی نیست که می تواند بر پاسخ گویی وب سایت تأثیر بگذارد. رندرینگ می‌تواند پرهزینه باشد و توانایی وب‌سایت در پاسخگویی به ورودی‌های کاربر را مختل کند.
بهینه سازی کار رندر می تواند پیچیده باشد که به هدف خاصی بستگی دارد. با این حال، راه‌هایی برای اطمینان از اینکه به‌روزرسانی‌های رندر قابل مدیریت هستند و به کارهای طولانی تبدیل نمی‌شوند، وجود دارد.
گوگل موارد زیر را توصیه می کند:
• از استفاده از (requestAnimationFrame) برای انجام هر کار غیر تصویری خودداری کنید.
• اندازه DOM خود را کوچک نگه دارید.
• از محتویات CSS استفاده کنید.

نتیجه

Core Web Vitals یک معیار مهم برای ارائه تجربه کاربری مثبت و رتبه بندی در نتایج جستجوی گوگل است.
اگرچه همه توصیه‌های گوگل ارزش پیاده‌سازی را دارند، این فهرست قابل درک و برای اکثر وب‌سایت‌ها قابل اجرا است و می‌تواند تأثیر معناداری داشته باشد.
این شامل استفاده از CDN برای کاهش TTFB، تنظیم اندازه‌های صریح برای محتوای درون صفحه برای بهبود CLS، واجد شرایط ساختن صفحات برای bfcache، و اجتناب از جاوا اسکریپت و انیمیشن‌ها/انتقال‌های غیرضروری برای FID است.
با رعایت این توصیه ها می توانید از زمان خود استفاده بهتری کرده و بیشترین بهره را از وب سایت خود ببرید.

منبع :

 web.dev

searchenginejournal

فرارنک

تیم فنی و آموزشی هی سئو با بیش از ۱۲ سال تجربه تمام دانش خود را به صورت صادقانه با شما عزیزان به اشتراک می گذارد.