معرفی Lighthouse ابزار رایگان آنالیز عملکرد و کیفیت سایت

افزونه Lighthouse  چیست؟

گوگل پیشروی طراحی وب مدرن می‌باشد. گوگل کروم یکی از بهترین مرورگرهای در دسترس است که دارای بسیاری از ویژگی‌های پنهان است؛ بخصوص developer tools که دارای بسیاری از ویژگی‌های نمایش زیبا از فایل‌های CSS و JS فشرده شده می‌باشد. اخیرا ابزار مفید دیگری به نام Lighthouse را منتشر کرده است که یک ابزار تست خودکار رایگان است که در بک‌گراند مرورگر کروم اجرا می‌شود. Lighthouse یک نرم‌افزار منبع باز است که هدف آن کمک به بهبود عملکرد وبسایت و اپلیکیشن‌ها می‌باشد. این ابزار مانند یک وبسایت کوچک کار می‌کند که عملکرد، سرعت، دسترسی و پایبندی به بهترین شیوه‌های معنایی را بررسی می‌کند. 

افزونه Lighthouse در ابتدا برای اپلیکیشن‌های وب پیشرونده (progressive webapps) ایجاد شد. وب اپلیکیشن‌های عمومی وجود دارند که در مرورگر اجرا می‌شوند و مانند اپلیکیشن‌های بومی (native) عمل می‌کنند و در عین حال عملکردی مانند وبسایت‌های معمولی دارند. بومی به معنای ساخت و طراحی اپلیکیشن با استفاده از زبان‌های اصلی سیستم عامل می‌باشد. در واقع وب اپلیکیشن‌های پیشرونده از قابلیت‌های وب مدرن برای ایجاد تجربه شبه اپلیکیشنی برای کاربر استفاده می‌کنند. به عبارت دیگر در مرورگرهای جدید قابلیت اجرا به عنوان یک اپلیکیشن را دارند و تجربه کاربری به عنوان یک اپلیکیشن را به کاربر می‌دهد.

وب اپلیکیشن‌های پیشرونده (PWA) بخش بزرگی از پروژه Lighthouse هستند؛ اما هدف Lighthouse کمک به توسعه دهندگان وب است تا بتوانند کیفیت صفحه‌های وب‌شان را بررسی کنند. این می‌تواند شامل بررسی باگ یا اشکال HTML/CSS یا جستجوی ردیف‌های تکراری کد باشد. Lighthouse همچنین عملکرد وب را با نکات بهینه‌سازی برای تصاویر، اندازه فایل، درخواست‌های HTTP و غیره با دقت بررسی می‌کند. 

معرفی خدمات وب24: طراحی سایت وردپرس با کدنویسی اختصاصی

چگونه از Lighthouse استفاده می‌شود؟

در ورژن 60 کروم ابزار بسیار خوبی به نام Lighthouse معرفی شد که دارای ویژگی بررسی (audit) کامل برای صفحات وب است. در ورژن‌های قبلی 60 کروم این پنل فقط شامل اندازه‌گیری عملکرد صفحه وب و استفاده از شبکه بود. جهت استفاده از آن، صفحه وبی را که می‌خواهید بررسی آن را انجام دهید، باز کنید. به منوی View، سپس Developer رفته و بر روی Developer Tools کلیک کنید و یا با کلیک راست بر روی صفحه مورد نظر، گزینه Inspect را انتخاب کنید. اگر کروم را در لپ‌تاپ بر روی ویندوز اجرا می‌کنید، برای باز شدن این پنل بررسی باید دکمه F12 کیبورد را فشار دهید تا DevTool باز شود. سپس تب Audits را انتخاب کنید.

بعد از آن بر روی دکمه Perform an Audit کلیک کنید و دسته‌بندی که می‌خواهید آنالیز آن انجام شود را انتخاب کنید. سپس بر روی Run Audit کلیک کنید، همچنین می‌توانید برای بررسی دیگر در سایت دکمه + را فشار دهید. بعد از بررسی بر روی دکمه دانلود کلیک کنید تا گزارش بررسی بر روی کامپیوتر شما نمایش داده شود. 

اکنون مرورگر کروم، صفحه شما را برای مشکلات احتمالی مختلف در دسته‌بندی انتخاب شده آنالیز می‌کند. پس از آنکه بررسی انجام شد، شما امتیازی در هر یک از دسته‌ها تا حداکثر 100 مشاهده می‌کنید:

تمام نتایج بررسی مهم سمت راست در DevTools کروم نشان داده می‌شود، بنابراین نیازی ندارید پنجره جدیدی را برای بررسی آمارها باز کنید. همه آنچه که نیاز دارید یک نسخه کروم و نیز قدری زمان است تا نتایج آماری Lighthouse را بررسی کنید. به طور کلی بررسی‌های این ابزار به 5 دسته تقسیم می‌شود:

