بهینه سازی Web Vitals با استفاده از Lighthouse

یافتن فرصت‌هایی برای بهبود تجربه کاربر با ابزار وب Chrome.

Addy Osmani

تاریخ انتشار: 11 می 2021

امروز، ویژگی‌های ابزار جدید در Lighthouse، PageSpeed ​​و DevTools را پوشش خواهیم داد تا به شناسایی نحوه بهبود سایت شما در Web Vitals کمک کنیم.

به عنوان یک تجدید کننده در ابزارها، Lighthouse یک ابزار متن باز و خودکار برای بهبود کیفیت صفحات وب است. می‌توانید آن را در مجموعه ابزارهای اشکال‌زدایی Chrome DevTools پیدا کنید و آن را در برابر هر صفحه وب، عمومی یا نیاز به احراز هویت، اجرا کنید. همچنین می‌توانید Lighthouse را در PageSpeed ​​Insights ، CI و WebPageTest بیابید.

Lighthouse 7.x شامل ویژگی‌های جدیدی مانند اسکرین‌شات‌های عناصر، برای بازرسی بصری آسان‌تر بخش‌هایی از رابط کاربری شما است که بر معیارهای تجربه کاربر تأثیر می‌گذارد (مثلاً چه گره‌هایی در تغییر طرح‌بندی نقش دارند).

ما همچنین پشتیبانی از اسکرین‌شات‌های عناصر را در PageSpeed ​​Insights ارسال کرده‌ایم، که راهی را برای شناسایی آسان‌تر مشکلات برای اجرای یکبار عملکرد صفحات امکان‌پذیر می‌سازد.

اندازه گیری حیاتی وب اصلی

Lighthouse می‌تواند به‌طور مصنوعی معیارهای Core Web Vitals از جمله بزرگترین رنگ محتوا ، تغییر چیدمان تجمعی و زمان مسدود کردن کل (پراکسی آزمایشگاهی برای اولین تاخیر ورودی ) را اندازه‌گیری کند. این معیارها منعکس کننده بارگذاری، ثبات چیدمان و آمادگی تعامل هستند. معیارهای دیگری مانند First Contentful Paint که در آینده Core Web Vitals برجسته شده است نیز وجود دارد.

بخش «متریک» گزارش فانوس دریایی شامل نسخه‌های آزمایشگاهی این معیارها است. می توانید از این به عنوان یک نمای خلاصه از جنبه هایی از تجربه کاربر که به توجه شما نیاز دارد استفاده کنید.

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

مکان هایی را که می توانید در Web Vitals بهبود ببخشید، شناسایی کنید

بزرگترین عنصر رنگ محتوایی را شناسایی کنید

LCP اندازه گیری تجربه بارگذاری درک شده است. زمانی که محتوای اصلی یا "بزرگترین" بارگیری شده و برای کاربر قابل مشاهده است، نقطه را در حین بارگذاری صفحه مشخص می کند.

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

اگر این عنصر یک تصویر است، این اطلاعات راهنمایی مفیدی است که ممکن است بخواهید بارگذاری این تصویر را بهینه کنید. Lighthouse شامل تعدادی ممیزی بهینه سازی تصویر است تا به شما کمک کند بفهمید که آیا تصاویر شما می توانند فشرده تر، تغییر اندازه یا در قالب تصویر مدرن بهینه تر ارائه شوند یا خیر.

همچنین ممکن است LCP Bookmarklet اثر Annie Sullivan برای شناسایی سریع عنصر LCP با یک مستطیل قرمز تنها با یک کلیک مفید باشد.

برای بهبود LCP، تصاویری را که دیر کشف شده‌اند، از قبل بارگیری کنید

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

چند سؤال متداول در مورد بارگذاری اولیه تصاویر LCP از ما پرسیده می شود که ممکن است ارزش آن را داشته باشد که مختصراً به آنها پرداخته شود.

آیا می توانید تصاویر واکنشگرا را از قبل بارگذاری کنید؟ بله . بیایید بگوییم که با استفاده از srcset و sizes زیر یک تصویر قهرمان واکنش‌گرا داریم:

<img src="lighthouse.jpg"
          srcset="lighthouse_400px.jpg 400w,
                  lighthouse_800px.jpg 800w,
                  lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">

به لطف ویژگی‌های imagesrcset و imagesizes اضافه شده به ویژگی link ، می‌توانیم یک تصویر واکنش‌گرا را با استفاده از همان منطق انتخاب تصویر که توسط srcset و sizes استفاده می‌شود، بارگذاری کنیم:

<link rel="preload" as="image" href="lighthouse.jpg"
           imagesrcset="lighthouse_400px.jpg 400w,
                        lighthouse_800px.jpg 800w,
                        lighthouse_1600px.jpg 1600w"
