Google مجموعه ای به روز از توصیه ها را برای بهینه سازی Core Web Vitals برای کمک به تصمیم گیری در مورد اولویت بندی زمانی که زمان محدود است.
Core Web Vitals سه معیار هستند که زمان بارگذاری، تعامل و ثبات بصری را اندازه‌گیری می‌کنند.
Google این معیارها را برای ارائه یک تجربه مثبت ضروری می داند و از آنها برای رتبه بندی وب سایت ها در نتایج جستجوی خود استفاده می کند.
در طول سال‌ها، Google پیشنهادهای متعددی برای بهبود امتیازات Core Web Vitals ارائه کرده است.
اگرچه هر یک از توصیه‌های Google ارزش پیاده‌سازی را دارد، اما این شرکت می‌داند که انتظار اینکه کسی همه آن را انجام دهد غیرواقعی است.
اگر تجربه زیادی در بهینه‌سازی عملکرد وب‌سایت ندارید، تشخیص اینکه چه چیزی بیشترین تأثیر را دارد می‌تواند چالش برانگیز باشد.
شاید ندانید با زمان محدودی که برای بهبود Core Web Vitals اختصاص دهید، از کجا شروع کنید. اینجاست که فهرست اصلاح‌شده توصیه‌های Google وارد می‌شود.
در یک پست وبلاگ، Google می‌گوید تیم Chrome یک سال تلاش کرده است تا مهم‌ترین توصیه‌هایی را که می‌تواند در مورد Core Web Vitals ارائه دهد، شناسایی کند.
تیم فهرستی از توصیه‌ها را گردآوری کرده است که برای اکثر توسعه‌دهندگان واقع‌بینانه است، برای اکثر وب‌سایت‌ها قابل اجرا است و تأثیر معناداری در دنیای واقعی دارد.
این چیزی است که تیم Google Chrome توصیه می کند.
بهینه سازی بزرگترین رنگ محتوایی (LCP)
متریک بزرگترین رنگ محتوایی (LCP) مدت زمانی را که طول می کشد تا محتوای اصلی یک صفحه برای کاربران قابل مشاهده شود، اندازه گیری می کند.
Google بیان می‌کند که فقط نیمی از وب‌سایت‌ها آستانه LCP توصیه‌شده را دارند.
اینها بهترین توصیه‌های Google برای بهبود LCP هستند.
مطمئن شوید که منبع LCP به راحتی در منبع HTML یافت می شود
طبق سالنامه وب ۲۰۲۲ توسط بایگانی HTTP، ۷۲٪ از صفحات وب تلفن همراه دارای یک تصویر به عنوان محتوای اصلی هستند. برای بهبود LCP، وب‌سایت‌ها باید از بارگیری سریع تصاویر اطمینان حاصل کنند.
اگر صفحه ای منتظر باشد تا فایل های CSS یا جاوا اسکریپت به طور کامل دانلود، تجزیه و پردازش شوند قبل از بارگیری تصویر، ممکن است رسیدن به آستانه LCP Google غیرممکن باشد.
به عنوان یک قاعده کلی، اگر عنصر LCP یک تصویر است، URL تصویر همیشه باید از منبع HTML قابل کشف باشد.
مطمئن شوید که منبع LCP اولویت بندی شده است
علاوه بر داشتن منبع LCP در کد HTML، Google توصیه می‌کند آن را اولویت‌بندی کنید و از منابع کمتر مهم دیگر عقب نمانید.
حتی اگر تصویر LCP خود را با استفاده از یک تگ استاندارد در منبع HTML گنجانده باشید، اگر چندین تگ
بهتر است از هرگونه اقدامی که ممکن است اولویت تصویر LCP را کاهش دهد، مانند افزودن ویژگی loading=”lazy” اجتناب کنید.
در استفاده از ابزارهای بهینه‌سازی تصویر که به‌طور خودکار بارگذاری تنبل را روی همه تصاویر اعمال می‌کند، مراقب باشید.
از یک شبکه تحویل محتوا (CDN) برای کاهش زمان تا اولین لقمه (TTFB) استفاده کنید
یک مرورگر باید اولین بایت از پاسخ اولیه سند HTML را قبل از بارگیری منابع اضافی دریافت کند.
معیار این زمان زمان تا اولین بایت (TTFB) نامیده می‌شود، و هرچه سریع‌تر این اتفاق بیفتد، فرآیندهای دیگر زودتر شروع می‌شوند.
برای به حداقل رساندن TTFB، محتوای خود را از مکانی نزدیک به کاربران خود ارائه دهید و از حافظه پنهان برای محتوای درخواستی مکرر استفاده کنید.
به‌گفته Google، بهترین راه برای انجام هر دو کار، استفاده از شبکه تحویل محتوا (CDN) است.
بهینه سازی تغییر چیدمان تجمعی (CLS)
تغییر چیدمان تجمعی (CLS) معیاری است که برای ارزیابی پایداری طرح‌بندی بصری یک وب‌سایت استفاده می‌شود. طبق گفته گوگل، حدود ۲۵ درصد از وب سایت ها استاندارد توصیه شده برای این معیار را ندارند.
اینها بهترین توصیه‌های Google برای بهبود CLS هستند.
اندازه های واضح را برای محتوای روی صفحه تنظیم کنید
زمانی که محتوای یک وب‌سایت پس از اتمام بارگیری، موقعیت خود را تغییر می‌دهد، تغییرات طرح‌بندی ممکن است رخ دهد. مهم است که تا آنجا که ممکن است فضا را از قبل رزرو کنید تا از این اتفاق جلوگیری شود.
یکی از دلایل رایج تغییر طرح‌بندی، تصاویر بدون اندازه است که می‌توان با تنظیم صریح ویژگی‌های عرض و ارتفاع یا ویژگی‌های CSS معادل آن را برطرف کرد.
تصاویر تنها عاملی نیستند که می‌توانند باعث تغییر چیدمان در صفحات وب شوند. محتوای دیگر، مانند تبلیغات شخص ثالث یا ویدیوهای جاسازی شده که بعداً بارگیری می‌شوند، می‌توانند به CLS کمک کنند.
یک راه برای رفع این مشکل استفاده از ویژگی نسبت ابعاد در CSS است. این ویژگی نسبتاً جدید است و به توسعه دهندگان این امکان را می دهد که نسبت ابعادی را برای تصاویر و عناصر غیر تصویری تنظیم کنند.
ارائه این اطلاعات به مرورگر این امکان را می دهد که به طور خودکار ارتفاع مناسب را زمانی که عرض بر اساس اندازه صفحه نمایش است محاسبه کند، مشابه آنچه برای تصاویر با ابعاد تعریف شده انجام می دهد.
اطمینان حاصل کنید که صفحات برای Bfcache واجد شرایط هستند
مرورگرها از قابلیتی به نام حافظه پنهان عقب/ جلو یا به اختصار bfcache استفاده می‌کنند که به صفحات اجازه می‌دهد فوراً از قبل یا بعد در تاریخچه مرورگر با استفاده از یک عکس فوری حافظه بارگیری شوند.
این ویژگی می‌تواند با حذف تغییرات طرح‌بندی در حین بارگذاری صفحه، عملکرد را به میزان قابل توجهی بهبود بخشد.
Google توصیه می‌کند بررسی کنید که آیا صفحات شما برای bfcache با استفاده از Chrome DevTools واجد شرایط هستند یا خیر و روی هر دلیلی که چرا این کار را نمی‌کنند کار کنید.
از انیمیشن ها/انتقال ها اجتناب کنید
یکی از دلایل رایج تغییر چیدمان، متحرک سازی عناصر در وب سایت است، مانند بنرهای کوکی یا سایر بنرهای اعلان که از بالا یا پایین به داخل می لغزند.
این انیمیشن‌ها می‌توانند محتوای دیگر را از مسیر خارج کنند و بر CLS تأثیر بگذارند. حتی وقتی این کار را نمی‌کنند، متحرک کردن آنها همچنان می‌تواند بر CLS تأثیر بگذارد.
Google می‌گوید صفحاتی که هر ویژگی CSS را متحرک می‌کنند که می‌تواند بر طرح‌بندی تأثیر بگذارد، ۱۵ درصد کمتر احتمال دارد که CLS «خوب» داشته باشند.
برای کاهش این موضوع، بهتر است از متحرک سازی یا انتقال هر ویژگی CSS که به مرورگر نیاز دارد طرح بندی را به روز کند، خودداری کنید، مگر اینکه در پاسخ به ورودی کاربر باشد، مانند ضربه زدن یا فشار دادن کلید.
استفاده از ویژگی تبدیل CSS در صورت امکان برای انتقال ها و انیمیشن ها توصیه می شود.
بهینه سازی تاخیر ورودی اول (FID)
تأخیر ورودی اول (FID) معیاری است که سرعت واکنش یک وب سایت به تعاملات کاربر را اندازه گیری می کند.
اگرچه اکثر وب‌سایت‌ها در این زمینه عملکرد خوبی دارند، Google معتقد است که فضایی برای بهبود وجود دارد.
متریک جدید Google، Interaction to Next Paint (INP)، جایگزینی بالقوه برای FID است، و توصیه‌های ارائه‌شده در زیر به FID و INP مرتبط هستند.
اجتناب یا شکستن وظایف طولانی
کارها هر کار مجزایی است که مرورگر انجام می‌دهد، از جمله رندر، طرح‌بندی، تجزیه، و کامپایل و اجرای اسکریپت‌ها.
زمانی که کارها زمان زیادی، بیش از ۵۰ میلی ثانیه طول می کشد، رشته اصلی را مسدود می کند و پاسخ سریع مرورگر به ورودی های کاربر را دشوار می کند.
برای جلوگیری از این امر، تقسیم وظایف طولانی به کارهای کوچکتر با دادن فرصت های بیشتر به رشته اصلی برای پردازش کارهای مهم قابل مشاهده توسط کاربر مفید است.
این را می‌توان با تسلیم شدن به رشته اصلی اغلب به دست آورد تا به‌روزرسانی‌ها و سایر تعاملات کاربر با سرعت بیشتری انجام شوند.
از جاوا اسکریپت غیر ضروری اجتناب کنید
یک وب‌سایت با مقدار زیادی جاوا اسکریپت می‌تواند منجر به انجام وظایفی شود که برای جلب توجه موضوع اصلی رقابت می‌کنند، که می‌تواند بر پاسخگویی وب‌سایت تأثیر منفی بگذارد.
برای شناسایی و حذف کدهای غیرضروری از منابع وب‌سایت خود، می‌توانید از ابزار پوشش در Chrome DevTools استفاده کنید.
با کاهش حجم منابع مورد نیاز در طول فرآیند بارگیری، وب سایت زمان کمتری را برای تجزیه و کامپایل کد صرف می کند و در نتیجه تجربه کاربری یکپارچه تری ایجاد می کند.
از به‌روزرسانی‌های رندر بزرگ اجتناب کنید
جاوا اسکریپت تنها چیزی نیست که می تواند بر پاسخگویی وب سایت تأثیر بگذارد. رندرینگ می‌تواند پرهزینه باشد و در توانایی وب‌سایت برای پاسخ دادن به ورودی‌های کاربر اختلال ایجاد کند.
بهینه سازی کار رندر می تواند پیچیده باشد و به هدف خاصی بستگی دارد. با این حال، راه‌هایی برای اطمینان از اینکه به‌روزرسانی‌های رندر قابل مدیریت هستند و به کارهای طولانی تبدیل نمی‌شوند، وجود دارد.
Google موارد زیر را توصیه می‌کند:
- از استفاده از requestAnimationFrame() برای انجام کارهای غیر تصویری خودداری کنید.
- اندازه DOM خود را کوچک نگه دارید.
- از محتوای CSS استفاده کنید.
نتیجه گیری
Core Web Vital معیار مهمی برای ارائه تجربه کاربری مثبت و رتبه‌بندی در نتایج جستجوی Google است.
اگرچه همه توصیه‌های Google ارزش پیاده‌سازی را دارند، این فهرست فشرده واقعی است، برای اکثر وب‌سایت‌ها قابل اجرا است و می‌تواند تأثیر معناداری داشته باشد.
این شامل استفاده از CDN برای کاهش TTFB، تنظیم اندازه‌های صریح برای محتوای درون صفحه برای بهبود CLS، واجد شرایط ساختن صفحات برای bfcache، و اجتناب از جاوا اسکریپت و انیمیشن‌ها/انتقال‌های غیرضروری برای FID است.
با پیروی از این توصیه‌ها، می‌توانید از زمان خود استفاده بهتری کرده و بیشترین بهره را از وب‌سایت خود ببرید.
منبع: Web.dev
تصویر ویژه: salarko/Shutterstock