1. عملکرد (Performance) 
2. ویژگی‌های وب اپلیکیشن‌های پیشرونده (PWA)
3. بهترین شیوه‌ها (Best practices)
4. قابلیت دسترسی (Accessibility)
5. سئو (SEO)

معرفی خدمات وب24: طراحی سایت فروشگاهی با کدنویسی اخصاصی

نتایج بررسی وبسایت توسط Lighthouse

بررسی (audit) چند دقیقه بسته به وبسایت طول می‌کشد. شما می‌توانید نتایج را در developer tools مانند تصویر پایین برای هر بخش انتخاب شده مشاهده کنید. همچنین می‌توانید نتایج را در صفحه نمایش دانلود کنید یا برای اینکه گزارش را بعدا بررسی کنید دانلود کنید. 

هر دسته به مشخصات یا ویژگی‌های کوچکتری با توصیه‌هایی برای بهبود تجربه کاربری تقسیم می‌شود. با کلیک بر روی یک دکمه می‌توانید نتایج بررسی را ببینید که این نتایج به شما کمک می‌کنند به طور اساسی عملکرد وبسایت، سرعت آن، کاربرد پذیری و بسیاری از معیارهای دیگری که گوگل به آنها اهمیت می‌دهد را بهبود بخشید. 

در هر یک از این دسته‌بندی‌ها امتیاز بر اساس بررسی‌هایی محاسبه می‌شود که ناموفق یا قبول شده هستند. شما دقیقا می‌توانید ببینید که چه چیزی موفق یا ناموفق بوده است و می‌توانید جزئیاتی را در مورد هر بررسی بخوانید. 

1- عملکرد (Performance)

اولین دسته بندی عملکرد است. بدون شک این بخش بسیار مهم است و باید بر روی آن تمرکز کنید. بخصوص از آنجا که بسیاری از کاربران تمایل دارند تا ارتباط شبکه باکیفیت پایین داشته باشند یا از دستگاه‌های موبایل به سایت شما دسترسی یابند. Lighthouse این مورد را در نظر می‌گیرد و ارتباط شبکه با سرعت پایین و CPU آهسته را شبیه‌سازی می‌کند. 

بخش performance مدت زمانی که طول می‌کشد تا سایت نمایش داده شود همراه با دیگر معیارهای مفید مانند  first meaningful pain (اولین رنگ معنی‌دار)، first interactive (اولین تعامل) و غیره را نشان می‌دهد. به عبارت دیگر، عملکرد وب اشاره به صفحات وبی دارد که دانلود شده و بر روی مرورگر وب کاربر نمایش داده می‌شود. بهینه‌سازی عملکرد وب عرصه‌ای از دانش در مورد افزایش عملکرد وب است. سرعت دانلود سریعتر وبسایت باعث  افزایش زمان ماندن بازدید کننده در سایت، وفاداری و رضایت کاربر می‌شود؛ بخصوص برای کاربرانی که دارای ارتباط اینترنتی کند و نیز آنهایی که بر روی موبایل به سایت دسترسی می‌یابند. اولین بخش دسته بندی عملکرد، Metrics یا آمارها می‌باشد. این معیارها عملکرد اپلیکیشن را در تعدادی از اندازه‌ها درج می‌کند.

معرفی خدمات وب24: طراحی سایت شرکتی با کدنویسی اختصاصی

همچنین می‌توانید 3 نقطه اصلی بارگذاری را ببینید:

• اولین رنگ معنی‌دار (First meaningful paint): اولین رنگ معنی‌دار زمانی اندازه‌گیری می‌شود که محتوای اصلی یک صفحه قابل مشاهده است. 
• اولین تعامل (First interactive): اولین نقطه است که در آن اسکریپت‌های لازم صفحه بارگذاری می‌شود و CPU به اندازه کافی بیکار است تا بتواند بیشترین ورودی کاربر را مدیریت کند. 
• تعامل مداوم (Consistently interactive): نقطه‌ای که در آن بیشترین منابع شبکه بارگذاری شده‌اند و CPU برای مدت طولانی بیکار است. 

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

آخرین بخش Diagnostics یا ویژگی‌ها می‌باشد؛ این بخش اطلاعات بیشتری را در مورد عملکرد نشان می‌دهد. یکی از اینها زنجیره درخواست‌ بحرانی (Critical Request Chains) است که نشان می‌دهد چه منابعی در اولین رندر صفحه مورد نیاز است. ما می‌توانیم لود صفحه را از طریق کاهش طول زنجیره، کاهش حجم دانلود منابع یا تأخیر در دانلود منابع غیرضروری افزایش دهیم. 

2- ویژگی‌های وب اپلیکیشن‌های پیشرونده (PWA)

