گوگل وبسایت‌هایی را دوست دارد که سریع بارگذاری می‌شوند و تجربه کاربری استثنایی ارائه می‌دهند.
پس چی بهتر از اینکه ابزار خود گوگل را برای ارزیابی وبسایتمان استفاده کنیم تا بدانیم چقدر توانسته‌ایم منطبق با استاندارهای گوگل عمل کنیم.
یکی از این ابزارها Lighthouse نام دارد که در این مطلب قرار است به صورت مختصر و مفید برایتان کارایی و نحوه‌ی استفاده از آن را توضیح دهیم.
Google Lighthouse چیست؟
لایت هاوس (Lighthouse) ابزار ارزیابی وبسایت است که به صورت رایگان عملکرد و کیفیت یک وبسایت را می سنجد و سپس توصیه‌هایی برای بهبود کیفیت آن ارائه می‌دهد.
شما می‌توانید این ابزار را به روش‌های مختلف از جمله دو روش زیر استفاده کنید:
- Chrome DevTools
- Chrome extension (افزونه کروم)
درباره‌ی دو روش بالا در ادامه به صورت مفصل توضیح می‌دهیم. اما همین قدر بدانید که بعد از انتخاب یکی از دو روش بالا و هنگامی که وارد ابزار Lighthouse شدید، یک URL را وارد می‌کنید و بعد چندین مؤلفه در آن صفحه اجرایی میشود.در نهایت، گزارشی با جزئیات از نحوه عملکرد صفحه و وبسایت به شما ارائه می‌دهد. سپس می‌توانید از نتایج به دست آمده راه‌حل‌هایی را پیدا کنید که برای بهتر شدن وبسایت به کارتان می‌آید.
نه تنها توسعه‌دهندگان می‌توانند از Lighthouse استفاده کنند، بلکه هر کسی که عهده‌دار مسئولیت یک وبسایت باشد و بخواهد در مورد عملکرد وبسایت و کارهایی که می‌تواند برای بهبود آن انجام دهد بیشتر بداند، می‌تواند از این ابزار استفاده کند.
ابزار Google Lighthouse چه چیزی را اندازه‌گیری می‌کند؟
Lighthouse یک صفحه وب را ارزیابی می‌کند و در مورد پنج مؤلفه گزارش می‌دهد:
- عملکرد (Performance)
- دسترسی‌پذیری (Accessibility)
- سئو (SEO)
- بهترین شیوه‌ها (Best practices)
- برنامه وب پیشرو (Progressive Web App)
در نهایت و بعد از ارزیابی تمام این 5 مؤلفه، Lighthouse به سایت‌ها امتیاز 1 تا 100 می‌دهد تا از طریق این نمره دقیقاً مشخص شود که وضعیت وبسایت در چه حدی است.
همانطور که میدانید، گوگل اغلب معیارهای رتبه‌بندی خود را به‌روزرسانی می‌کند، بنابراین امتیازات و جایگاه وبسایت‌ها ممکن است تغییر کنند. به همین دلیل خوب است که هر چند وقت یکبار وبسایت خود را با Lighthouse ارزیابی کنید تا از قافله‌ی گوگل عقب نمانید.
چگونه از Google Lighthouse****استفاده کنیم؟
همانطور که قبلاً گفته شد راه‌های متعددی برای استفاده از Google’s Lighthouse وجود دارد که ما در مورد 2 راه ساده صحبت خواهیم کرد.
الف) Chrome DevTools
برای اینکه از طریق Lighthouse وبسایت خود را ارزیابی کنید، لازم است که مراحل زیر را انجام دهید:
- همانطور که از اسم Chrome DevTools مشخص است به Google Chrome نیاز دارید.
- سپس، به صفحه‌ای که می‌خواهید ارزیابی کنید بروید.
- روی صفحه کلیک راست کرده و inspect را انتخاب کنید.
- Lighthouse را در نوار ابزار (toolbar) جستجو کنید (شاید مجبور باشید روی سه نقطه‌ی انتهای نوار ابزار کلیک کنید).
- در مرحله آخر، روش، دستگاه و دسته‌هایی (categories) را که می‌خواهید ارزیابی شوند را انتخاب کنید.
ب) برنامه افزودنی کروم (Chrome Extension)
در روش دوم برای اینکه بتوانید از Lighthouse استفاده کنید، لازم است افزونه‌ی لایت هاوس (Extension Lighthouse) را دانلود کنید و سپس مراحل زیر را انجام دهید:
- افزونه Lighthouse را به مرورگر خود اضافه کنید.
- مرورگر خود را ببندید و مجدداً راه‌اندازی کنید.
- به صفحه‌ای که می‌خواهید ارزیابی کنید بروید.
- روی نماد Lighthouse یا منوی کشویی افزونه‌های خود کلیک کنید.
- گزارش ارزیابی صفحه مورد نظر در مقابلتان قرار می‌گیرد.
نحوه تجزیه و تحلیل گزارش Google Lighthouse
همانطور که قبلاً گفته شد، گزارش Lighthouse پنج مؤلفه مختلف را در اختیار شما قرار می‌دهد. مهم‌ترین مورد برای ما عملکرد (Performance) است که مفصل آن را برایتان توضیح می‌دهیم، اما در مورد چهار مؤلفه‌ی دیگر نیز صحبت خواهیم کرد.
1. عملکرد (Performance)
در ابتدا، ابزار لایت هاوس (Lighthouse) بررسی می‌کند که یک صفحه یا برنامه وب چقدر سریع بالا می‌آید و چقدر طول می‌کشد تا کاربر بتواند محتوای آن را ببیند و از آن استفاده کند. همه‌ی این ارزیابی‌ها را با عنوان عملکرد (Performance) وبسایت انجام می‌دهد.
برای اینکه دقیق تر این مورد را توضیح دهیم، لازم است که به شش معیار تشکیل‌دهنده‌ی عملکرد توجه کنید:
معیار اول) نمایش اولین قطعه محتوایی (FCP)
به محض اینکه اولین قطعه محتوایی از DOM توسط مرورگر ارائه میشود، کاربر اولین نشانه‌ی بارگذاری صفحه را دریافت می‌کند (کاربرد DOM این است که عناصر محتوایی صفحه را در یک ساختار درختی سازمان‌دهی و مدیریت می‌کند).
معیار دوم) زمان تعامل (TTI)
مدت زمانی که طول می‌کشد تا یک وبسایت نسبت به کاربری که وارد آن شده واکنش نشان دهد را زمان تعاملی (Time to Interactive) میگویند.
معیار سوم) شاخص سرعت (SI)
شاخص سرعت (Speed Index) همانطور که از اسمش پیداست برای اندازه‌گیری سرعت بارگیری و قابل‌مشاهده بودن محتوای صفحه وب به کار می‌رود.
معیار چهارم) زمان انسداد کل (TBT)
از زمانی که اولین قسمت از محتوای صفحه را می‌بینید First Contentful Paint)) تا زمانی که وبسایت نسبت به شما واکنش نشان دهدTime to Interactive) ) یک فاصله‌ی زمانی وجود دارد که آن را به عنوان زمان مسدود شدن وبسایت می‌شناسند. یعنی وبسایت در این بازه‌ی زمانی مشغول آماده سازی خود برای برقراری تعامل با بازدیدکننده است.
معیار پنجم) نمایش بزرگترین قطعه محتوایی (LCP)
معیار Largest Contentful Paint سرعت بارگذاری محتوای اصلی یک وبسایت را اندازه‌گیری می‌کند. در واقع، LCP فاصله‌ی زمانی بین کلیک کاربر روی لینک صفحه تا زمانی که بزرگترین قسمت از تصویر یا بلوک متنی در viewport ارائه شود را اندازه‌گیری می‌کند.
معیار ششم) تغییر چیدمان تجمعی (CLS)
معیار Cumulative Layout Shift تعداد دفعات جابجایی غیرمنتظره عناصر وب در حین بالا آمدن صفحه را اندازه‌گیری می‌کند. سپس این اندازه‌گیری به امتیازی تبدیل میشود که تمام تغییرات طرح‌بندی صفحه شما را در نظر می‌گیرد.
فرصت‌ها (Opportunities)
این بخش هم زیرمجموعه‌ی عملکرد است و نکاتی را در مورد چگونگی بهتر کردن عملکرد وبسایت خود با بهبود 6 معیار گفته شده ارائه می‌دهد.
در مجموع، Lighthouse به شما کمک می‌کند تا بهبودهایی را که ممکن است وبسایت شما به آن نیاز داشته باشد را پیدا کنید و پیشنهاد‌هایی در مورد چگونگی دستیابی به این هدف ارائه می‌دهد.
هر وبسایتی متفاوت است و به همین دلیل فرصت‌های متفاوتی دارد. برخی از این فرصت‌ها که توسط ابزار Lighthouse و بعد از ارزیابی نهایی در اختیارتان ممکن است قرار دهد را در زیر فهرست کرده‌ایم:
- جاوا اسکریپت استفاده نشده را کاهش دهید
- منابع مسدودکننده رندر را حذف کنید
- CSS استفاده نشده را حذف کنید
- اندازه مناسب تصاویر
- به تعویق انداختن تصاویر خارج از صفحه
- زمان پاسخگویی اولیه سرور را کاهش دهید
- از ارائه جاوا اسکریپت قدیمی به مرورگرهای مدرن خودداری کنید
- از HTTP/2 استفاده کنید
- Minify CSS / Minify JavaScript
تشخیص (Diagnostics)
این بخش نیز در ادامه‌ی مؤلفه‌ی عملکرد ارائه میشود و توضیح می‌دهد که چگونه یک صفحه با انجام بهترین شیوه‌های توسعه وب می‌تواند عملکرد خود را بهتر کند.
به عبارت دیگر، تکنیک‌های کار درستی را که در وبسایت خود انجام نداده‌اید شناسایی می‌شوند و این تغییرات را در بخش تشخیص (Diagnostics) پیشنهاد می‌دهد.
مانند فرصت‌ها (Opportunities)، تشخیص (Diagnostics) نیز فهرستی را در اختیار شما قرار می‌دهد که برای صفحه ارزیابی‌شده مفید است:
- از بارهای سنگین شبکه خودداری کنید
- از DOM بیش از حد طولانی خودداری کنید
- کاهش زمان اجرای جاوا اسکریپت
- دارایی‌های ثابت را با یک استراتژی کارآمدتر ارائه دهید
2. قابلیت دسترسی (Accessibility)
این مؤلفه میزان دسترسی کاربران به محتوای صفحه و گشت و گذار در اطراف آن را اندازه‌گیری می‌کند. دسترسی یک فاکتور بسیار مهم در وبسایت است زیرا ما می‌خواهیم وبسایتمان برای همه افراد قابل‌دسترسی باشد. افراد دارای معلولیت (مثل کم بینا یا نابینا) که برای ثبت سفارش آنلاین خود نیاز به فناوری یا ابزارهای کمکی دارند، فقط می‌توانند این کار را در وبسایتی انجام دهند که (بیشتر این) مؤلفه‌های ارزیابی را با موفقیت پشت سر بگذارد.
مؤلفه‌ی ارزیابی وبسایت با عنوان دسترس‌پذیری (Accessibility) گسترده‌ترین مؤلفه به حساب می‌آید. مانند مؤلفه عملکرد، فهرستی از موارد تأییدشده را نیز به شما می‌دهد.
البته، توجه داشته باشید که Google فهرستی از معیارهایی که برای قبولی در حین ارزیابی مؤلفه‌ی دسترس‌پذیری بررسی می‌شوند را در اختیار شما قرار می‌دهد.
3. بهترین شیوه‌ها (Best Practices)
این دسته گزارش Lighthouse به گوگل می‌گوید که آیا توسعه‌دهندگان وب از استانداردهای گوگل پیروی می‌کنند یا خیر. همچنین، این مؤلفه به توسعه‌دهندگان وب اطمینان می‌دهد که از بهترین شیوه‌های توسعه وب ایمن استفاده می‌کنند.
با بررسی نتایج این مؤلفه متوجه می‌شوید که با انجام چه کارهایی کد برنامه وب شما می‌تواند سالم‌تر باشد.
- صفحه فاقد نوع doctype HTML است، بنابراین حالت quirks را راه‌اندازی می‌کند
- خطاهای مرورگر در کنسول ثبت شد
- تصاویر را در قالب درستی نمایش نمی‌دهد
- از HTTPS استفاده نمی‌کند
ارزیابی بهترین شیوه‌ها همچنین نکاتی را برای سرعت صفحه به شما ارائه می‌دهد که دقیقاً همان چیزی است که شما را دوست‌داشتنی‌تر و جذاب‌تر می‌کند.
- از HTTP/2 برای همه منابع خود استفاده نمی‌کند
- از document.write() استفاده می‌کند
- از شنوندگان غیرفعال برای بهبود عملکرد اسکرول استفاده کنید
4. بهینه‌سازی موتورهای جستجو (SEO)
مؤلفه‌ی SEO Lighthouse اساساً بررسی می‌کند که آیا موتورهای جستجو می‌توانند محتوای صفحه وب شما را درک کنند. در ادامه پیشنهاد می‌دهد که با انجام چه کارهایی می‌توانید بهینه‌سازی آن محتوا را بهتر انجام دهید.
به عبارت دیگر، Lighthouse بررسی می‌کند که آیا صفحه می‌تواند توسط موتورهای جستجو خزیده و نمایه شود یا خیر. همچنین بررسی می‌کند که آیا صفحه‌ی مورد نظر مناسب برای نمایشگر موبایل هست یا نه؛ زیرا قسمت زیادی از جستجوهای Google در دستگاه‌های تلفن همراه انجام میشود. فهرست برخی از نکاتی که در نتیجه‌ی ارزیابی لایت هاوس (Lighthouse) ارائه میشود:
- سند عنصر <title> را ندارد
- سند دارای توضیحات متا نیست
- robots.txt معتبر نیست
- تگ <meta name=viewport> با مقیاس اولیه مطابقت ندارد
5. برنامه وب پیشرو (Progressive Web App)
این مؤلفه بررسی می‌کند که آیا یک برنامه وب با مرورگرهای مختلف قابل استفاده است یا خیر. به عبارت دیگر، برنامه وب شما باید روی همه مرورگرها کار کند. مانند 4 مؤلفه‌ی دیگر ارزیابی وبسایت، گوگل چک لیستی را در اختیار شما قرار می‌دهد که از طریق آن نمایشی از عملکرد برنامه وب را می‌بینید.
