فرض کنید شما برای خرید یک لباس به یک مغازه مراجعه می‌کنید، روی سر در مغاز نوشته «قیمت بسیار ارزان» اما زمانی که وارد مغازه می‌شید با قیمت‌های نه چندان ارزونی مواجه می‌شین. حتی ممکنه قیمت لباس‌ها ارزون باشه؛ اما فروشنده سرش شلوغ باشه و به همه سوالات‌تون جواب نده. خب طبیعتا شما دیگه به اون مغازه نمی‌رید و از مغازه دیگه‌ای لباس تهیه می‌کنید. حالا محیط اون مغازه رو یک سایت در نظر بگیرید. کاربر وقتی وارد سایت میشه و دنبال رفع نیازش می‌گرده، باید بهترین خدمات بهش ارائه بشه. کار ابزار google lighthouse هم دقیقا همینه.
google lighthouse چیست؟
گوگل برای رتبه بندی سایت‌ها از فاکتورهای مخصوص خودش استفاده می‌کنه. یکی از بازوهای مهم گوگل برای رتبه بندی، الگوریتم های گوگل هست؛ اما در کنار این الگوریتم‌ها یک سری ابزارها هم هستند که فاکتورهای رتبه بندی گوگل رو می‌سنجند. یکی از مهم‌ترین اون‌ها google lighthouse هست. الگوریتم لایت هاوس یک رایگانه که با بررسی فاکتورهایی مثل قابلیت دسترسی، عملکرد و میزان بهینه بودن صفحات برای موتورهای جستجو بینش وسیعی رو برای کمک به بهبود شرایط وب سایت شما فراهم می‌کنه. قراره در ادامه این مقاله با هم بررسی کنیم که این نور فانوس دریای گوگل قراره با نورش چه مواردی رو برامون روشن کنه و چه چیزهایی رو می‌تونیم با استفاده از این ابزار مورد بررسی قرار بدیم.
این ابزار سایت رو از طریق فاکتورهای مختلفی مثل آنالیز سرعت سایت، عملکرد، سئو، امنیت، دسترسی پذیری و خیلی نکات دیگه، بررسی می‌کنه. همونطور که می‌دونید یکی از مهم‌ترین فاکتورهای رتبه بندی گوگل مربوط به تجربه کاربریه و گوگل لایت هاوس می‌تونه یک ابزار بسیار مفید برای کسب اطمینان از وضعیت عملکرد وب سایت شما در این زمینه باشه به طوری که میشه این مسئله رو به عنوان مهم‌ترین و اصلی‌ترین توانایی این سرویس به شمار آورد. ابزارهای تست سرعت سایت و ابزارهای آنالیز وب مثل گوگل آنالیتیکس هم هستند که شما می‌تونید با استفاده از اون‌ها سایت خودتون رو بررسی کنید؛ اما همانطور که گفتم هر کدوم از این ابزارها کاربرد خاص خودشون رو برای آنالیز سایت دارن.
اهمیت استفاده از فانوس دریایی (Lighthouse) در چیست؟
تقریبا دیگه همه ما می‌دونیم که گوگل اصلی‌ترین و تاثیرگذارترین جزئیات الگوریتم‌های خودش رو مثل یک راز تو دل خودش نگه داشته و تا به الان از افشای اون‌ها خودداری کرده؛ اما در عین حال باز هم اطلاعات زیادی رو در مورد جنبه‌هایی که به هنگام قضاوت درباره یک وب سایت براش مهمه رو در اختیار ما قرار داده. با این حال چقدر خوب میشد اگه می‌تونستیم وب سایت خودمون رو از نگاه گوگل مشاهده کنیم.
البته که این مسئله اونقدرها هم نشدنی نیست و از آنجا که گوگل Lighthouse یک سرویس ارائه شده توسط خود گوگله، می‌تونه یک راه عالی برای دیدن وضعیت وب سایت باشه، اون هم به شکلی که گوگل اون رو مشاهده می‌کنه؛ چون این ابزار بعد از تجزیه و تحلیل شرایط سایت شما، توصیه‌هایی رو از جانب خود گوگل برای بهتر کردن اوضاع به شما ارائه میده. در واقع اگر گوگل رو مثل دریایی تاریک، الگوریتم‌های اون رو امواجی قدرتمند و شکننده و صاحبان وب سایت‌ها رو مثل ملوانان کشتی‌های گم شده در دل این دریای وسیع در نظر بگیریم، فانوس دریایی گوگل می‌تونه راهی سلامت و مطمئن رو برای نجات از غرق شدن در میان این امواج به ما نشون بده.
کاربرد google lighthouse چیست؟
شما به کمک ابزار google lighthouse می‌تونید سایت خودتون رو بررسی کنید و اگه ایرادی داره رفعش کنید. الگوریتم لایت هاوس با ارزیابی بخش‌های مختلف سایت به شما اطلاع میده که چه بخش‌هایی باید بهینه بشن تا در نهایت کیفیت کلی سایت بالا بره؛ به طور کلی لایت هاوس این موارد رو مورد بررسی قرار میده. استفاده از این ابزار به افراد سئو کار و افرادی که دارن آموزش سئو می‌بینن خیلی پیشنهاد میشه.
اجرا (Performance)
تجربه برتر (Best Practices)
دسترسی‌پذیری (Accessibility)
سئو (SEO)
وب اپلیکیشن پیش‌رونده (PWA)
چگونه از Google Lighthouse استفاده کنیم؟
روش‌های متعددی برای استفاده از Google Lighthouse وجود داره که ما در ادامه به 2 نمونه از آن‌ها اشاره خواهیم داشت:
روش اول:
در این روش شما می‌تونید با مراجعه به وب سایت مورد نظر و سپس فشردن دکمه F12 و یا راست کلیک بر روی صفحه و Inspect گرفتن ازش (Ctrl+Shift+I) پنجره‌ای مثل آنچه در تصویر زیر مشاهده می‌کنید (Developer Tools Panel) رو باز کرده و بر روی زبانه Lighthouse کلیک نمایید.
بعد از آن کافیست تا تیک هر کدام از فاکتورهای مورد نظر به جهت بررسی رو زده و با کلیک بر روی گزینه Generate Report منتظر بمونید تا فانوس دریایی گوگل نتایج به عمل آومده رو به شما نمایش بده.
روش دوم:
همونطور که پیش از این گفته شد، روش‌های متعددی برای انجام این تست وجود داره که یکی دیگه از راه‌های ساده انجام اون نصب افزونه گوگل Lighthouse بر روی مرورگر کروم است.
برای نصب افزونه لایت هاوس به آدرس yun.ir/pyqcy6 رفته و سپس مثل تصویر روی Add to Chrome کلیک کنید تا افزونه روی مرورگر شما نصب بشه.
بعد از نصب افزونه شما می‌تونید به صفحه هدف رفته و با کلیک بر روی افزونه لایت هاوس و سپس کلیک بر روی Generate Report صفحه مورد نظر رو ارزیابی کنید.
تصویر بخش لایت هاوس بر روی مرورگر
افزونه Lighthouse رو از وب استور گوگل نصب کنید
برای نصب افزونه به وب استور خود گوگل برید. بعد از نصب افزونه در هر صفحه دلخواه می‌تونید اون رو از گوشه بالا سمت راست اجرا کنید.
نکته: Google Lighthouse یک برنامه متن بازه. تغییرات و به‌روزرسانی‌های اعمال شده در این ابزار به مرور و شاید غیرهمزمان در ابزار Devtools مرورگر کروم (روش اول) و افزونه اون (روش دوم) اعمال بشن؛ پس به همین دلیل امکان داره گزارش این دو روش یکم با هم متفاوت باشن. الان داریم درمورد نسخه لایت هاوس 5.2.0 صحبت می‌کنیم.
ابزارهای واسطه
روش سوم یا ابزارهای واسطه همون گزارش Lighthouse رو پردازش می‌کنند و گزارش‌هایی در قالب نمودار، ارسال پیام دوره‌ای و… می‌سازند؛ برای مثال با ابزار foo.software می‌تونید به صورت دائم گزارش زمان‌بندی شده از وبسایت داشته باشید و در صورت بروز هرگونه افت توی عملکرد، اعلان‌های اون رو دریافت کنید.
استفاده از طریق خط فرمان یا اتصال به ماژولهای برنامه نویسی شده
در روش چهارم که مبتنی بر ماژولهای برنامه نویسی شده است، مدیران و کارشناسان می‌تونن نظارت دائم و خودکار روی وبسایت داشته باشند یا گزارش‌های شخصی‌سازی شده دریافت کنند.
گوگل lighthouse چه مواردی رو بررسی می‌کنه؟
این ابزار 4 مولفه مهم سایت رو بررسی می‌کنه:
1.اجرا (Performance)
این بخش شامل تحلیل سرعت سایت هست و صاحبان سایت می‌تونن ببینن که کاربران‌شون در چه مدت زمانی می‌تونن به محتوای سایت دسترسی پیدا کنند. بری آنالیز سرعت سایت 6 مولفه مهم توسط لایت هاوس مورد توجه قرار می‌گیره، این 6 مولفه عبارتند از:
First Contentful Paint
Speed Index
Largest Contentful Paint
Time to Interactive
Total Blocking Time
Cumulative Layout Shift
علاوه بر مواردی که گفته شد، ابزار google lighthouse نکاتی در جهت فشرده سازی عکس‌ها، عدم استفاده از تصاویر بزرگ، پایین نگه داشتن زمان پاسخ سرور، فشرده سازی کدهای css، استفاده از قالب‌های ویدیویی برای محتوای متحرک، استفاده از فرمت‌های جدید تصاویر به جای فرمت‌های قدیمی، عدم بارگیری افزونه‌های متعدد و ناکارآمد بر روی سایت و مواردی از این دست رو برای بهبود شرایط به شما ارائه میده. این بخش تحت عنوان “Opportunities” و “Diagnostics” به شما نمایش داده میشه.
۲- قابلیت دسترسی (Accessibility)
Accessibility به بررسی معیارهایی در رابطه با سطح کیفی طراحی وب سایت‌ها برای افراد معلول یا کم توان مثل اشخاص نابینا یا کم بینا، ناشنوا و به طور کلی افرادی که از سلامتی کامل برخوردار نیستند می‌پردازه؛ برای مثال برای سئو تصاویر، تگ alt به کار برده شده تا بتونه اون محتوای دیداری رو برای کاربران کم بینا هم توصیف کنه. قرار دادن متن‌های توصیفی در کنار محتوای صوتی به جهت دسترسی افراد ناشنوا و یا استفاده از توضیحات نوشتاری برای محتوای تصویری، عدم طراحی بسیار کوچک دکمه‌ها، عدم استفاده از فونت‌های بسیار ریز، تصحیح رنگ‌‌ها و به طور کلی بهینه سازی مناسب عناصر تشکیل دهنده صفحات به منظور برقراری تعامل هرچه راحت‌تر این افراد با صفحات وب سایت شما.
۳- بهترین اقدامات (Best Practices)
این بخش مربوط به مباحث امنیتی وب سایت هست و اطمینان حاصل می‌کنه که براساس استانداردهای روز توسعه یافته باشه. جنبه‌هایی که صاحبان وبسایت‌ها باید اون‌ها رو در نظر بگیرند تا بهترین تجربه ممکن رو برای کاربر رقم بزنند؛ به عنوان مثال، گوگل لایت هاوس در این بخش، بهره‌مندی از پروتکل‌های امنیتی SSL و TLS رو مورد ارزیابی قرار میده و بررسی می‌کنه که آیا منابع وبسایت از سورس‌های ایمن برخوردار هستند یا نه؟ همچنین از معیارهای دیگه‌ای برای سنجش استفاده می‌کنه مثل استفاده از HTTPS یا HTTP/2، ایمن بودن منابع مورد استفاده، میزان آسیب پذیر بودن وب سایت، جلوگیری از کپی پیست کردن پسوردها، استفاده از روش‌های امن به جهت لینک دادن و غیره.
۴- سئوی صفحات وب (SEO)
این بخش برای ارزیابی سئو سایت تعبیه شده و سطح وب سایت رو در نتایج موتورهای جستجو نشون میده. از اونجایی که گوگل لایت هاوس در واقع برای ارزیابی اپلیکیشن‌های پیش‌رونده تحت وب طراحی شده، بخش زیادی از تمرکز خودش رو روی بهینه سازی موتورهای جستجو برای دستگاه‌های تلفن همراه صرف می‌کنه.
در این آزمون، الگوریتم لایت هاوس به بررسی عوامل موثر در سئوی وب سایت می‌پردازه تا در صورت وجود مشکلات احتمالی در این زمینه، به شما پیشنهاداتی رو به جهت بهبود و ارتقای سئو ارائه بده. این عوامل عبارتند از:
آیا صفحات شما Mobile friendly است؟
آیا محتوای ایجاد شده در صفحات از عنوان برخوردار هست؟
آیا توضیحات متا (meta description) برای صفحات وجود داره؟
آیا در تولید محتوای متنی از فونت و اندازه قلم مناسب استفاده شده است؟
آیا برای صفحاتی با محتوای مشابه از تگ کنونیکال استفاده شده است؟
آیا دکمه‌ها از اندازه و یا فاصله مناسبی نسبت به یکدیگر برخوردارند؟
آیا در صفحات شما از محتوای مبتنی بر فرمت‌های غیرقابل ایندکس شدن توسط جستجوگرها استفاده شده است؟ (مانند flash و java)
آیا از تگ که در رابطه با مقیاس نمایش صفحات در مرورگرهای موبایل است در هدر سایت استفاده شده است؟
۵- وب اپلیکیشن‌های پیش‌رونده (Progressive Web App)
وب اپلیکیشن پیش رونده یا PWA به وب سایت‌هایی اطلاق میشه که همانند اپ‌های نصبی روی گوشی‌ها در بستر وب قابل استفاده هستند مانند وب سایت‌های Uber.com و Washingtonpost.com در واقع لایت هاوس هم در ابتدا به منظور سنجش معیارهایی در همین رابطه بوجود اومد و سپس برای بررسی سایر جوانب وب سایت‌ها گسترش پیدا کرد. در این بررسی عواملی مثل نحوه نمایش صفحات در موبایل‌ها و استفاده از تگ Viewport، تغییر HTTP به HTTPS، وضعیت بارگیری صفحات با اینترنت ضعیف (3G) و همچنین توانایی وب سایت در ارائه محتوا به صورت آفلاین رو مورد بررسی قرار میده.
اجرای گوگل لایت هاوس
همونطور که گفته شد این ابزار چهار مولفه مهم سایت رو بررسی می‌کنه. در ادامه قراره گزارش performance و seo رو به طور کامل براتون شرح بدیم.
Performance گوگل لایت هاوس
گزینه‌های مهم این بخش به شرح زیر هست:
First contentful Paint: به مدت زمانی که طول می‌کشه که یک سایت لود بشه میگن FCP. هرچقدر این مدت زمان کمتر باشه سرعت نمایش سایت بیشتر خواهد بود.
Time to Interactive: مدت زمانی که طول می‌کشه تا تمام بخش‌های سایت از جمله دکمه‌ها ، ورودی‌ها و… برای تعامل با کاربر کاملا لود بشه و بتونه به ورودی کاربران پاسخ بده. این مقدار هم هرچقدر کمتر باشه بهتره.
Speed Index: سرعت بارگذاری محتوا در طول بارگذاری Speed Index محسوب میشه که این مقدار هر چقدر کمتر باشه بهتره. طبق پیشنهاد گوگل این زمان باید کمتر از 1250 میلی ثانیه باشه.
Largest Contentful Paint: مدت زمان بارگذاری حجیم‌ترین تصویر یا ترجمه بلوک متنی صفحه به LCP معروفه.
Time to Interactive: مدت زمانی که صفحه به طور کامل بارگذاری شده و کاربران می‌تونن باهاش تعامل کامل داشته باشند.
Total Blocking Time: کل مدت زمانی هست که صفحه مسدود شده و امکان تعامل کاربر با صفحه وجود نداره.
Cumulative Layout Shift: مقدار محتوایی که بعد از رندر شدن یک صفحه، در اون صفحه در حرکت هست.
Opportunities: گزینه‌هایی که با بهینه سازی اون‌ها می‌تونید سرعت بارگذاری صفحه خودتون رو بیشتر کنید. کارهایی مثل حذف cssهایی که ازشون استفاده نمیشه، فشرده سازی تصاویر و فشرده سازی متن از این موارد محسوب میشه.
Diagnostics: اطلاعات بیشتری در مورد عملکرد سایت شما در اختیارتون میزاره. توجه داشته باشید که این اعداد به طور مستقیم روی نمره عملکرد تأثیر نمیزارن.
در ادامه به بررسی چند مورد از موارد مهم Opportunities و Diagnostic می‌پردازیم.
Deffer of screen images
کاربر برای نمایش این بخش باید حتما عملی مثل کلیک روی یک دکمه یا اسکرول کردن صفحه رو انجام بده. برای بارگذاری تصاویر در این بخش‌ها می‌تونید از روش lazy load استفاده کنید.
Properly size images
در این بخش اندازه تصاویر ارائه شده با اندازه واقعی تصاویر بارگذاری شده مقایسه میشه. اگر اختلاف حجم تصاویر مقایسه شده بیشتر از ۲۵ کیلوبایت باشه توی آزمون رد میشن.
همیشه توصیه میشه تصاویر آپلود شده در اندازه مورد نیاز باشند. توی اکثر سیستم‌های مدیریت وبسایت مثل وردپرس و قالب‌های ریسپانسیو (Responsive) تصویر آپلود شده از بخش مدیریت به چند فایل با اندازه‌های مورد نیاز تبدیل میشه.
Efficiently encode images
تصاویر توی فضای وب باید حجم کمی داشته باشند. با انواع روش‌های کاهش حجم تصاویر مثل Save for web در فتوشاپ یا ابزارهای آنلاین مثل tinypng می‌تونید حجم تصاویر رو به حداقل برسونید.
Serve images in next-gen formats
از نظر Lighthouse فرمت‌های تصویری JPEG 2000، JPEG XR و WebP بهتر از فرمت‌های JPEG و PNG هستند. این فرمت‌ها نسبت به قدیمی‌ها تصویر رو بهتر فشرده می‌کنند و بارگذاری سریع‌تری هم دارند.
Serve static assets with an efficient cache policy
زمانی که یک صفحه برای کاربر یک بار باز شده، سری بعدی که کاربر می‌خواد به اون صفحه سر بزنه، صفحه با سرعت بالاتری براش لود میشه؛ چرا که اون صفحه یک بار قبلا لود شده.
Minify CSS
کدهایی که در سایت هستن می‌تونن کوچک‌‌تر یا فشرده‌‌تر بشن. از جمله کدهای مهمی که بهتره فشرده سازی بشن، کدهای css هستن. این فایل برای بارگذاری هر صفحه باید دریافت و پردازش بشه. هرچقدر از حجم فایل کم بشه سرعت بارگذاری سایت بیشتر میشه.
Ensure text remains visible during webfont loads
بعضی اوقات تاخیر در دریافت فونت نوشتار توسط مرورگر رخ میده و برای اینکه این اتفاق نیفته لازمه که شما با استفاده از یک قطعه کد به گوگل اعلام کنید که حالتی رو ایجاد کنه که نوشته با فونت موجود در سیستم لود بشه و بعد از اینکه فایل فونت توسط مرورگر دریافت شد، فونت نوشته‌ها تغییر پیدا کنه.
گزارش سئو در Lighthouse
گزارش لایت هاوس درباره سئو، شامل یک چک لیست از اصول اولیه‌ای هست که هر سایتی نیاز داره که اون‌ها رو رعایت کنه.
Document doesn’t have a <title> element
عنوان در هر صفحه باید مشخص باشه و داشتن عنوان مناسب و مرتبط با محتوا یکی از اصول مهم در مبحث تولید محتوا محسوب میشه.
Document does not have a meta description
توضیحات متا چکیده‌ای از محتوای سایت هست که در زیر بخش عنوان در نتایج جستجوی گوگل دیده میشه. توضیحات متا و عنوان بخش‌های مهمی هستند که کاربر قبل از ورودش به سایت اون‌ها رو بررسی می‌کنه؛ پس وجودشون الزامی هست.
Links do not have descriptive text
متن لینک یا انکر تکست به کلمات یا کارکترهایی در متن میگن که به لینک یا متنی دیگه لینک میشن. این نوشته به کاربر و موتورهای جستجو کمک می‌کنه که محتوای لینک مقصد رو بفهمن. انتخاب انکر تکست خیلی مهمه و اگر متنش توضیح خوبی برای مقصد لینک نباشه در گزارش Lighthouse به عنوان لینک‌های بدون توضیح مشخص میشه.
Document doesn’t have a valid hreflang
کاربرد لینک‌های hreflang زمانی هست که یک سایت چند زبانه هست و برای این که موتورهای جستجو متوجه یکسان بودن محتوا بشه و محتوای مناسب رو به کاربر نشون بده باید از لینک‌های hreflang استفاده کنند.
توجه کنید که این نوع لینک در کدهای HTML جای می‌گیره و توی صفحه دیده نمیشه. نکته مهم دیگه اینه که استفاده از hreflang با زبان تعیین شده در حالتی مفیده که وب سایت کاربر رو با توجه به زبان سیستم یا آی پی به زبان مورد نظر هدایت می‌کنه. این انتقال معمولاً توسط ریدایرکت به صفحه انجام میشه و نسخه‌های چند زبانه از هر صفحه در موتورهای جستجو ایندکس شده هستند.
Document does not have a valid rel=canonical
اگر در یک وب سایت چند صفحه با محتوای یکسان وجود داشته باشن، موتورهای جستجو صفحات رو با محتوای تکراری تشخیص میدن و به اصطلاح کنیبالیزیشن اتفاق می‌افته. اگر از تگ canonical استفاده نشه گوگل هیچ کدوم از صفحات رو بررسی نمی‌کنه. کاربرد این تگ اینجوریه که زمانی که محتوای مشابه وجود داشته باشه این تگ در صفحه قرار می‌گیره و گوگل اون محتوایی رو ایندکس می‌کنه که در این تگ قرار داده شده. با کمک این تگ میشه به موتورهای جستجو اعلام کرد که کدوم نسخه رو اصلی در نظر بگیرند و به کاربران معرفی کنند.
اگر این تگ به خوبی ساختاربندی نشده باشه مشکلاتی مثل موارد زیر رو به وجود میاره.
- بیش از یک لینک canonical پیدا بشه.
- آدرس مشخص شده معتبر نباشه.
- لینک مشخص شده مربوط به زبان یا منطقه دیگه‌ای باشه
- به دامنه (domain) دیگه‌ای اشاره کنه.
Page has unsuccessful HTTP status code
هر درخواستی که از سمت کاربر به سرور ارسال میشه در ابتدا با یک کد سه رقمی پاسخ داده میشه. این اعداد کد وضعیت HTTP نام دارند. کدهای سری ۴۰۰ و ۵۰۰ اعلام کننده خطا هستند. کد ۴۰۴ که یکی از موارد مشهور است نشانگر این هست که صفحه یا منبع وجود نداره. توجه به این بخش از این نظر مهمه که اگر ربات موتورهای جستجو در هنگام بررسی صفحه‌های یک وبسایت با این ارورها مواجه بشه به احتمال زیاد اون صفحه رو ایندکس نمی‌کنه و در نتایج جستجو هم نشونش نمیده.
Page is blocked from indexing
از این کد زمانی استفاده میشه که مدیر سایت قصد نداره صفحه‌ای توسط موتورهای جستجو ایندکس بشه و در جستجوهای کاربران قابل مشاهده باشه؛ پس با کدهای noindex این موضوع رو به گوگل اعلام می‌کنه.
robots.txt is not valid
در همۀ سایت‌ها فایلی به نام وجود دارد که وظیفه فایل robots.txt اعلام بخش‌های قابل دستیابی به ربات موتورهای جستجو هست. ربات‌هایی که قصد بررسی وبسایت رو دارند، در ابتدا این فایل رو بررسی می‌کنند که بدونن نباید وارد کدوم بخش‌ها بشن.
Document uses plugins
استفاده از محتواهای مبتنی بر فلش، جاوا یا هر نوع فایل دیگه‌ای که برای موتورهای جستجو قابل ایندکس شدن نیست توصیه نمیشه. این نوع محتواهای مبتنی بر افزونه‌ها در مرورگرهای جدید پشتیبانی نمی‌شوند و در نتیجه کاربران نمی‌تونن اون‌ها رو ببینن.
عناصر این نوع محتواها در آزمون لایت هاوس شناسایی و اعلام میشن. بهتره اون‌ها رو از وبسایت خودتون حذف کنید.