ابزار Lighthouse کروم، صفحه را برای دستورالعمل‌های وب اپلیکیشن‌های پیشرونده بررسی می‌کند و شامل اصول و دستورالعمل‌های طراحی گوگل است. این امر باید منجر به تجربه کاربری خوشایند همانند اپلیکیشن‌های موبایل بومی (native) شود. این بخش موارد موفق، ناموفق و آیتم‌های مورد نیاز برای بررسی به صورت دستی را نشان می‌دهد. برخی از فاکتورهای بررسی شده برای PWA شامل سرعت بارگذاری در اتصال 3G، بارگذاری محتوا در viewport (پنجره‌ای که در آن وبسایت مشاهده می‌شود)، استفاده از HTTPS و ریدایرکت HTTP به HTTPS می‌باشند. 

3- قابلیت دسترسی (Accessibility)

بخش دسترسی شامل تست‌هایی برای آنالیز قابلیت خواندن صفحه و سایر تکنولوژی‌های پشتیبانی برای کار کردن درست در صفحه است. برای مثال، استفاده از ویژگی‌ها توسط عناصر، بهترین شیوه‌های ARIA، نام‌های قابل تشخیص عناصر و غیره می‌باشد.

در بخش قابلیت دسترسی مطمئن می‌شوید که اپلیکیشن شما توسط بسیاری از کاربران تا حد امکان قابل استفاده است. بدان معنا که فرصت‌هایی را برای بهبود سایت شما ارائه می‌دهد. به عنوان نمونه شامل ارائه متادیتا کافی برای خوانندگان صفحه نمایش از جمله ویژگی‌های ARIA ‌باشد. ساختار محتوای شما باید این ویژگی‌ها را در نظر بگیرد و مطمئن شوید که از عناصر معنایی مناسبی استفاده می‌کنید، تصاویر شما باید ویژگی‌های alt مناسب داشته باشد و غیره. این قابلیت دسترسی این موارد را به خوبی بیان می‌کند. از آنجا که همه ویژگی‌های دسترسی نمی‌تواند به صورت اتوماتیک تست کرد، پیشنهاد می‌شود آیتم‌های مورد نیاز را به صورت دستی بررسی کنید. 

معرفی خدمات وب24: طراحی سایت گردشگری با کدنویسی اختصاصی

4- بهترین شیوه‌ها (Best practices)

در این بخش برخی توصیه‌ها برای مدرن‌سازی صفحه و اجتناب از مشکلات احتمالی عملکرد را بررسی خواهد کرد و نتایج را در بخش Best practices نشان می‌دهد. به عنوان مثال حافظه پنهان (cache) اپلیکیشن، استفاده از HTTPS و غیره. این بخش شامل لیست تست‌های موفق و ناموفق است.

5- سئو (SEO) 

سئو ویژگی جدیدی است که در Lighthouse کروم اضافه شده است. بهینه‌سازی موتور جستجو برای هر وبسایت مهم است تا اطمنیان حاصل شود که موتورهای جستجویی مانند گوگل و بینگ می‌توانند سایت را ایندکس کنند و در نتایج جستجو نشان دهند. این بخش سایت مورد نظر را برای توصیف متا، تگ‌های alt، عنوان صفحه، تگ canonical و موبایل دوستانه بودن سایت و قابلیت ایندکس صفحه بررسی خواهد کرد. 

مشاهده گزارش (Lighthouse Report Viewer)

می‌توانید گزارش بررسی‌های دانلود شده را با استفاده از Notepad یا TextEdit مشاهده کنید. اما محتوا به فرمت قابل خواندنی که می‌توانید در ابزار Chrome developer ببینید، نیست. برای خواندن محتوای گزارش، نیاز به یک report viewer دارید. بنابراین باید به صفحه Lighthouse report viewer بروید. 

گزارش دانلود شده از کروم را بکشید و رها کنید (Drag and drop). این گزارش در کروم به همان فرمت مشابهی که در ابزار developer بوده را مشاهده خواهید کرد.

افزونه Lighthouse کروم

کروم همچنین دارای افزونه lighthouse جداگانه برای انجام بررسی وبسایت می‌باشد. این افزونه اساسا همان ابزار ادغام شده در ابزار developer مرورگر کروم است. بنابراین اگر نمی‌خواهید از ابزار developer استفاده کنید، می‌توانید از این افزونه استفاده کنید. 

می‌توانید به فروشگاه وب کروم رفته و افزونه Lighthouse بر روی مرورگر کروم خود نصب کنید. پس از نصب، آیکون lighthouse در کنار نوار آدرس کروم اضافه خواهد شد. بر روی Options کلیک کنید تا دسته‌بندی مورد نظر خود را برای بررسی انتخاب کنید و سپس بر روی دکمه Generate report کلیک کنید. 

گزارش بررسی وبسایت در یک پنجره جدید پس از اتمام بررسی باز خواهد شد. 

حرف آخر

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