imagesizes="50vw">

اگر تصویر LCP از طریق پس‌زمینه CSS تعریف شود، ممیزی فرصت‌های پیش‌بارگذاری را نیز برجسته می‌کند؟ بله.

هر تصویری که به‌عنوان تصویر LCP پرچم‌گذاری می‌شود، چه از طریق پس‌زمینه CSS یا <img> ، در صورتی که در عمق آبشار سه یا بیشتر کشف شود، نامزد است.

تنبلی بارگذاری تصاویر خارج از صفحه و اجتناب از آن برای LCP

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

تصاویر بحرانی بالای صفحه، مانند بزرگترین تصویر رنگ محتوایی، نباید با تنبلی بارگذاری شوند. انجام این کار می تواند بارگذاری تصویر LCP را به تاخیر بیاندازد . اگر یک تصویر LCP از طریق ممیزی "بزرگترین تصویر رنگ محتوایی با تنبلی بارگیری شد" اشتباه بارگذاری شود، Lighthouse برجسته می کند:

مشارکت های CLS را شناسایی کنید

تغییر چیدمان تجمعی اندازه گیری ثبات بصری است. این مقدار محتوای یک صفحه را به صورت بصری تغییر می دهد. Lighthouse یک ممیزی برای اشکال زدایی CLS به نام "Avoid large layout shifts" دارد.

این ممیزی عناصر DOM را برجسته می کند که بیشترین کمک را به جابجایی صفحه دارند. در ستون Element در سمت چپ، لیستی از این عناصر DOM و در سمت راست، سهم کلی CLS آنها را خواهید دید.

به لطف ویژگی جدید Lighthouse Element Screenshots، هم می‌توانیم پیش‌نمایش بصری عناصر کلیدی ذکر شده در ممیزی را ببینیم و هم می‌توانیم برای نمای واضح‌تر، کلیک برای زوم کنیم:

برای CLS پس از بارگذاری، تجسم مداوم با مستطیل ها می تواند ارزش داشته باشد که کدام عناصر بیشترین کمک را به CLS داشته اند. این قابلیتی است که در ابزارهای شخص ثالث مانند داشبورد Core Web Vitals SpeedCurve خواهید یافت و من دوست دارم از Defaced's Layout Shift GIF Generator برای آن استفاده کنم:

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

شناسایی CLS از تصاویر بدون ابعاد

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

برای نوشتن خوب در مورد اهمیت فکر کردن به ابعاد و نسبت تصویر، دوباره به تنظیم ارتفاع و عرض روی تصاویر مراجعه کنید.

شناسایی CLS از تبلیغات

Publisher Ads for Lighthouse به شما امکان می دهد فرصت هایی را برای بهبود تجربه بارگیری تبلیغات در صفحه خود بیابید، از جمله مشارکت در تغییر طرح و کارهای طولانی که ممکن است نشان دهد که چقدر سریع صفحه شما توسط کاربران قابل استفاده است. در Lighthouse، می توانید این را از طریق افزونه های انجمن فعال کنید.

به یاد داشته باشید که تبلیغات یکی از بزرگ‌ترین مشارکت‌کنندگان در تغییر طرح‌بندی در وب هستند. مهم است که:

• هنگام قرار دادن تبلیغات غیر چسبنده در نزدیکی بالای نمای درگاه مراقب باشید
• با رزرو بزرگترین اندازه ممکن برای جایگاه آگهی، تغییرات را حذف کنید

از انیمیشن های غیر ترکیبی خودداری کنید

اگر کارهای سنگین جاوا اسکریپت موضوع اصلی را مشغول نگه دارد، انیمیشن‌هایی که غیر ترکیبی هستند، می‌توانند خود را در دستگاه‌های رده پایین‌تر به‌عنوان بدجنس نشان دهند. چنین انیمیشن هایی می توانند تغییرات طرح را ایجاد کنند.

اگر کروم متوجه شود که یک انیمیشن نمی تواند ترکیب شود، آن را به یک DevTools trace Lighthouse گزارش می دهد و به آن اجازه می دهد فهرستی از عناصر دارای انیمیشن و به چه دلیلی ترکیب نشده باشد. می‌توانید این موارد را در ممیزی انیمیشن‌های غیر ترکیبی اجتناب کنید .

اشکال زدایی تاخیر ورودی اول / زمان مسدود شدن کل / وظایف طولانی

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

Lighthouse شامل ممیزی وظایف با موضوع اصلی طولانی اجتناب شود که طولانی ترین وظایف را در موضوع اصلی فهرست می کند. این می تواند برای شناسایی بدترین عوامل در تاخیر ورودی مفید باشد. در ستون سمت چپ می‌توانیم URL اسکریپت‌هایی را ببینیم که مسئول وظایف طولانی‌مدت اصلی هستند.

