آموزش تست سایت با گوگل لایت هاوس (Lighthouse)

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

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

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

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

۱. باز کردن گوگل کروم در پنجره ناشناس

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

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

یک مسئله مهم دیگری که باید در نظر داشته باشید این است که برخی افزونه‌های مرورگری که بر روی مرورگر شما نصب شده‌اند ممکن است تأثیرات منفی بر روی نتایج تست داشته باشند. اما راه‌حلی وجود دارد تا شما بتوانید تست خود را در یک محیط ایزوله و بدون تأثیر از این افزونه‌ها انجام دهید. به سادگی یک پنجره جدید به نام "Incognito Window" (پنجره ناشناس) در مرورگر Google Chrome ایجاد کنید و بدون وارد شدن به حساب کاربری، تست را انجام دهید.

برای باز کردن یک سایت در حالت ناشناس، کافی است آیکون سه نقطه در بالای مرورگر را کلیک کرده و گزینه "New incognito window" (پنجره ناشناس جدید) را انتخاب کنید. این حالت به شما این امکان را می‌دهد که به عنوان یک کاربر ناشناس و بدون هیچ تاریخچه‌ای از مرور وب‌سایت، تست خود را انجام دهید.

۲. فعال کردن محیط DevTools

مرورگر شما در حالت عمومی برای مرور و استفاده از وب‌سایت‌ها به کار می‌رود، کاری که به روزانه با آسانی انجام می‌دهید. اما آیا می‌دانستید که در دل مرورگر Chrome یک قسمت پنهان به نام "DevTools" (ابزارهای توسعه) وجود دارد؟ این بخش به طراحان و برنامه‌نویسان وب امکان انجام کارهای تخصصی‌تر را می‌دهد و امکانات بیشتری را در اختیار آن‌ها قرار می‌دهد. در واقع، این بخش به شما این امکان را می‌دهد که در حین بارگذاری صفحه و تست کدها و عملیات‌های مختلف دیگر، کمک حرفه‌ای انجام دهید.

برای دسترسی به این بخش یا پنجره‌های مرتبط با ابزارهای توسعه، سه راه دارید که هر یک از آن‌ها را به شما توضیح می‌دهم:

با کلیک بر روی علامت سه نقطه در بالای مرورگر، منوی "More tools" (ابزارهای بیشتر) را باز کنید و گزینه "Developer Tools" (ابزارهای توسعه) را انتخاب کنید.

برای باز کردن ابزار توسعه، سایت مورد نظر خود را باز کنید و روی بخشی از وب‌سایت کلیک راست کرده و گزینه "Inspect" (بررسی) را انتخاب کنید که آخرین گزینه در این منو است.

با فشار دادن کلید F12 در کیبورد، بخش DevTools به صورت فوری نمایان خواهد شد.

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

۳. رفتن به تب Lighthouse

وقتی محیط DevTools را فعال می‌کنید یا به عبارت دیگر تب‌های مربوط به توسعه را باز می‌کنید، شما با بخش‌های متعددی روبرو می‌شوید. این بخش‌ها شامل "Console" (کنسول)، "Network" (شبکه)، "Element" (عنصر)، "Source" (منبع) و چندین تب دیگر هستند که در نگاه اول ممکن است Lighthouse به چشم شما نخورد. برای دسترسی به تب‌های اضافی که در پایین تب‌های اصلی قرار دارند، باید علامت ">>" را بزنید تا تب‌های بیشتری نمایان شوند و می‌توانید بین آن‌ها گزینه "Lighthouse" را انتخاب کنید.

با پیدا کردن و انتخاب تب Lighthouse، شما به 99 درصد مسیر راه را پشت سر گذاشته‌اید و فقط یک کلیک دیگر برای مشاهده نتایج تست لازم است. در همین مسیر، تب دیگری به نام "Performance" (عملکرد) وجود دارد که اسمش ممکن است شما را گیج کند. اما برای انجام تست Lighthouse، نیازی به این تب ندارید و به دنبال تب Lighthouse بگردید و آن را انتخاب کنید.

۴. زدن دکمه Analyze page load

