یافتن فرصت‌هایی برای بهبود تجربه کاربری با ابزار وب Chrome.
تاریخ انتشار: ۱۱ مه ۲۰۲۱
امروز، ویژگی‌های ابزار جدیدی را در Lighthouse، PageSpeed، و DevTools پوشش خواهیم داد تا به شناسایی نحوه بهبود سایت شما در Web Vitals کمک کنیم.
برای یادآوری ابزارها، Lighthouse یک ابزار خودکارشده متن‌باز برای بهبود کیفیت صفحه‌های وب است. می‌توانید آن را در مجموعه ابزارهای اشکال‌زدایی Chrome DevTools پیدا کنید و آن را برای هر صفحه وب، عمومی یا نیازمند اصالت‌سنجی، اجرا کنید. همچنین می‌توانید Lighthouse را در PageSpeed Insights، CI و WebPageTest پیدا کنید.
Lighthouse 7.x شامل ویژگی‌های جدیدی مانند نماگرفت‌های عنصر است، برای بازرسی بصری آسان‌تر بخش‌هایی از واسط کاربر شما که بر سنجه‌های تجربه کاربر تأثیر می‌گذارند (مثلاً کدام گره‌ها در تغییر چیدمان مشارکت دارند).
همچنین پشتیبانی از نماگرفت‌های عنصر را در PageSpeed Insights ارائه کرده‌ایم که راهی برای شناسایی آسان‌تر مشکلات در اجراهای عملکردی یک‌باره صفحه‌ها فراهم می‌کند.
سنجش معیارهای کلیدی اصلی وب
Lighthouse می‌تواند سنجه‌های «معیارهای کلیدی اصلی وب» ازجمله بزرگ‌ترین نقاشی دارای محتوا، تغییر چیدمان تجمعی و کل زمان مسدود شدن (یک پراکسی آزمایشگاهی برای تأخیر اولین ورودی) را به‌صورت ترکیبی اندازه‌گیری کند. این سنجه‌ها نشان‌دهنده بارگیری، پایداری چیدمان، و آمادگی تعامل است. سنجه‌های دیگری مثل اولین رنگ محتوایی که در آینده «معیارهای کلیدی اصلی وب» برجسته شده‌اند نیز وجود دارد.
بخش «سنجه‌ها» در گزارش Lighthouse شامل نسخه‌های آزمایشگاهی این سنجه‌ها است. می‌توانید از این بخش به‌عنوان نمای خلاصه برای جنبه‌هایی از تجربه کاربری که به توجه شما نیاز دارند استفاده کنید.
سنجه‌های فیلد، مانند سنجه‌هایی که در Chrome UX Report یا RUM یافت می‌شوند، این محدودیت را ندارند و مکمل ارزشمندی برای داده‌های آزمایشگاهی هستند زیرا تجربه کاربران واقعی را منعکس می‌کنند. داده‌های میدانی نمی‌توانند اطلاعات تشخیصی‌ای را که در آزمایشگاه دریافت می‌کنید ارائه دهند، بنابراین این دو مکمل یکدیگرند.
شناسایی جاهایی که می‌توانید «معیارهای کلیدی وب» را بهبود دهید
شناسایی عنصر «بزرگ‌ترین نقاشی دارای محتوا»
LCP سنجه‌ای برای تجربه بار کردن درک‌شده است. این سنجه نقطه‌ای را درطول بار شدن صفحه علامت‌گذاری می‌کند که محتوای اصلی–یا «بزرگ‌ترین» محتوا–بار شده و برای کاربر قابل‌مشاهده است.
Lighthouse ممیزی «بزرگ‌ترین عنصر نقاشی دارای محتوا» دارد که مشخص می‌کند کدام عنصر بزرگ‌ترین نقاشی دارای محتوا بوده است. نگه داشتن نشانگر روی عنصر، آن را در پنجره اصلی مرورگر برجسته می‌کند.
اگر این عنصر تصویر باشد، این اطلاعات نکته مفیدی است که ممکن است بخواهید بار کردن این تصویر را بهینه‌سازی کنید. Lighthouse شامل تعدادی ممیزی بهینه‌سازی تصویر است تا به شما کمک کند بفهمید آیا تصاویرتان می‌توانند بهتر فشرده شوند، اندازه آن‌ها تغییر کند، یا در قالب تصویر مدرن بهینه‌تری ارائه شوند.
همچنین ممکن است LCP Bookmarklet از Annie Sullivan را برای شناسایی سریع عنصر LCP با مستطیل قرمز تنها با یک کلیک مفید بیابید.
برای بهبود LCP، تصاویر دیرکشف‌شده را پیش‌بار کنید
برای بهبود «بزرگ‌ترین نقاشی دارای محتوا»، اگر مرورگر نگاره‌های اصلی مهم را دیر پیدا می‌کند، آن‌ها را پیش‌بارگیری کنید. اگر لازم باشد بسته جاوا اسکریپت قبل‌از قابل‌شناسایی شدن تصویر بار شود، ممکن است شناسایی دیرهنگام اتفاق بیفتد.
چند سؤال رایج درباره پیش‌بارگیری تصاویر 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 را به‌تأخیر بیندازد. Lighthouse ازطریق ممیزی «تصویر بزرگ‌ترین نقاشی دارای محتوا به‌صورت کُند بار شده است» برجسته می‌کند که آیا تصویر LCP به‌صورت کُند بار شده است یا نه:
شناسایی مشارکت‌های CLS
«تغییر چیدمان تجمعی» سنجه‌ای برای پایداری بصری است. این معیار میزان جابه‌جایی بصری محتوای صفحه را اندازه‌گیری می‌کند. Lighthouse ممیزی‌ای برای اشکال‌زدایی CLS دارد که «اجتناب از تغییرات بزرگ چیدمان» نامیده می‌شود.
این ممیزی عناصر DOM را که بیشترین سهم را در تغییرات صفحه دارند برجسته می‌کند. در ستون «عنصر» در سمت راست، فهرست این عناصر DOM را خواهید دید و در سمت چپ، سهم کلی CLS آن‌ها را مشاهده خواهید کرد.
به‌لطف ویژگی جدید Lighthouse Element Screenshots، هم می‌توانیم پیش‌نمایش تصویری عناصر کلیدی ذکرشده در ممیزی را ببینیم و هم می‌توانیم برای نمای واضح‌تر، روی آن کلیک کنیم تا بزرگ‌نمایی شود:
برای CLS پس‌از بارگیری، به‌طور مداوم تجسم کردن با مستطیل‌ها می‌تواند ارزشمند باشد که کدام عناصر بیشترین سهم را در CLS داشته‌اند. این ویژگی را در ابزارهای طرف سوم مانند داشبورد «معیارهای کلیدی اصلی وب» SpeedCurve پیدا خواهید کرد و من دوست دارم از تولیدکننده GIF تغییر چیدمان Defaced برای آن استفاده کنم:
برای نمای کلی سایت از مشکلات تغییر چیدمان، من از گزارش Core Web Vitals کنسول جستجو بسیار استفاده می‌کنم. این به من امکان می‌دهد انواع صفحه‌هایی را در سایتم ببینم که CLS بالایی دارند (در این مورد به من کمک می‌کند خودم تشخیص دهم که باید وقتم را روی کدام بخش‌های الگو بگذارم):
شناسایی CLS از تصاویر بدون ابعاد
برای محدود کردن «تغییر چیدمان تجمعی» ناشی‌از تصاویر بدون ابعاد، ویژگی‌های اندازه عرض و ارتفاع را در عناصر تصویر و ویدیو خود بگنجانید. این رویکرد تضمین می‌کند که مرورگر می‌تواند مقدار مناسبی از فضا را در سند اختصاص دهد درحالی‌که تصویر درحال بارگیری است.
برای مطالعه مطلبی خوب درباره اهمیت فکر کردن به ابعاد و نسبت ابعادی تصویر، به Setting Height And Width On Images Is Important Again مراجعه کنید.
شناسایی CLS از آگهی‌ها
Publisher Ads for Lighthouse به شما امکان می‌دهد فرصت‌هایی را برای بهبود تجربه بار کردن آگهی‌ها در صفحه‌تان پیدا کنید، ازجمله مشارکت‌ها در تغییر چیدمان و کارهای طولانی که ممکن است زمان قابل‌استفاده شدن صفحه‌تان را برای کاربران به‌تأخیر بیندازد. در Lighthouse، می‌توانید این ویژگی را ازطریق «افزونه‌های انجمن» فعال کنید.
به‌یاد داشته باشید که آگهی‌ها یکی از بزرگ‌ترین عوامل تغییر چیدمان در وب هستند. مهم است که:
- هنگام قرار دادن آگهی‌های غیرچسبان نزدیک بالای ناحیه نمایش دقت کنید
- با رزرو کردن بزرگ‌ترین اندازه ممکن برای جایگاه آگهی، جابه‌جایی‌ها را حذف کنید
اجتناب از پویانمایی‌های غیرمرکب
پویانمایی‌های غیرترکیبی می‌توانند در دستگاه‌های رده‌پایین‌تر به‌صورت لرزان ظاهر شوند، اگر کارهای سنگین جاوا اسکریپت رشته اصلی را مشغول نگه دارند. چنین پویانمایی‌هایی می‌توانند باعث جابه‌جایی چیدمان شوند.
اگر Chrome متوجه شود که پویانمایی‌ای نمی‌تواند ترکیب شود، آن را به ردگیری DevTools گزارش می‌دهد Lighthouse آن را می‌خواند و به آن اجازه می‌دهد تا عناصری را که پویانمایی دارند و ترکیب نشده‌اند و دلیل آن را فهرست کند. می‌توانید این موارد را در ممیزی اجتناب از پویانمایی‌های ترکیب‌نشده پیدا کنید.
اشکال‌زدایی تأخیر ورودی اول / مجموع زمان مسدودسازی / تکالیف طولانی
«اولین ورودی» مدت‌زمان بین اولین تعامل کاربر با صفحه (مثلاً وقتی روی پیوندی کلیک می‌کند، روی دکمه‌ای تک‌ضرب می‌زند، یا از کنترل سفارشی مجهز به جاوا اسکریپت استفاده می‌کند) و زمانی را که مرورگر واقعاً می‌تواند پردازش گرداننده‌های رویداد را در پاسخ به آن تعامل شروع کند می‌سنجد. «تکالیف» طولانی جاوا اسکریپت می‌تواند بر این سنجه و پروکسی این سنجه، یعنی «کل زمان مسدودسازی»، تأثیر بگذارد.
Lighthouse شامل ممیزی اجتناب از تکالیف طولانی رشته اصلی است که طولانی‌ترین تکالیف را در رشته اصلی فهرست می‌کند. این کار می‌تواند برای شناسایی بدترین عوامل تأخیر ورودی مفید باشد. در ستون سمت راست می‌توانیم نشانی وب اسکریپت‌های مسئول کارهای طولانی رشته اصلی را ببینیم.
در سمت چپ می‌توانیم مدت این تکالیف را ببینیم. یادآوری: «تکالیف طولانی» تکالیفی هستند که اجرای آن‌ها بیش‌از ۵۰ میلی‌ثانیه طول می‌کشد. این مسئله باعث می‌شود رشته اصلی به‌اندازه‌ای مسدود شود که بر نرخ فریم یا تأخیر ورودی تأثیر بگذارد.
If considering third-party services for monitoring, I also quite like the main-thread execution timeline visual Calibre has for visualizing these costs, which highlights both parent and child tasks contributing to long tasks that impact interactivity.
درخواست‌های شبکه را مسدود کنید تا تأثیر قبل/بعد را در Lighthouse ببینید
Chrome DevTools از مسدود کردن درخواست‌های شبکه پشتیبانی می‌کند تا تأثیر برداشته شدن یا دردسترس نبودن منابع مجزا را ببینید. این کار می‌تواند برای درک هزینه‌ای که اسکریپت‌های تکی (مثلاً جاسازی‌ها یا ردیاب‌های طرف سوم) بر سنجه‌هایی مانند «کل زمان مسدودسازی» (TBT) و «زمان تعاملی» دارند مفید باشد.
مسدودسازی درخواست شبکه با Lighthouse هم کار می‌کند! بیایید نگاهی سریع به گزارش Lighthouse برای یک سایت بیندازیم. امتیاز Perf برابر با ۶۳/۱۰۰ با TBT ۴۰۰ میلی‌ثانیه است. با بررسی کد، متوجه می‌شویم که این سایت یک شبیه‌ساز مرورگر Intersection Observer را در Chrome بار می‌کند که ضروری نیست. بیایید مسدودش کنیم!
می‌توانیم روی اسکریپتی در پانل DevTools Network کلیک راست کنیم و روی Block Request URL کلیک کنیم تا آن را مسدود کنیم. در اینجا این کار را برای شبیه‌ساز مرورگر Intersection Observer انجام می‌دهیم.
سپس می‌توانیم Lighthouse را دوباره اجرا کنیم. این بار می‌بینیم که امتیاز عملکرد ما بهبود یافته است (۷۰/۱۰۰) و «کل زمان مسدودسازی» نیز بهبود یافته است (۴۰۰ میلی‌ثانیه => ۳۰۰ میلی‌ثانیه).
جاسازی‌های پرهزینه شخص ثالث را با نما جایگزین کنید
استفاده از منابع طرف سوم برای جاسازی ویدیوها، پست‌های رسانه‌های اجتماعی، یا ابزاره‌ها در صفحه‌ها رایج است. به‌طور پیش‌فرض، اکثر جاسازی‌ها بلافاصله با اشتیاق بارگیری می‌شوند و می‌توانند با محموله‌های پرهزینه‌ای همراه باشند که تأثیر منفی بر تجربه کاربری می‌گذارند. اگر طرف سوم حیاتی نباشد (مثلاً اگر کاربر باید پیمایش کند تا آن را ببیند)، این کار اتلاف منابع است.
یک الگو برای بهبود عملکرد چنین ابزارهایی، بار کردن کُند آن‌ها در تعامل کاربر است. این کار را می‌توان با ارائه پیش‌نمایش سبک از ابزاره (یک نما) انجام داد و نسخه کامل را فقط درصورتی بار کرد که کاربر با آن تعامل داشته باشد. Lighthouse ممیزی‌ای دارد که منابع شخص ثالثی را که می‌توانند با نما بارگذاری کُند شوند، مانند جاسازی‌های ویدیو YouTube، توصیه می‌کند.
یادآوری می‌کنیم که Lighthouse کد طرف سومی را که رشته اصلی را برای بیش‌از ۲۵۰ میلی‌ثانیه مسدود می‌کند برجسته خواهد کرد. این کار می‌تواند انواع اسکریپت‌های شخص ثالث (ازجمله اسکریپت‌های نوشته‌شده توسط Google) را که ممکن است ارزش به‌تعویق انداختن یا بار کردن کُند داشته باشند، درصورتی‌که آنچه ارائه می‌دهند نیاز به پیمایش برای مشاهده داشته باشد، آشکار کند.
فراتر از «معیارهای کلیدی اصلی وب»
علاوه‌بر برجسته کردن «معیارهای کلیدی اصلی وب»، نسخه‌های اخیر Lighthouse و PageSpeed Insights نیز تلاش می‌کنند راهنمایی‌های ملموسی ارائه دهند که می‌توانید برای بهبود سرعت بار شدن برنامه‌های وب با جاوا اسکریپت سنگین دنبال کنید، البته اگر نقشه‌های منبع را روشن کرده باشید.
این موارد شامل مجموعه درحال رشدی از ممیزی‌ها برای کاهش هزینه JavaScript در صفحه شما است، مانند کاهش اتکا به شبیه‌سازهای مرورگر و موارد تکراری که ممکن است برای تجربه کاربری موردنیاز نباشد.
برای اطلاعات بیشتر درباره ابزار «معیارهای کلیدی اصلی وب»، حساب توییتر تیم Lighthouse و جدیدترین‌های DevTools را دنبال کنید.