راهنمای کامل از صفر تا 100 Google Lighthouse

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

Google Lighthouse یا فانوس دریایی گوگل چیست؟

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

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

فانوس دریایی گوگل یا Google Lighthouse چه مواردی را بررسی می‌کند؟

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

زمینه‌هایی که این ابزار می‌تواند برای ما بررسی کند، شامل 5 مورد است:

1. عملکرد (Performance)

در این شاخه، فانوس دریایی گوگل به تحلیل سرعت بارگذاری وبسایت می‌پردازد؛ اینکه کاربران چقدر سریع می‌توانند به محتوای سایت دسترسی پیدا کرده و آن را ببینند. به این منظور، گوگل لایت هاوس 6 معیار را مورد بررسی قرار می‌دهد:

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

نشان‌دهنده سرعت بارگذاری محتوای صفحه است.

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

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

نشان‌دهنده کل مدت زمانی است که صفحه مسدود شده است و امکان تعامل کاربر با آن وجود ندارد. Total Blocking Time در واقع مجموع مدت زمان بعد از First Contentful Paint و قبل از Time to Interactive است و در مواقعی رخ می‌دهد که تعامل با صفحه برای کاربر بیش از 50 هزارم ثانیه مسدود شده باشد. برای مثال، اگر یک کد جاوا اسکریپت 70 هزارم ثانیه در بارگذاری صفحه وقفه بیاندازد، در نتیجه Total Blocking Time 20 هزارم ثانیه افزایش می‌یابد.

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

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

علاوه بر تحلیل و بررسی فاکتورهای ذکر شده، گوگل لایت هاوس بهسازی‌هایی را نیز به شما پیشنهاد می‌کند. این پیشنهادات طیف وسیعی از بهینه‌سازی‌ها را برای کاهش مدت زمان بارگذاری صفحات وبسایت مورد نظر ارائه می‌کند. فشرده‌سازی تصاویر نمونه‌ای از این پیشنهادات است. این بخش تحت عنوان Opportunities (به معنی فرصت‌ها) و Diagnostics (به معنی عیب‌یابی‌ها) به شما نمایش داده می‌شود.

2. قابلیت دسترسی (Accessibility)

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

3. بهترین اقدامات (Best Practices)

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

4. سئوی صفحات وب (SEO)

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

مقاله مرتبط: سئو چیست؟ هرآنچه لازم است از سئو بدانید [به همراه ویدئو]

5. وب اپلیکیشن‌های پیش‌رونده (Progressive Web App)

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

گوگل لایت هاوس (Google Lighthouse) را از کجا تهیه کنیم؟

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

Web.dev

1. وارد آدرس https://web.dev/measure/ شوید.
2. در نوار جستجوی تعبیه شده، URL (آدرس) صفحه‌ای که میخواهید بررسی کنید را وارد کنید.
3. روی دکمه Run Audit (شروع بررسی) کلیک کنید و منتظر نتیجه بمانید.

PageSpeed Insights

PageSpeed Insights (PSI) تنها بخش عملکرد صفحه را از بین بخش‌هایی که جلوتر به آن‌ها اشاره کردیم، بررسی کرده و یک نمره کلی ارائه می‌دهد. تفاوت دیگری که ممکن است شما را شگفت زده کند، امکان بررسی صفحات بصورت جداگانه روی دستگاه‌های موبایل و کامپیوتر است. PSI هم Lab Data (اطلاعات آزمایشگاهی) و هم Field Data (اطلاعات میدانی) یک صفحه وب را فراهم می‌آورد.

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

Chrome Developer Tools

فانوس دریایی گوگل از طریق Developer Tools موجود در مرورگر کروم نیز قابل دستیابی است. برای بهره‌مندی از خدمات گوگل لایت هاوس از این طریق، ابتدا سایتی را که قصد تحلیل آن را دارید در مرورگر کروم بارگذاری کنید. سپس در جایی از صفحه کلیک راست کرده و بر روی گزینه آخر (Inspect) کلیک کنید. (البته برای ورود به قسمت Inspect می‌توانید از کلیدهای میانبر Ctrl+Shift+I نیز استفاده کنید.) در صفحه باز شده، روی تب اصلی Lighthouse کلیک کرده تا گزینه‌های مربوط به تحلیل برایتان به نمایش درآید. این گزینه‌ها شامل 5 زمینه عملکرد، وب اپلیکیشن پیش‌رونده، بهترین اقدامات، قابلیت دسترسی و سئو می‌شوند. علاوه بر این، شما می‌توانید مشخص کنید که مایلید فرآیند تحلیل روی چه دستگاهی (موبایل یا کامپیوتر) انجام گیرد. سپس با زدن دکمه Generate report فرآیند ارزیابی آغاز می‌شود و نتایج برایتان قابل مشاهده خواهد بود.

افزونه گوگل کروم

ساده‌ترین راه استفاده از Google Lighthouse دانلود افزونه آن برای مرورگر کرومتان است. پس از اینکه این افزونه را از اینجا دانلود و نصب کردید، باید ابتدا وبسایتی که قصد ارزیابی آن را دارید بارگذاری کنید. سپس در افزونه‌های خود، روی افزونه مورد نظر کلیک کنید و گزینه Generate report را بزنید. بعد از کمی انتظار، به راحتی توانسته‌اید تحلیل کاملی از وبسایت خود در اختیار داشته باشید. همچنین در صورت تمایل می‌توانید با استفاده از سه نقطه موجود در سمت راست بالای صفحه، گزارش خود را در قالب فایل‌های HTML، PDF و JSON بر روی هارد کامپیوتر خود ذخیره کنید.

چرا از Google Lighthouse برای ارزیابی عملکرد سایت خود استفاده کنیم؟

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

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

به علاوه، رابط کاربری مناسب و روان آن باعث شده تا نه تنها افراد متخصص، بلکه عامه مردم بتوانند از این ابزار مفید نهایت استفاده را ببرند و اطلاعات ارزشمندی که به بهبود وضعیت وبسایتشان کمک می‌کند را از آن دریافت کنند.

سخن آخر

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

مشاهده نسخهpdf مقاله: راهنمای کامل از صفر تا 100 Google Lighthouse چیست؟