تیم گوگل کروم نکاتی برای بهینه سازی core web vitalsبه اشتراک می گذارد.
گوگل توصیه های جدیدی برای core web vtals به اشتراک می گذارد که برای اکثر توسعه دهندگان واقع بینانه است و برای اکثر وب سایت ها قابل اجرا.
گوگل مجموعه ای از توصیه های به روزرسانی شده را برای بهینه سازی core web vitalsبه اشتراک می گذارد تا به شما کمک کند تصمیم بگیرید در مواقع محدود چه مواردی را در اولویت قرار دهید.
کور وب وایتالز، سه معیار loading time (زمان بارگذاری)، interactivity(تعامل) و visual stability(ثبات بصری) را اندازه گیری می کند.
گوگل این معیارها را برای ارائه یک تجربه مثبت ضروری می داند و از آنها برای رتبه بندی وب سایت در نتایج جستجوی خود استفاده می کند. در طول سال ها گوگل پیشنهادات زیادی برای بهبود امتیازات core web vitals ارائه کرده است.
اگر چه هر یک از توصیه های گوگل ارزش اجرا دارد، اما این شرکت متوجه می شود که انتظار اینکه کسی همه آن ها را انجام دهد غیرواقعی است. اگر تجربه زیادی در بهینه سازی عملکرد وب سایت ندارید، تشخیص اینکه چه چیزی بیشترین تاثیر را خواهد داشت چالش برانگیز است. ممکن است ندانید با زمان محدودی که برای بهبود core web vitalsاختصاص می دهید از کجا شروع کنید. اینجاست که لیست اصلاح شده توصیه های گوگل وارد می شود. در یک پست وبلاگی، گوگل می گوید که تیم کروم یک سال تلاش کرده تا مهم ترین توصیه هایی که می تواند در مورد core web vitals ارائه کند، شناسایی کند.
این تیم فهرستی از توصیه ها را گردآوری کرده است که برای اکثر توسعه دهندگان واقع بینانه است، برای اکثر وب سایت ها قابل اجرا است و تاثیر معناداری در دنیای واقعی دارد. این چیزی است که تیم گوگل کروم توصیه می کند.
Optimizing largest contentfful paint (LCP)
مدت زمانی که طول می کشد تا محتوای اصلی یک صفحه برای کاربر قابل مشاهده باشد. گوگل بیان می کند که تنها حدود نیمی از وب سایت ها آستانه LCP توصیه شده را برآورد می کنند. این موارد بهترین توصیه های گوگل برای بهبود LCPاست.
مطمئن شوید که منبع LCP به راحتی در HTML SOURCEیافت می شود.
طبق بایگانی html almanac by http active 2022، 72 درصد از صفحات وب تلفن همراه، دارای یک تصویر به عنوان محتوای اصلی هستند. برای بهبود LCP، وب سایت ها باید از بارگیری سریع تصاویر اطمینان حاصل کنند. اگر صفحه ای منتظر باشد تا فایل های cssو جاوا اسکریپت به طور کامل دانلود، تجزیه و پردازش شوند قبل از اینکه تصویر شروع به بارگیری کند، ممکن است رسیدن به آستانه LCP غیرممکن باشد. به عنوان یک قاعده کلی، اگر عنصر LCPیک تصویر باشد، URLتصویر همیشه باید از html source قابل دسترسی باشد.
مطمئن شوید که منبع LCP اولویت بندی شده است.
علاوه بر داشتن منبع LCPدر کد HTML، گوگل توصیه می کند آن را اولویت بندی کنید. حتی اگر تصویر LCPخود را با استفاده از تگ استاندارد <img> در html source قرار داده باشید، اگر چندین تگ در بخش <head> صفحه وب شما قبل از تگ <img>وجود داشته باشد، می تواند زمان بارگذاری source imag را به تاخیر بیاندازد. بهتر است از هر اقدامی که ممکن است اولویت تصویر LCPرا کاهش دهد، مانند افزودن ویژگی loading=lazy خودداری کنید. در استفاده از ابزارهای بهینه سازی تصویر که به طور خودکار lazy-loading را روی همه تصاویر اعمال می کنند، مراقب باشید.
از CDN برای TTFB استفاده کنید.
یک مرورگر باید قبل از بارگیری هر منبع اضافی، اولین بایت از پاسخ اولیه html documentرا دریافت کند. اندازه گیری این زمان، time to first byte نامیده می شود و هر چه سریع‌تر این اتفاق بیفتد، فرآیندهای دیگر زودتر شروع می‌شوند. برای به حداقل رساندن TTFB، محتوای خود را از مکانی نزدیک به کاربران خود ارائه دهید و از utilize cachingبرای محتواهایی که به طور مکرر درخواست می شوند استفاده کنید. گوگل می‌گوید بهترین راه برای انجام هر دو کار استفاده از CDN است.
Optimizing Cumulative Layout shift (CLS)
سی ال اس، برای ارزیابی طرح بصری یک وب سایت استفاده می شود. طبق گفته گوگل، حدود 25 درصد از وب سایت‌ها استاندارد توصیه شده برای این معیار را ندارند. این موارد بهترین توصیه های گوگل برای بهبود CLSاست.
اندازه‌های واضح (Explicit size) برای محتوای روی صفحه را تنظیم کنید.
هنگامی که محتوای یک وب سایت پس از اتمام بارگذاری، موقعیت خود را تغییر می‌دهد، ممکن است تغییر چیدمان رخ دهد، برای جلوگیری از این اتفاق، ضروری است که تا آنجا که ممکن است فضا را از قبل رزرو کنید. یکی از دلایل رایج تغییر چیدمان، تصاویر بدون اندازه است که می‌توانیم با تنظیم ویژگی‌های طول و عرض برای تصاویر یا equivalent CSS propertiesاین مشکل را حل کنیم.
تصاویر تنها عاملی نیستند که می توانند باعث تغییر چیدمان در صفحات وب شوند، سایر محتواها، مانند third-party ads or embedded videos که بعدا بارگیری می شوند می توانند باعث تغییر چیدمان صفحه شوند. یکی از راه‌های رفع این مشکل استفاده از aspect-ratio property در css است؛ این ویژگی نسبتا جدید است و به توسعه دهندگان این امکان را می دهد که نسبت ابعادی را برای تصاویر و عناصر غیرتصویری تعیین کنند. ارائه این اطلاعات به مرورگر این امکان را می‌دهد که به طور خودکار ارتفاع مناسب را زمانی که عرض براساس اندازه صفحه نمایش تغییر می‌کند را محاسبه کند، مشابه آنچه برای تصاویر با ابعاد تعریف شده انجام می‌دهد.
اطمینان حاصل کنید که صفحات برای Bfcache واجد شرایط هستند.
مرورگرها از قابلیتی به نام back/forward cache یا Bfcache استفاده می کنند، که به صفحات امکان می‌دهد فورا از قبل یا بعد در تاریخچه مرورگر با استفاده از memory snapshot بارگیری شوند. این ویژگی می‌تواند با حذف تغییرات طرح‌بندی در حین بارگذاری صفحه، عملکرد را به میزان قابل توجهی بهبود بخشد. گوگل توصیه می‌کند با استفاده از chrome DevToolsبررسی کنید که آیا صفحات شما برای bfcache واجد شرایط هستند یا خیر و روی اینکه چرا وجاد شرایط نیستند کار کنید.
Avoide nimations/Transitions
یکی از دلایل رایج تغییر چیدمان، متحرک‌سازی عناصر در وب سایت است، مانند بنرهای کوکی یا سایر بنرهای اعلان که از بالا یا پایین به داخل می‌لغزند. این انیمیشن‌ها می‌توانند محتوای دیگری را از مسیر خارج کنند و بر CLS تاثیر بگذارند. حتی زمانی که این کار را انجام نمی‌دهند، متحرک‌سازی آنها همچنان می‌تواند بر CLS تاثیر بگذارد. گوگل می‌گوید هر ویژگی css که می‌تواند بر طرح‌بندی صفحه تاثیر بگذارد (متحرک کردن صفحه)، 15 درصد کمتر احتمال دارد که CLSخوب داشته باشند.
Optimizing First Input Delay (FID)
اف آی دی، معیاری است که سرعت واکنش وب سایت به تعاملات کاربر را اندازه‌گیری می‌کند. اگر چه اکثر وب سایت‌ها در این زمینه عملکرد خوبی دارند، اما گوگل اعتقاد دارد که فضایی برای بهبود وجود دارد. معیار جدید Interaction to next paint (INP)، گوگل جایگزین بالقوه برای FIDاست و توصیه‌های ارائه شده در زیر به FID و INPمرتبط هستند.
Avoid Or Break Up Long Tasks
تسک‌ها، کارهای مجزایی هستند که مرورگر انجام می‌دهد، از جمله: rendering, layout, parsing و compiling و اجرای اسکریپت‌ها. زمانی که تسک‌های طولانی، بیش از 50 میلی ثانیه طول می‌کشد، main thread را بلاک می‌کند و پاسخ سریع مرورگر به ورودی‌های کاربر را دشوار می‌کند. برای جلوگیری از این امر، تقسیم تسک‌های طولانی به کارهای کوچکتر و دادن فرصت به main thread برای پردازش کارهای مهم قابل مشاهده توسط کاربر مفید است.
Avoid Unnecessary javaScript
یک وب سایت با مقدار زیادی جاوا اسکریپت منجر به تسک هایی می شود که برای جلب توجه main threadرقابت می کنند. که می‌تواند بر پاسخگویی وب سایت تاثیر منفی بگذارد.
برای شناسایی و حذف کدهای غیرضروری از منابع وب سایت خود، می‌توانید از ابزار Chrome DEVToolsاستفاده کنید. با کاهش حجم منابع مورد نیاز در طول فرآیند بارگذاری، وب سایت زمان کمتری برای تجزیه و کامپایل کد صرف می‌کند و در نتیجه تجربه کاربری یکپارچه‌تری را به همراه خواهد داست.
Avoid Large Rendering Updates
جاوا اسکریپت تنها چیزی نیست که می‌تواند بر پاسخگویی وب سایت تاثیر بگذارد. رندرینگ می‌تواند پرهزینه باشد و توانایی وب سایت در پاسخگویی به ورودی های کاربر را مختل کند. کار بهینه سازی رندر می‌تواند پیچیده باشد و به هدف خاصی بستگی دارد. با این حال، راه‌هایی برای اطمینان از اینکه به‌روزرسانی‌های رندر قابل مدیریت هستند و به کارهای طولانی تبدیل نمی‌شوند وجود دارد. گوگل موارد زیر را توصیه می‌کند:
نتیجه‌گیری
کور وب وایتالز، یک معیار مهم برای ارائه تجربه کاربری مثبت و رتبه بندی در نتایج جستجوی گوگل است. اگرچه همه همه توصیه‌های گوگل ارزش پیاده‌سازی را دارند، این فهرست برای اکثر وب‌سایت‌ها قابل اجرا است و می‌تواند تاثیر معناداری داشته باشد.