اگر تمام مراحل را به درستی دنبال کرده باشید، در تبی که فعال کرده‌اید، یک دکمه آبی با عنوان "Analyze page load" (تجزیه و تحلیل بارگذاری صفحه) وجود دارد که به راحتی می‌توانید آن را پیدا کنید. با فشردن این دکمه، به سادگی به انجام تست بپردازید و منتظر نتیجه‌ای دقیق و دقیقه‌ای از سمت مرورگر باشید.

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

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

۵. مشاهده نتیجه تست

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

تست Performance

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

بیشتر وب‌سایت‌ها در محدوده نمره ۵۰-۶۰ قرار دارند که با رنگ نارنجی نشان داده می‌شوند. اگر نمره شما در محدوده ۵۰ تا ۹۰ باشد، به عنوان "نیاز به بهبود" در نظر گرفته می‌شود و نیاز به تلاش برای بهبود دارید. اما توجه داشته باشید که اگر شما یک طراح وب نیستید، توانایی انجام تغییرات در این بخش به صورت کامل در اختیار شما نیست و باید از شرکت یا تیمی که وب‌سایت را برای شما طراحی کرده استفاده کنید.

نمره بالای ۹۰، که به آن امتیاز سبز گوگل داده می‌شود، نیاز به هزینه‌های زیادی دارد که بسیار کمتر از هر کسی یا تیمی دارای این توانایی هستند تا به نمره سبز گوگل برسند.

برای مثال، مدت زمانی که کاربران باید صبر کنند تا وب‌سایت به صورت تعاملی و پاسخگو باشد (یا به عبارت دیگر "Time to Interactive")، از جمله مواردی است که تحت عنوان عملکرد مورد بررسی قرار می‌گیرد. احتمالاً شما تاکنون تجربه کرده‌اید که بعد از بارگذاری یک صفحه وب، منوی سایت برای چند ثانیه قابل استفاده نبوده و باید منتظر ماند تا کلیه جزئیات بارگذاری شوند و وب‌سایت تعاملی شود.

همچنین موارد دیگری همچون "Total Blocking Time" که به اسکریپت‌هایی اشاره دارد که بارگذاری صفحه را متوقف می‌کنند و کاربر را مجبور به صبر می‌کنند و یا "Cumulative Layout Shift" که تغییرات ناگهانی در چیدمان صفحه وب را نشان می‌دهد، در این بخش ارزیابی می‌شوند.

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

تست Accessibility

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

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

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

تسهیل دسترسی و افزایش دسترسی‌پذیری وب‌سایت‌ها به روش‌های ساده و قابل تنظیمی امکان پذیر است و کاهش نمره در این بخش برای شما دشوار و هزینه‌بر نخواهد بود. این موضوع نه تنها به بهبود تجربه کاربری کمک می‌کند بلکه به جلب مخاطبان بیشتری نیز منجر می‌شود.

تست Best Practice

مفهوم "بهترین عملکرد" یا به عبارتی "Best Practice" در دنیای برنامه‌نویسی و حتی در صنایع دیگر وجود دارد. این مفهوم به بهترین روش‌های انجام هر کار اشاره دارد و معمولاً به مسائلی که چندین راه ممکن برای حل دارند و برخی از افراد بزرگ و تجربه‌دار از قبل روش‌های واضح و موثری را توصیه کرده‌اند، اشاره می‌کند. از شما خواسته می‌شود که از این روش‌ها و توصیه‌ها استفاده کنید تا بهترین نتیجه را به دست آورید، به جای اینکه خودتان همه چیز را از ابتدا اختراع کنید.

چند مثال ساده از این اصول می‌تواند توضیح دهد که چگونه بهترین عملکرد می‌تواند در طراحی و توسعه وب‌سایت‌ها مفید باشد. به عنوان مثال، باید رابطه طول و عرض تصاویر را رعایت کنید تا تصاویر دچار کشیدگی نشوند و محتوای آنها دچار تغییر شکل نشود. همچنین باید توجه داشته باشید که تصاویر با کیفیت پایین و با رزولوشن پایین نمایش داده نشوند، چرا که این ممکن است به کیفیت وب‌سایت ضربه بزند. یک مثال دیگر از رعایت بهترین عملکرد این است که وب‌سایت شما باید از پروتکل HTTPS برای ارتباط با کاربر استفاده کند تا امنیت اطلاعات کاربر را حفظ کند. سایت‌هایی که از پروتکل HTTP استفاده می‌کنند، آسیب‌پذیر هستند و این نیز به عنوان یک اصل مهم در نظر گرفته می‌شود.

