ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 30) : بازرسی کامل سایت با Lighthouse - قسمت 2

- visibility ۰ mode_comment

همونطور که اطلاع دارید در جلسه قبل توضیحات مقدماتی در مورد ابزار Lighthouse قرار دادیم و شما رو با اون آشنا کردیم. در این جلسه میخوایم بازرسی جزئی و کامل سایت با استفاده از Lighthouse رو به شما آموزش بدیم.

در جلسه قبل بصورت مقدماتی مباحثی رو در مورد تب Audits قرار دادیم و شما رو با اون آشنا کردیم. در این جلسه میخوایم کار با این ابزار رو بصورت کامل بهتون آموزش بدیم.

همونطور که در جلسه قبل گفتیم، زمانی که میخوایم یک تست جدید رو شروع کنیم، 4 گزینه رو میتونیم انتخاب کنیم:

توضیحات مربوط به گزینه های بالا:

  • Progressive Web App : همونطور که میدونین PWA به وبسایت هایی گفته میشه که از آخرین تکنولوژی های وب استفاده میکنه و هدف اصلی اون تجربه کاربری بهتر در تلفن همراه می باشد. این مورد چند مزیت رو به وبسایتهای ما میده. قابلیت اضافه کردن لوگوی سایت به موبایل و باز کردن سریع همانند دیگر اپلیکیشن های نصب شده، به سایت شما اضافه میشه. با استفاده از Service Worker میتونین بصورت آفلاین هم با سایت کار کنید. همچنین میتونین از Push notification استفاده کرده و با کاربر خودتون در ارتباط باشید و وبسایت خودتون رو شبیه به یک اپلیکیشن موبایل در بیارید. در آینده نزدیک دوره ای برای کار کردن با PWA قرار خواهم داد و شما رو با اون بصورت کامل آشنا میکنم. اگر شما این مورد رو تیک بزنید، استانداردهای مربوط به PWA چک میشن و سایت شما رو بررسی میکنند و اگر جایی مشکل داشته باشه به شما نشون داده میشه و میتونین اونا رو برطرف کنید.
  • Performance : با استفاده از این گزینه میتونین سرعت سایتتون رو از جنبه های مختلف تست کنید و از بهینه بودن عملکرد سایت مطمئن بشید. در این تست اطلاعاتی در اختیارتون قرار میگیره که متوجه میشید که محتوای سایتتون چه موقع نمایش داده میشه و چه موقع توسط کاربر قابل استفاده خواهد شد.
  • Best Practices : این مورد بررسی میکنه که سایت شما از بهترین موارد توسعه وب مدرن پیروی میکنه یا خیر
  • Accessibility : همونطور که میدونین یکی از مسائل مهم در دنیای امروز آماده سازی سایت برای تمامی افراد، از جمله افراد معلول می باشد. این مورد بررسی میکنه که سایت شما برای افرادی که معلول هستند و ناتوانی دارند، بهینه ساخته شده است یا خیر.

اجرای بازرسی با Lighthouse

میبینید که Lighthouse تست های متنوعی رو شامل میشه. همونطور که قبلا هم بیان شد، قصد داریم این سایت رو مورد تست قرار بدیم. همه گزینه های بالا رو انتخاب کرده و بر روی Run audit کلیک میکنم. تست تقریبا بین 1 تا 2 دقیقه طول میکشه (با توجه به سایت ممکنه کمتر یا بیشتر هم بشه) و بعد از اتمام عملیات بازرسی، گزارشی جامع و کاملی در اختیارتون قرار میگیره.

میبینید که امتیاز مربوط به هر گزارش از 100 قرار داده شده است و هر چه به 100 نزدیکتر باشد، رنگ سبز تر بوده و تست موفقیت آمیزتر بوده است. با کلیک بر روی هر کدوم از موارد بالا، اطلاعات جزئی تر مربوط به اون مورد به شما نمایش داده خواهد شد. مثلا اگر اطلاعات مربوط به Progressive Web App رو ببینیم، بصورت زیر خواهد بود:

توضیحات مربوط به تصویر بالا:

  1. همونطور که میبینید ابتدا خطا یا Fault ها نمایش داده میشه. در بالا یک خطا داریم.
  2. خطای مورد نظر مربوط به Page Load می باشد. با کلیک بر روی اون اطلاعات جزئی تر نمایش داده میشه و میتونین با کلیک بر روی لینک Learn more اطلاعات بیشتر و دقیق تری رو بدست بیارید و مشکل رو برطرف کنید.
  3. در این قسمت هم تست هایی که با موفقیت پشت سر گذاشته شده اند رو نمایش میدهد و با کلیک بر روی اونا میتونین اطلاعات بیشتری رو در موردشون کسب کنید.
  4. در این قسمت هم تست هایی که شخصا و بصورت دستی باید انجام بدین رو قرار داده است. بعضی از تست ها رو Lighthouse نمیتونه انجام بده و در عوض شما رو راهنمایی میکنه تا از درست عمل کردن اونا مطمئن بشید.

گزارش در قسمت Performance شامل تصاویر و شاخص هایی می باشد که با استفاده از اونا میتونین مشکلات سایتتون رو متوجه بشید و اونا رو برطرف کنید.

اشتراک گذاری گزارش با دیگران

حالا شاید بخواید این تست رو به افراد دیگه هم نشون بدین. برای اینکار گزینه هایی در بالای تب Audits وجود داره که میتونین ازشون استفاده کنید:

  1. شروع به تست جدید
  2. دانلود گزارش فعلی
  3. لیستی از گزارشهای انجام شده
  4. حذف کردن گزارش فعلی

برای به اشتراک گذاری گزارش فعلی بر روی آیکون دانلود کلیک کنید. حالا میتونین فایل JSON تولید شده رو در اختیار دیگران قرار بدین. همچنین میتونین با استفاده از سایت Lighthouse Report Viewer گزارشهای JSON خودتون رو مشاهده کنید. برای اینکار فایل JSON رو درگ کرده و درون سایت Drop و رها کنید. با اینکار گزارش نمایش داده خواهد شد.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.