در سمت راست می توانیم مدت زمان این وظایف را ببینیم. به عنوان یادآوری، وظایف طولانی وظایفی هستند که بیش از 50 میلی ثانیه اجرا می شوند. در نظر گرفته می شود که این موضوع به اندازه کافی طولانی ترد اصلی را مسدود می کند تا بر نرخ فریم یا تأخیر ورودی تأثیر بگذارد.

اگر خدمات شخص ثالث را برای نظارت در نظر بگیرم، من همچنین کاملاً از خط زمانی اجرای رشته اصلی Visual Caliber برای تجسم این هزینه‌ها خوشم می‌آید، که هم وظایف والدین و هم وظایف فرزند را برجسته می‌کند که به وظایف طولانی که بر تعامل تأثیر می‌گذارند، کمک می‌کند.

درخواست‌های شبکه را برای دیدن تأثیر قبل و بعد در Lighthouse مسدود کنید

Chrome DevTools از مسدود کردن درخواست‌های شبکه برای مشاهده تأثیر حذف یا در دسترس نبودن منابع فردی پشتیبانی می‌کند. این می‌تواند برای درک هزینه‌ای که اسکریپت‌های فردی (مانند جاسازی‌های شخص ثالث یا ردیاب‌ها) در معیارهایی مانند زمان مسدود کردن کل (TBT) و زمان تعامل دارند مفید باشد.

مسدود کردن درخواست شبکه با Lighthouse هم کار می کند! بیایید نگاهی گذرا به گزارش Lighthouse برای یک سایت بیندازیم. امتیاز Perf 63/100 با TBT 400 میلی‌ثانیه است. با کاوش در کد، متوجه می‌شویم که این سایت یک Intersection Observer را در کروم بارگیری می‌کند که ضروری نیست. بلاکش کنیم!

می‌توانیم روی یک اسکریپت در پانل DevTools Network کلیک راست کرده و روی Block Request URL کلیک کنیم تا آن را مسدود کنیم. در اینجا ما این کار را برای polyfill Intersection Observer انجام خواهیم داد.

بعد می توانیم Lighthouse را دوباره اجرا کنیم. این بار می‌توانیم ببینیم که امتیاز عملکرد ما (70/100) و همچنین زمان مسدود کردن کل (400 میلی‌ثانیه => 300 میلی‌ثانیه) بهبود یافته است.

جاسازی های گران قیمت شخص ثالث را با نما جایگزین کنید

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

یکی از الگوهای بهبود عملکرد چنین ویجت‌هایی ، بارگذاری تنبلی آنها در تعامل با کاربر است. این را می توان با ارائه یک پیش نمایش سبک از ویجت (نما) انجام داد و تنها در صورتی که کاربر با آن تعامل داشته باشد، نسخه کامل را بارگیری کرد. لایت‌هاوس ممیزی دارد که منابع شخص ثالثی را توصیه می‌کند که می‌توانند با نما بارگذاری شوند، مانند جاسازی‌های ویدیوی YouTube.

به عنوان یادآوری، Lighthouse کد شخص ثالثی را که رشته اصلی را برای بیش از 250 میلی‌ثانیه مسدود می‌کند، برجسته می‌کند. این می‌تواند انواع اسکریپت‌های شخص ثالث (از جمله اسکریپت‌هایی که توسط Google نوشته شده‌اند) را که ممکن است ارزش به تعویق انداختن بهتر یا بارگیری تنبل را داشته باشند، در صورتی که آنچه ارائه می‌کنند برای مشاهده آن نیاز به پیمایش داشته باشد، نشان دهد.

فراتر از Core Web Vitals

گذشته از برجسته کردن Core Web Vitals، نسخه‌های اخیر Lighthouse و PageSpeed ​​Insights همچنین سعی می‌کنند راهنمایی‌های مشخصی ارائه دهند که می‌توانید برای بهبود سرعت بارگیری برنامه‌های کاربردی وب سنگین جاوا اسکریپت در صورت روشن بودن نقشه‌های منبع، دنبال کنید.

اینها شامل مجموعه‌ای از ممیزی‌های رو به رشد برای کاهش هزینه جاوا اسکریپت در صفحه شما می‌شود، مانند کاهش اتکا به polyfills و موارد تکراری که ممکن است برای تجربه کاربر مورد نیاز نباشد.

برای اطلاعات بیشتر در مورد ابزار Core Web Vitals، به حساب توییتر تیم Lighthouse و موارد جدید در DevTools توجه کنید.

تصویر قهرمان توسط مرسدس مهلینگ در Unsplash .