رعایت بهترین عملکرد‌ها در طراحی و توسعه وب‌سایت یک مسئله طبیعی و مشخص است و افزایش نمره در این بخش نیاز به زمان و هزینه زیادی ندارد. به همین دلیل، می‌توانید از هر کسی که در انجام این کار به شما کمک می‌کند انتظار داشته باشید.

تست SEO

بیایید به موضوع جذاب و پرحاشیه‌ی سئو بپردازیم. امتیازی که تحت عنوان سئو به شما اختصاص داده شده، به مواردی مانند الزامات و نیازهای اساسی وب‌سایت شما توجه می‌کند. به عنوان مثال، آیا وب‌سایت شما دارای عنوان یا متا تایتل (Meta Title) است؟ آیا برای تصاویری که در صفحه‌تان قرار داده‌اید، توضیحات کافی و تگ Alt تعریف کرده‌اید؟ آیا لینک‌هایی در صفحه‌تان وجود دارند که به صفحات خراب یا بدون محتوا اشاره می‌کنند؟

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

تست PWA

تنها تبی که ممکن است برای شما کم اهمیت و غیرفعال به نظر برسد، تب PWA یا Progressive Web App است. این عبارت به "وب اپلیکیشن پیشرفته" ترجمه می‌شود و برای همه نوع وب‌سایت‌ها لزومی ندارد. شاید شده باشید به وب‌سایت‌هایی برخورد کنید که از شما می‌خواهند سایت را به عنوان "افزودن به صفحه اصلی" موبایل خود اضافه کنید. این به نمایان به‌شکل یک اپلیکیشن به صفحه موبایل اضافه می‌شوند، این همان PWA است.

نظر شخصی من این است که احتمالاً در آینده، این بخش از استانداردهای لایت‌هاوس حذف شود چرا که برای همه نوع وب‌سایت‌ها اهمیتی ندارد و تاکنون استفاده محدودی از آن داشته‌ایم.

همچنین ارزیابی این بخش به‌صورت جداگانه انجام می‌شود، بنابراین وب‌سایت‌هایی که به عنوان PWA شناخته نمی‌شوند و حالت اپلیکیشنی ندارند، هیچ تأثیر منفی از این تست دریافت نخواهند کرد و به‌صورت خاکستری و غیرفعال نمایش داده می‌شوند. بنابراین، نگرانی‌های زیادی نداشته باشید و از این بخش به‌راحتی عبور کنید.

نتیجه گیری

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

نمره امتیاز قرمز یا کمتر از 50 به معنای وضعیت ناپسندی است. اگر نمره پرفورمنس شما کمتر از 50 است و در رتبه‌بندی بین 20 تا 30 قرار دارد، به متأسفانه وضعیت نامساعدی را نشان می‌دهد که حتی با اصلاح‌های انجام شده، بهبود قابل توجهی نخواهد داشت. در این موارد، بهتر است به جای سرمایه‌گذاری در بهبود وب‌سایت فعلی، در نظر گرفتن طراحی وب‌سایت جدید باشد تا به نتایج بهتری دست پیدا کنید. اگر تمام دایره‌ها به جز دایره پرفورمنس را به نمره 100 برسانید، نتایج بهتری خواهید گرفت و رضایت کاربر و سئو را بهبود خواهید بخشید.

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

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

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

امیدوارم این مطلب برای شما مفید واقع شده باشد و اگر نتایج تست به شما کمکی کرده باشند، لطفاً این مطلب را به دوستان و همکاران خود که وب‌سایت دارند معرفی کنید تا آن‌ها نیز از این اطلاعات بهره‌مند شوند و قادر به انجام تست‌های مشابه برای وب‌سایت‌های خود باشند. اشتراک گذاری این اطلاعات می‌تواند به بهبود وب‌سایت‌ها و بهبود تجربه کاربری در وب فضا کمک کند.