آموزش ابزار Google lighthouse [آموزش تصویری]

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

گوگل لایت هاوس (Google Lighthouse) چیست؟

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

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

• عملکرد و کارایی (Performance)
• دسترس‌پذیری (Accessibility)
• بهترین شیوه‌ها (Best Practices)
• شاخص‌های سئو (SEO)
• وب اپلیکیشن پیش‌رونده (Progressive Web App یا PWA)

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

تفاوت Lighthouse با Core Web Vitals چیست؟

به نقل از سایت: تریبون

اهمیت زیاد گوگل به تجربه کاربری باعث شد تا در ژوئن سال ۲۰۲۱، مفهومی به نام «Core web vitals» به یکی از فاکتورهای اصلی رتبه‌بندی سایت‌ تبدیل شود.

 این معیارها شامل Largest Contentful Paint (LCP)، First Input Delay (FID) و Cumulative Layout Shift (CLS) هستند و نقش بسیار مهمی در ارزیابی عملکرد سایت دارند. در واقع، این سه معیار بیش از ۷۰ درصد از امتیاز کلی عملکرد سایت را در گزارش‌های ابزار Google Lighthouse تشکیل می‌دهند. با این حال، باید توجه داشته باشید که ابزار Lighthouse عملکرد سایت را در شرایط آزمایشی و شبیه‌سازی شده ارزیابی می‌کند. بنابراین، نتایج Core Web Vitals در Lighthouse ممکن است با نتایج سایر ابزارهای اندازه‌گیری متفاوت باشد.

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

چرا گزارش‌های Lighthouse با گزارش‌های سرچ کنسول همخوانی ندارند؟

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

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

دلیل این اختلاف مشابه با تفاوت در گزارش‌های Core Web Vitals است؛ زیرا گزارش‌های Lighthouse در یک محیط کنترل‌شده و شبیه‌سازی‌شده انجام می‌شود و نمی‌تواند بازتاب دقیقی از تجربه کاربری واقعی باشد. این تفاوت‌ها کاملاً طبیعی است و ناشی از متریک‌های متفاوت و روش‌های اندازه‌گیری مختلف است. به همین دلیل، توصیه می‌شود برای ارزیابی دقیق‌تر عملکرد سایت از هر دو ابزار استفاده کنید، اما ابتدا از گزارش‌های Chrome شروع کنید تا مشکلات تاثیرگذار بر تجربه کاربری را شناسایی کنید.

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

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

امتیازهای ابزار Google Lighthouse یکی از معیارهای مهم برای ارزیابی عملکرد و بهینه‌سازی سایت به شمار می‌روند. یکی از چالش‌های رایج در استفاده از این ابزار، تغییر مداوم امتیازها با هر بار تست است که باعث می‌شود وبمستران در انتخاب داده‌های دقیق و قابل اعتماد سردرگم شوند. جالب است بدانید که گوگل خود مشکل تغییرپذیری امتیازهای Lighthouse را تایید می‌کند و می‌گوید: «اطلاعاتی که در گزارش عملکرد ابزار Lighthouse ارائه می‌شود، حتی اگر شما تغییری در کدهای سایت خود ایجاد نکرده باشید، به دلیل تنوع در فناوری‌های وب و شبکه تغییر خواهند کرد.»

چندین عامل می‌تواند بر نتایج گزارش Lighthouse تاثیرگذار باشد، که عبارتند از:

• نسخه مرورگر
• نوع سخت‌افزار کاربر
• تاخیر و سرعت شبکه (پهنای باند)
• فاصله و مکان کاربر
• نسخه ابزار Lighthouse
• تغییرپذیری شبکه محلی
• تنوع شبکه Tier-1
• تغییرپذیری وب سرور
• سخت‌افزار دستگاه کاربر
• زمان لود منابع کاربر
• تنظیم سرعت پردازش

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

فاکتورهای مورد بررسی ابزار Lighthouse چیست؟

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

پیشنهاد می‌کنم سری هم به مقاله TBT چیست از مهام بزنید.

بررسی گزارش بخش Performance لایت هاوس

در بخش عملکرد (Performance) ابزار Lighthouse، اطلاعات مرتبط با تجربه کاربری و سرعت بارگذاری سایت ارائه می‌شود. با بررسی این گزارش، می‌توان متوجه شد که یک کاربر چقدر باید برای بارگذاری صفحات سایت منتظر بماند. نتایج این گزارش به دلیل ارتباط مستقیم با تجربه کاربری، به معیارهای Core Web Vitals نزدیک است. در ادامه، شش فاکتور اصلی در گزارش عملکرد (Performance) و راه‌های بهینه‌سازی آن‌ها را بررسی خواهیم کرد:

• معیار Largest Contentful Paint (LCP):
  بزرگ‌ترین ترسیم محتوایی صفحه یا LCP به زمانی گفته می‌شود که بزرگ‌ترین تصویر یا بلوک متنی در صفحه برای کاربر قابل مشاهده می‌شود. طبق گزارش سایت web.dev، زمان این معیار باید کمتر از ۲.۵ ثانیه باشد تا بتوانید امتیاز خوبی (رنگ سبز) دریافت کنید.

دلایل رایج افزایش زمان LCP + همراه با راه‌حل

• زمان پایین پاسخگویی سرور

• • کاربران را به یک CDN نزدیک‌تر هدایت کنید.
  • استفاده از کش سرور
  • از Cache-First در صفحات HTML استفاده کنید.
  • از Signed Exchanges استفاده کنید.

• مسدود‌کردن رندر جاوا اسکریپت و CSS

• • فایل‌های جاوا اسکریپت و CSS را کوچک و فشرده کنید.
  • اسکریپت‌ها و CSS‌های غیرضروری را به تعویق بیاندازید.
  • از CSSهای ضروری به‌صورت این‌لاین (inline) استفاده کنید.

• زمان کند بارگذاری منابع

• • از تکنیک Preload برای منابع ضروری و مهم استفاده کنید.
  • تصاویر را بهینه و فشرده‌سازی کنید.

• مشکل رندرگیری سمت کاربر

• • جاوا اسکریپت‌های ضروری خود را به حداقل برسانید.
  • از تکنیک رندر Server-side استفاده کنید.

معیار Total Blocking Time یا TBT

TBT زمان بین First Contentful Paint و Time to Interactive را اندازه‌گیری می‌کند. در این بازه زمانی، صفحه به‌طور کامل مسدود است و کاربر نمی‌تواند روی هیچ عنصری از صفحه کلیک کند یا ضربه بزند. طبق جدول زیر، اگر مدت زمان TBT سایت زیر ۲۰۰ میلی‌ثانیه (معادل ۰/۲ ثانیه) باشد، عملکرد سایت شما خوب (رنگ سبز) ارزیابی می‌شود. معمولاً کد جاوا اسکریپت سنگین باعث افزایش مدت زمان TBT می‌شود.

پیشنهاد می‌کنم سری هم به مقاله نرخ کلیک (CTR) از مهام بزنید.

نکته برای بالا بردن سرعت سایت خود حتما به صفحه چگونه سرعت سایت خود را بهینه کنیم سر بزنید.

چگونه TBT را کاهش دهیم؟

• کاهش تأثیر کد Third-Party
• کاهش زمان اجرای جاوا اسکریپت
• پیش‌بارگذاری درخواست‌های DNS
• استفاده از فشرده‌سازی GZIP
• کوچک‌کردن فایل‌های CSS
• کاهش زمان پاسخگویی سرور به اولین بایت (TTFB چیست؟)
• کاهش CSS و جاوا اسکریپت‌های غیرضروری

معیار First Contentful Paint یا FCP

First Contentful Paint یا اولین ترسیم محتوایی به مدت زمانی گفته می‌شود که اولین عنصر متنی یا تصویری صفحه برای کاربر بارگذاری و نمایش داده می‌شود. طبق گزارش سایت web.dev، مدت زمان این معیار باید کمتر از ۱/۸ ثانیه باشد تا بتوانید امتیاز خوبی (رنگ سبز) در این بخش دریافت کنید.

نکته: امتیاز FCP اغلب تحت تاثیر زمان بارگذاری فونت قرار می‌گیرد و بهتر است نحوه استفاده از فونت‌ها در سایت بهینه شود.

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

معیار Speed Index

Speed Index یا SI سرعت بارگذاری محتوا در صفحه را محاسبه می‌کند. این معیار با تحلیل فرآیندهای بصری بین فریم‌ها و استفاده از ماژول Speedline Node.js، امتیاز سرعت را اندازه‌گیری می‌کند. بهترین عملکرد سایت زمانی است که سرعت این شاخص کمتر از ۳/۴ ثانیه باشد. نحوه امتیازدهی به شاخص Speed Index در جدول زیر آمده است:

چگونه شاخص SI را بهبود دهیم؟

• تبدیل فایل‌های بزرگ و سنگین جاوا اسکریپت به قسمت‌های کوچکتر و بهینه
• کاهش مدت زمان اجرای فایل‌های جاوا اسکریپت
• حذف فایل‌های اضافی جاوا اسکریپت
• کاهش کدهای بارگذاری‌شده از منابع خارجی
• کاهش زمان اجرای فایل‌های جاوا اسکریپت

معیار Time to Interactive یا TTI

متریک TTI به مدت زمانی گفته می‌شود که سایت شما به‌طور کامل بارگذاری شده و آماده تعامل با کاربر باشد. در این مدت، تمام عناصر بصری صفحه (FCP) باید به مخاطب نمایش داده شده باشند، تمامی ایونت‌های ثبت‌شده باید اجرا شده و سایت باید در کمتر از ۵۰ میلی‌ثانیه به تعامل کاربر با صفحه پاسخ دهد. اگر TTI سایت شما کمتر از ۳/۸ ثانیه باشد، به این معناست که عملکرد سایت (رنگ سبز) شما عالی است. نحوه امتیازدهی به این بخش در جدول زیر آمده است:

معیار Cumulative Layout Shift یا CLS

برخلاف سایر پارامترها که بر زمان و سرعت بارگذاری صفحه تمرکز دارند، CLS معیاری است که به تجربه کاربر و تعامل او با صفحه اشاره می‌کند. CLS میزان تغییرات ناگهانی در چیدمان صفحه را در زمان بارگذاری اندازه‌گیری می‌کند. این تغییرات می‌توانند شامل جابجایی فونت‌ها، تصاویر، ویدئوها و دیگر اجزای صفحه باشند که ممکن است برای کاربر آزاردهنده باشد. امتیاز خوب برای CLS زمانی است که این مقدار کمتر از ۰/۱ باشد.

پیشنهادهای لایت هاوس برای بهبود گزارش Performance

پرهیز از تکنیک Lazy Loading در قسمت Above the Fold صفحه

نام خطا: Defer offscreen images
زمانی که کاربر باید سایت را اسکرول کند تا بخش‌های مختلف صفحه را ببیند، بهتر است از بارگذاری و نمایش فایل‌های غیرضروری جلوگیری شود. بخش‌هایی از سایت که در ابتدا نمایش داده نمی‌شوند و نیاز به اسکرول دارند، Offscreen نامیده می‌شوند. برای این بخش‌ها می‌توان از تکنیک بارگذاری با تاخیر (Lazy Loading) استفاده کرد تا تصاویر فقط زمانی که کاربر به آن‌ها دسترسی پیدا می‌کند، بارگذاری شوند.

تنظیم اندازه تصاویر

نام خطا: Properly size images
این خطا به تفاوت میان اندازه تصاویر نمایش داده شده و اندازه واقعی آن‌ها اشاره دارد. اگر برای نمایش یک تصویر با ابعاد ۴۰۰ * ۱۸۰ پیکسل نیاز دارید، اما تصویری با ابعاد ۲۴۰۰ * ۱۳۵۰ پیکسل بارگذاری کنید، مرورگر ابتدا تصویر بزرگتر را دریافت کرده و آن را به ابعاد کوچک‌تر نمایش می‌دهد. این خطا زمانی گزارش می‌شود که اختلاف حجم تصاویر بیش از ۲۵ کیلوبایت باشد. برای جلوگیری از این خطا، بهتر است از تصاویر با اندازه‌های مناسب برای نمایش استفاده کنید.

کوچک‌کردن فایل‌های CSS

نام خطا: Minify CSS File
فایل‌های CSS که استایل‌ها و مشخصات ظاهری صفحات سایت را شامل می‌شوند، تاثیر زیادی در سرعت بارگذاری صفحات دارند. این فایل‌ها برای هر صفحه باید دریافت و پردازش شوند، بنابراین هرچه فایل‌های CSS کم‌حجم‌تر باشند، سرعت پردازش آن‌ها کمتر و در نتیجه سرعت بارگذاری سایت بیشتر خواهد شد.

کوچک‌کردن فایل‌های جاوا اسکریپت

نام خطا: Minify JavaScript File
جاوا اسکریپت امکانات پیچیده‌ای را برای تعامل کاربر با صفحه فراهم می‌کند و تاثیر زیادی بر سرعت سایت دارد. این کدها باید مانند فایل‌های CSS کوچک و فشرده شوند. برای فشرده‌سازی فایل‌های جاوا اسکریپت می‌توان از فرمت‌های فشرده‌سازی مانند Gzip استفاده کرد.

استفاده از ویدئو به جای فرمت GIF

نام خطا: Use video formats for animated content
فایل‌های GIF که حجم زیادی دارند، باعث کند شدن زمان بارگذاری صفحه می‌شوند. به همین دلیل بهتر است از فرمت‌های ویدئویی مانند mp4 یا WebM به جای GIF استفاده کنید. حتی می‌توانید از برنامه‌هایی استفاده کنید که تصاویر GIF را به ویدئوهای HTML5 تبدیل می‌کنند.

حذف منابع مسدودکننده رندر

نام خطا: Eliminate render-blocking resources
منابع مسدودکننده رندر، کدهایی از فایل‌های CSS و جاوا اسکریپت هستند که مانع بارگذاری سریع صفحه می‌شوند. پردازش این منابع معمولاً زمان زیادی می‌برد و باعث کاهش سرعت سایت می‌شود. حذف این منابع می‌تواند به طور قابل توجهی سرعت بارگذاری صفحات سایت را افزایش دهد.

فعال‌کردن فشرده‌سازی متن صفحات

نام خطا: Enable text compression
تمام منابع متنی صفحات باید فشرده شوند تا میزان داده‌های منتقل شده از طریق شبکه کاهش یابد. در ابزار لایت هاوس می‌توانید فهرست کامل منابع متنی که فشرده نشده‌اند را مشاهده کنید. فشرده‌سازی این منابع در تنظیمات سرور انجام می‌شود.

استفاده از Preconnect یا اتصال زودهنگام

نام خطا: Preconnect to required origins
زمانی که یک صفحه برای بارگذاری نیاز به دریافت منابع از سرورهای مختلفی مانند فونت، تصویر، ویدئو و غیره دارد، ممکن است برای هر سرور درخواست جداگانه‌ای ارسال شود. برای مثال، اگر یک ویدئو از سایت آپارات و یک ویدئو از یوتیوب بارگذاری شود، مرورگر باید به هر یک از این سرورها درخواست ارسال کند. برای حل این مشکل، می‌توان از دستور Preconnect استفاده کرد تا فرآیند اتصال به سرورها پیش از رسیدن به کدهای مربوطه آغاز شود. این دستور به مرورگر کمک می‌کند که قبل از درخواست‌های لازم، فرایند DNS lookup و اتصال اولیه به سرور انجام شود.

کاهش زمان پاسخگویی سرور

نام خطا: Reduce initial server response time
هرچه زمان پاسخگویی سرور به درخواست‌ها سریع‌تر باشد، زمان بارگذاری صفحات کاهش پیدا می‌کند. عواملی مانند قدرت سخت‌افزاری سرور و حجم داده‌هایی که باید پردازش شوند، روی زمان پاسخگویی تأثیرگذار هستند. برای کاهش این زمان توصیه می‌شود از CDN استفاده کنید و سرور سایت خود را به سرویس‌های با سرعت بالاتر ارتقا دهید.

کاهش کدهای شخص ثالث

نام خطا: Reduce the impact of third-party code
یکی از خطاهای رایج در ابزار لایت هاوس، کاهش تأثیر کدهای شخص ثالث است. این کدها معمولاً از منابع خارجی (Third-party) مانند گوگل آنالیتیکس یا ابزارهای مشابه استفاده می‌کنند. این کدها ممکن است باعث کندی عملکرد سایت شوند. برای بهینه‌سازی کدهای شخص ثالث، می‌توانید از تکنیک‌های زیر استفاده کنید:

• پیاده‌سازی ویژگی‌های async و defer در اسکریپت‌ها
• اجتناب از استفاده از متد document.write() در اسکریپت‌های شخص ثالث
• استفاده از تکنیک Preconnect برای اتصال زودهنگام به سرورهای شخص ثالث
• حذف اسکریپت‌های اضافی و غیرضروری

جلوگیری از انباشت بیش از حد اشیاء در صفحه

نام خطا: Avoid an excessive DOM size
یک سایت از بخش‌هایی مانند تصاویر، فرم‌ها، جدول‌ها و عناصر مختلف تشکیل می‌شود که به وسیله ساختار درختی DOM اجرا می‌شود. در گزارش لایت هاوس، تعداد کل عناصر DOM محاسبه می‌شود و اگر تعداد این عناصر بیش از حد باشد، این خطا به نمایش در می‌آید. برای بهبود عملکرد سایت، توصیه می‌شود تعداد کل عناصر DOM از ۱۵۰۰ عدد بیشتر نشود.

کاهش CSSهای اضافی

نام خطا: Reduce unused CSS
معمولاً در فایل‌های CSS، کدهایی وجود دارند که برای بارگذاری صفحه ضروری نیستند و فقط حجم فایل را افزایش می‌دهند. این کدهای اضافی زمان پردازش فایل را بالا می‌برند و بر سرعت بارگذاری تاثیر منفی می‌گذارند. بنابراین، باید این کدهای غیرضروری را حذف کنید. برای سایت‌های وردپرسی، نصب افزونه‌هایی مانند wp-rocket به حذف کدهای CSS بی‌استفاده کمک می‌کند.

کاهش زمان اجرای جاوا اسکریپت

نام خطا: Reduce JavaScript execution time
زمانی که اجرای کدهای جاوا اسکریپت طولانی باشد، صفحه با سرعت کمتری برای کاربر بارگذاری می‌شود. برای کاهش این زمان، می‌توان از تکنیک‌هایی مانند code-splitting، کش کردن، فشرده‌سازی و حذف کدهای غیرضروری استفاده کرد. این اقدامات به بهبود سرعت سایت کمک می‌کنند.

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

نام خطا: Keep request counts low and transfer sizes small
در گزارش لایت هاوس می‌توانید متوجه شوید که در هنگام بارگذاری یک صفحه، چه تعداد درخواست ارسال می‌شود و حجم داده‌های منتقل‌شده چقدر است. این خطا نشان می‌دهد که تعداد درخواست یا حجم فایل داده‌ها بسیار زیاد است. گوگل برای رفع این خطا توصیه می‌کند مشکلات مرتبط با Image، Script، Font، Stylesheet Document و Media را در صفحه برطرف کنید.

جلوگیری از بارگذاری اطلاعات زیاد

نام خطا: Avoid enormous network payloads
زمانی که ابزار لایت هاوس خطای Avoid Enormous Network Payloads را در گزارش عملکرد سایت نمایش می‌دهد، یعنی حجم داده‌های صفحه سایت شما بیش از حد مجاز است. گوگل توصیه می‌کند حجم کل داده‌های سایت در بارگذاری اولیه نباید بیشتر از ۱۶۰۰ کیلوبایت باشد. بنابراین برای رفع این خطا، باید حجم صفحه را به زیر ۱۶۰۰ کیلوبایت کاهش دهید. با بهینه‌سازی حجم فایل‌های CSS و جاوا اسکریپت و استفاده از فرمت WebP برای تصاویر، می‌توانید به کاهش حجم صفحات سایت کمک کنید.

جلوگیری از ریدایرکت‌های زنجیره‌ای در سایت

نام خطا: Avoid multiple page redirects
ریدایرکت‌های صفحات باعث ایجاد تاخیر در زمان بارگذاری سایت می‌شوند، چرا که در فرایند ریدایرکت، مرورگر باید به آدرس اصلی مراجعه کرده و آدرس جدید را دریافت کند. اگر تعداد ریدایرکت‌ها زیاد باشد، این ممکن است اختلالاتی در بارگذاری صفحات ایجاد کند. بنابراین گوگل توصیه می‌کند مسیر ریدایرکت‌ها را مجدد بررسی کرده و تعداد آن‌ها را کاهش دهید.

کاهش حجم تصاویر

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

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

ذخیره تصاویر با فرمت‌های جدید

نام خطا: Serve images in next-gen formats
استفاده از فرمت‌های جدید برای تصاویر در نسخه جدید Lighthouse اهمیت ویژه‌ای دارد. برای مثال، فرمت WebP که هنوز در بین سایت‌ها زیاد متداول نشده است، به شما این امکان را می‌دهد که تصاویری با حجم پایین، کیفیت مناسب و شفافیت بالا داشته باشید. فرمت‌های جدید JPEG 2000، JPEG XR و WebP علاوه بر اینکه تاثیر قابل توجهی در کاهش حجم تصاویر دارند، می‌توانند حجم کلی صفحات سایت را نیز کاهش دهند. برای تبدیل فرمت تصاویر به WebP در سایت‌های وردپرسی، می‌توانید از افزونه‌های Autoptimize یا Smush Image استفاده کنید.

کش‌کردن عناصر ثابت صفحه

نام خطا: Serve static assets with an efficient cache policy
اگر فایل‌های ثابت یا استاتیک سایت مانند فایل‌های CSS، لوگوها، تصاویر گرافیکی و … به‌ندرت تغییر می‌کنند، بهتر است از قابلیت کش سایت استفاده کنید و تاریخ انقضای کش را بین ۶ ماه تا یک سال تنظیم کنید. زمانی که فایل‌های استاتیک صفحات را به‌عنوان محتوای قابل کش‌شدن به مرورگر معرفی کنید، مرورگر فایل‌ها را در لوکال خود ذخیره می‌کند و صفحات با سرعت بیشتری لود خواهند شد.

بررسی گزارش بخش Accessibility لایت هاوس

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

پیشنهادهای لایت هاوس برای بهبود گزارش Accessibility:

• استفاده از توضیحات و تگ ALT برای تصاویر
• استفاده از هدینگ‌ها برای ایجاد ساختار درست محتوا
• استفاده از سایز و ضخامت مناسب برای فونت محتواهای صفحات
• رعایت کنتراست رنگی بین محتوای صفحه و پس‌زمینه
• قابل تشخیص بودن عناصر صفحه برای ابزارهای صفحه‌خوان (screen reader)
• قابلیت کلیک تمام دکمه‌ها
• اجتناب از استفاده از بنرهای متحرک آزاردهنده
• مطمئن شدن از خوانایی و نبود مشکلات گرامری در محتواهای صفحه

بررسی گزارش Best Practices لایت هاوس

گزارش Best Practices به شما کمک می‌کند تا امنیت سایت خود را افزایش دهید و از مشکلاتی مطلع شوید که ممکن است دسترسی کاربران به سایت شما را دشوار کنند. برای مثال، استفاده از HTTPS، بررسی لینک‌های خروجی، و اطمینان از به‌روزبودن کتابخانه‌های جاوا اسکریپت از جمله مواردی هستند که در این بخش به شما گزارش می‌شوند.

پیشنهادهای لایت هاوس برای بهبود گزارش Best Practices:

• اطمینان از اجرای درست استراکچر دیتاها در صفحات
  استفاده از استراکچر دیتا به گوگل کمک می‌کند تا محتوای هر بخش را بهتر درک کند. در صورت وجود مشکل در پیاده‌سازی استراکچر دیتا و عدم توانایی گوگل برای شناسایی آن، این خطا به‌عنوان مشکل در گزارش لایت هاوس نمایش داده می‌شود.
• نمایش ابعاد درست تصاویر
  اگر نسبت ابعاد تصویر در صفحه با ابعاد اصلی آن تفاوت زیادی داشته باشد (بیش از ۵٪)، این خطا در گزارش Lighthouse به شما نمایش داده خواهد شد. این مورد باعث می‌شود تصویر غیرواضح و نامناسب دیده شود.
• استفاده از پروتکل HTTP/2 برای تمام منابع سرور
  این خطا توصیه می‌کند از نسخه HTTP/2 به جای HTTP/1.1 در سرور استفاده کنید. زیرا HTTP/2 سرعت بارگذاری صفحات را افزایش می‌دهد و تجربه کاربری بهتری را فراهم می‌کند.
• استفاده از HTTPS
  سایت‌ها باید از پروتکل ایمن HTTPS استفاده کنند تا ارتباطات کاربران با سرور به‌صورت ایمن منتقل شود.
• ایمن‌سازی لینک‌سازی سایت
  زمانی که با ویژگی target=”_blank” به سایت دیگری لینک می‌دهید، باید از صفت‌های rel=”noopener” یا rel=”noreferrer” استفاده کنید. این ویژگی‌ها از اجرای کدهای جاوا اسکریپت مخرب یا انتقال ناخواسته اطلاعات جلوگیری می‌کنند.
• حذف درخواست موقعیت جغرافیایی کاربر در زمان لود صفحه
  درخواست‌های لوکیشن باید پس از بارگذاری صفحه و نه در هنگام بارگذاری آن، از کاربر خواسته شوند تا از اختلال در تجربه کاربری جلوگیری شود.
• حذف درخواست ارسال اعلان به کاربر در زمان لود صفحه
  درخواست‌های اعلان باید به محض بارگذاری صفحه ارسال نشوند. به‌جای آن، بهتر است درخواست‌ها با تأخیر و پس از تعامل کاربر ارسال شوند.
• فعال‌سازی Passive Event Listeners
  استفاده از Passive Event Listeners به‌ویژه در زمان اسکرول صفحه می‌تواند عملکرد را بهبود دهد و از مسدود شدن تعامل کاربر تا بارگذاری کامل صفحه جلوگیری کند.
• مشخص‌کردن صفحه HTML با دستورالعمل Doctype
  استفاده از دستورالعمل <!DOCTYPE html> برای مشخص کردن نوع سند HTML ضروری است. در صورت عدم استفاده از آن، مرورگر در حالت “quirks” قرار می‌گیرد و صفحه را به‌طور غیر استاندارد بارگذاری می‌کند.

بررسی گزارش SEO لایت هاوس

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

پیشنهادات لایت هاوس برای بهبود گزارش SEO:

• استفاده از تگ عنوان (Title Tag) در صفحه
  نام خطا: Document doesn’t have a <title> element
  تگ <title> یکی از مهم‌ترین تگ‌ها برای سئو است که به موتورهای جستجو کمک می‌کند تا محتوای صفحه را شناسایی کنند. اگر صفحه‌ای این تگ را نداشته باشد، باید برای آن تگ <title> را تعریف کنید.
• نوشتن توضیحات متا (Meta Description)
  نام خطا: Document does not have a meta description
  هر صفحه باید یک توضیح کوتاه و دقیق از محتوای خود در تگ <meta name=”description”> داشته باشد. در صورتی که این تگ وجود نداشته باشد، این خطا در گزارش لایت هاوس نمایش داده می‌شود.
• استفاده از انکر تکست‌های توصیفی در لینک‌ها
  نام خطا: Links do not have descriptive text
  انکر تکست‌های مناسب برای لینک‌ها به موتور جستجو کمک می‌کنند تا محتوای صفحه مقصد را بهتر درک کنند. برای جلوگیری از این خطا، باید از عباراتی مانند “Click Here” یا “Learn More” که توصیفی نیستند، پرهیز کرده و از توضیحات دقیق و مرتبط استفاده کنید.
• استفاده از تگ Hreflang برای صفحات چندزبانه
  نام خطا: Document doesn’t have a valid hreflang
  اگر سایت شما به چند زبان منتشر شده است، باید از تگ <link rel=”alternate” hreflang=”x” href=”URL”> برای تعیین زبان و منطقه جغرافیایی هر صفحه استفاده کنید. این خطا به‌طور معمول زمانی نمایش داده می‌شود که تگ Hreflang به درستی پیاده‌سازی نشده یا ساختار آن غلط است.
• استفاده از تگ کنونیکال (Canonical) برای جلوگیری از محتوای تکراری
  نام خطا: Document does not have a valid rel=canonical
  برای جلوگیری از مشکلات محتوای تکراری در سایت، باید از تگ <link rel=”canonical” href=”URL”> استفاده کنید. این تگ به موتور جستجو کمک می‌کند تا نسخه اصلی صفحه را شناسایی کرده و از ایندکس کردن نسخه‌های مشابه جلوگیری کند.
• بررسی وضعیت کدهای HTTP
  نام خطا: Page has unsuccessful HTTP status code
  کدهای وضعیت HTTP (مانند 200 برای موفقیت‌آمیز بودن، 404 برای صفحه یافت نشده، 500 برای خطای سرور و غیره) به موتورهای جستجو اطلاع می‌دهند که آیا صفحه به درستی بارگذاری شده است یا خیر. اگر صفحات شما کدهای خطای سری ۴۰۰ یا ۵۰۰ برگردانند، لایت هاوس آن را به‌عنوان خطا نمایش می‌دهد.
• اطمینان از ایندکس‌شدن صفحات
  نام خطا: Page is blocked from indexing
  اگر صفحه‌ای را با تگ noindex مسدود کرده‌اید، لایت هاوس این موضوع را به‌عنوان خطا نشان نمی‌دهد، اما اگر صفحه به اشتباه مسدود شده باشد، باید آن را برای ایندکس شدن باز کنید.
• ساختار صحیح فایلtxt
  نام خطا: robots.txt is not valid
  فایل robots.txt به ربات‌های موتور جستجو می‌گوید که کدام بخش‌های سایت را ایندکس کنند یا نکنند. اگر این فایل به درستی تنظیم نشده باشد، ممکن است از دسترسی ربات‌های موتور جستجو جلوگیری کند و باعث ایجاد مشکلات سئویی شود.
• حذف محتوای مبتنی بر افزونه‌ها
  نام خطا: Document uses plugins
  موتورهای جستجو معمولاً از محتواهای مبتنی بر افزونه‌های فلش یا جاوا پشتیبانی نمی‌کنند. همچنین، این نوع محتوا در اکثر دستگاه‌های موبایل قابل نمایش نیست. بنابراین، حذف این نوع محتواها و استفاده از تکنولوژی‌های مدرن‌تر توصیه می‌شود.
• استفاده از تگ <meta name=”viewport”> برای ریسپانسیو بودن سایت
  نام خطا: No viewport meta tag
  برای اطمینان از اینکه سایت شما به‌خوبی در دستگاه‌های موبایل نمایش داده می‌شود، باید تگ <meta name=”viewport” content=”width=device-width, initial-scale=1″> را در هدر صفحات سایت خود قرار دهید.
• توجه به اندازه فونت‌ها و خوانایی آن‌ها
  نام خطا: Document doesn’t use legible font sizes
  اگر اندازه فونت‌های سایت شما در صفحات موبایل کوچک باشد و خوانایی آن دشوار باشد، این خطا در گزارش لایت هاوس نمایش داده خواهد شد. توصیه می‌شود اندازه فونت‌ها حداقل ۱۲ پیکسل باشد تا به‌راحتی قابل خواندن باشد.
• تناسب و اندازه مناسب عناصر صفحه (Tap targets)
  نام خطا: Tap targets are not sized appropriately
  برای اطمینان از راحتی کاربر در استفاده از سایت در موبایل، تمام دکمه‌ها، لینک‌ها و سایر عناصر باید اندازه مناسبی داشته باشند (حداقل ۴۸ در ۴۸ پیکسل) و فاصله مناسبی از یکدیگر داشته باشند. در غیر این صورت، کاربر ممکن است نتواند به‌درستی با این عناصر تعامل داشته باشد.

بررسی گزارش Progressive Web App (PWA) لایت هاوس

وب اپلیکیشن‌های پیشرونده (Progressive Web Apps یا PWA) به سایت‌هایی گفته می‌شود که ویژگی‌های اپلیکیشن‌های موبایل را دارند، اما نیازی به نصب ندارند و در مرورگر اجرا می‌شوند. این ویژگی‌ها شامل قابلیت کار آفلاین، نصب بر روی دستگاه و سرعت بارگذاری بالا است. لایت هاوس برای بررسی وضعیت این ویژگی‌ها ابزارهایی را فراهم می‌کند تا مطمئن شوید که سایت شما برای تبدیل شدن به یک PWA، عملکرد بهینه‌ای دارد.

پیشنهادات لایت هاوس برای بهبود گزارش Progressive Web App:

• افزایش سرعت بارگذاری صفحات در موبایل
  نام خطا: Page load is fast enough on mobile
  برای تبدیل یک سایت به PWA، سرعت بارگذاری صفحات در موبایل باید بالا باشد. دو معیار اصلی برای بررسی این موضوع عبارتند از:

• 1. First Meaningful Paint (FMP): زمانی که صفحه از نظر ظاهری کامل بارگذاری می‌شود.
  2. Time to Interactive (TTI): زمانی که صفحه برای تعامل کاربر آماده است.

3. اگر TTI صفحات بیش از ۱۰ ثانیه طول بکشد، لایت هاوس این را به‌عنوان خطا نشان خواهد داد.

• استفاده از سرویس‌ورکر (Service Worker)
  نام خطا: Registers a service worker
  سرویس‌ورکرها اسکریپت‌های پس‌زمینه‌ای هستند که قابلیت‌هایی مانند کار آفلاین، ارسال اعلان‌ها و کش فایل‌ها را به سایت‌ها اضافه می‌کنند. برای تبدیل سایت به PWA باید از سرویس‌ورکر استفاده کنید. این ویژگی باید به‌طور صحیح در کد سایت شما پیاده‌سازی شود.
• نمایش کد ۲۰۰ در حالت آفلاین
  نام خطا: Current page responds with a 200 when offline
  یکی از ویژگی‌های کلیدی PWAها این است که حتی زمانی که کاربر به اینترنت دسترسی ندارد، سایت باید به درستی بارگذاری شود. اگر در حالت آفلاین، سایت شما کد ۲۰۰ (موفق) را برنگرداند، باید از سرویس‌ورکر برای کش‌کردن فایل‌ها و ارائه نسخه آفلاین استفاده کنید.
• فعال بودن قابلیت نصب وب اپ
  نام خطا: User can be prompted to install the web app
  وب اپلیکیشن‌های پیشرونده باید قابلیت نصب بر روی دستگاه‌های کاربران را داشته باشند. اگر این ویژگی در سایت شما فعال نباشد، باید امکان نصب اپلیکیشن وب را با یک اعلان به کاربر فراهم کنید تا سایت شما به‌عنوان یک PWA شناخته شود.
• رفع مشکل آیکون وب اپلیکیشن در آیفون
  نام خطا: Does not provide a valid apple-touch-icon
  برای پشتیبانی بهتر از دستگاه‌های iOS، باید یک آیکون معتبر برای وب اپ خود فراهم کنید. در غیر این صورت، در دستگاه‌های اپل، به‌جای آیکون اصلی، تصویری از محتوای صفحه نمایش داده خواهد شد. این مشکل زمانی رخ می‌دهد که کد آیکون به درستی در هدر صفحه قرار نگیرد.
• جلوگیری از ریدایرکت‌های زنجیره‌ای
  نام خطا: Avoid multiple page redirects
  ریدایرکت‌ها زمان بارگذاری صفحات را به شدت افزایش می‌دهند. اگر صفحه‌ای نیاز به چندین ریدایرکت دارد، باید ساختار لینک‌ها و ریدایرکت‌ها را بهینه کنید تا سرعت بارگذاری کاهش نیابد.
• ساخت Splash Screen برای اپلیکیشن
  نام خطا: Configured for a custom splash screen
  زمانی که وب اپلیکیشن بارگذاری می‌شود، ممکن است صفحه‌ای سفید و خالی برای کاربر نمایش داده شود. برای بهبود تجربه کاربری، پیشنهاد می‌شود یک Splash Screen (صفحه ابتدایی) طراحی کنید تا زمان بارگذاری با یک تصویر یا انیمیشن جذاب پر شود.
• تغییر رنگ نوار آدرس در مرورگر
  نام خطا: Sets an address-bar theme color
  برای ارتقای تجربه کاربری، توصیه می‌شود که رنگ نوار آدرس مرورگر در هنگام استفاده از وب اپلیکیشن تغییر کند. این کار به بهبود زیبایی و جذابیت اپلیکیشن کمک می‌کند و تجربه کاربر را بهبود می‌بخشد.
• استفاده از تگ viewport
  نام خطا: Content is not sized correctly for the viewport
  تگ <meta name=”viewport”> به وب اپ‌ها کمک می‌کند تا در دستگاه‌های مختلف به درستی نمایش داده شوند. اگر این تگ به‌درستی تنظیم نشود، ممکن است سایت شما در دستگاه‌های موبایل یا تبلت به‌درستی بارگذاری نشده و محتوا به‌هم‌ریخته نمایش داده شود.
• عدم‌وابستگی نمایش محتوا به جاوا اسکریپت و CSS
  نام خطا: Contains some content when JavaScript is not available
  در اپلیکیشن‌های وب پیشرونده، باید اطمینان حاصل کنید که محتوا حتی زمانی که جاوا اسکریپت غیرفعال است، در دسترس باشد. اگر محتوا به طور کامل به جاوا اسکریپت و CSS وابسته باشد و بدون آن‌ها نمایش داده نشود، این خطا به‌عنوان یک مشکل در سایت گزارش خواهد شد.

مواردی که باید به‌صورت دستی بررسی شوند:

• سازگاری با مرورگرهای مختلف (Cross-Browser Compatibility)
  وب اپلیکیشن شما باید در مرورگرهای مختلف مانند کروم، فایرفاکس و سافاری به‌درستی نمایش داده شود. باید اطمینان حاصل کنید که سایت در تمام مرورگرهای اصلی عملکرد صحیح دارد.
• نشانگر بارگذاری در زمان انتقال صفحه
  در وب اپلیکیشن‌های پیشرونده، هر تعامل کاربر مانند کلیک بر روی دکمه‌ها یا انتقال به صفحات جدید باید با یک نشانگر بارگذاری (Loading Indicator) همراه باشد تا کاربر بداند که سیستم در حال پردازش درخواست او است.
• یک URL منحصربه‌فرد برای هر صفحه
  هر صفحه و نمایه در وب اپلیکیشن باید یک URL منحصربه‌فرد داشته باشد تا کاربران بتوانند مستقیماً به آن دسترسی پیدا کنند یا آن را به اشتراک بگذارند.

یه خبر خب برای شمایی که در مشهد زندگی میکنید جالبه بدانید که آژانس مهام با سابقه 7 ساله در حوزه‌هایی نظیر طراحی سایت در مشهد و خدمات سئو در مشهد بعنوان بهترین آژانس بازاریابی محتوا در مشهد شناخته می‌شود. برای اطلاعات بیشتر به مهام سر بزنید.

 نحوه دسترسی به ابزار Lighthouse

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

۱. استفاده از افزونه کروم Lighthouse

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

1. ابتدا مرورگر کروم را باز کنید و به فروشگاه Chrome Web Store بروید.
2. در بخش جستجو، عبارت “Lighthouse” را جستجو کنید.
3. با کلیک روی گزینه “Add to Chrome”، افزونه را به مرورگر کروم خود اضافه کنید.

4. پس از نصب افزونه، آیکون Lighthouse در نوار ابزار کروم شما ظاهر می‌شود. برای هر صفحه‌ای از سایت که می‌خواهید آن را با این ابزار بررسی کنید، کافی است آدرس آن را باز کنید، روی آیکون افزونه Lighthouse کلیک کنید و دکمه “Generate Report” را بزنید تا گزارش بگیرید. فراموش نکنید که در زمان اجرای این ابزار، فیلترشکن سیستم خود را روشن کنید.

۲.استفاده از Inspect گوگل کروم

صفحه مورد نظر خود را در مرورگر کروم باز کنید. با کلیک راست روی صفحه، گزینه‌ «Inspect» را انتخاب کنید. از منوی بالا، روی علامت << یا همان More tabs کلیک کنید و گزینه‌ «Lighthouse» را انتخاب کنید.

شما می‌توانید از ابتدا مشخص کنید که می‌خواهید گزارش کدام قسمت‌ از ابزار Lighthouse را ببینید. (تیک بزنید)
همچنین این امکان وجود دارد سایت خود را هم در نسخه موبایل و هم دسکتاپ بررسی کنید. (تیک بزنید)
در نهایت روی دکمه‌ «Generate Report» کلیک کنید و منتظر گزارش لایت هاوس بمانید.

نحوه استفاده از گوگل لایت هاوس (Lighthouse)

برای شروع تست با ابزار لایت هاوس، ابتدا صفحه مورد نظر را باز کرده و یکی از دو روش قبلی را برای اجرای Lighthouse انتخاب کنید. در تصویر زیر، تست را با استفاده از افزونه روی سایت مهام انجام داده‌ایم. همانطور که در این مقاله توضیح داده شد، گزارش نهایی ابزار لایت هاوس شامل ۵ بخش اصلی است: Performance، Accessibility، Best Practices، SEO و PWA. شما می‌توانید از ابتدا گزارش هر بخش را که نیاز ندارید غیرفعال کنید.

در گزارش نهایی، هر بخش با ۴ دایره رنگی و امتیازی بین ۰ تا ۱۰۰ نشان داده می‌شود. رنگ‌های دایره‌ها به این صورت است:

• سبز: نشان‌دهنده وضعیت عالی سایت
• زرد: نشان‌دهنده وضعیت متوسط
• قرمز: نشان‌دهنده ضعف شدید سایت

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

عکس

بهبود عملکرد سایت با استفاده از ابزار Lighthouse: راهی برای تجربه کاربری بهتر

در این مقاله، به‌طور کامل به بررسی گزارش‌های مختلف ابزار Lighthouse پرداختیم و توضیح دادیم که با رفع مشکلات موجود در پنج بخش کلیدی Performance، Accessibility، Best Practices، SEO و PWA، چگونه می‌توانید عملکرد سایت خود را بهبود بخشید. بنابراین، اگر قصد دارید تجربه کاربری بهتری برای بازدیدکنندگان سایت خود ایجاد کنید، استفاده از گزارش‌های جامع این ابزار و پیاده‌سازی راهکارهای آن می‌تواند اولین گام مؤثر باشد. با این کار، به مرور زمان می‌توانید کارایی سایت‌تان را برای کاربران به طور چشمگیری افزایش دهید.

سوالات متداول ابزار Google lighthouse

1. Google Lighthouse چیست؟

Google Lighthouse یک ابزار ارزیابی و بهبود عملکرد وب‌سایت است که می‌تواند جنبه‌های مختلف یک صفحه وب را تجزیه و تحلیل کند، مانند:

• عملکرد
• دسترسی‌پذیری
• SEO
• قابلیت استفاده
• Progressive Web App (PWA)

2. چگونه از Google Lighthouse استفاده کنیم؟

برای استفاده از Google Lighthouse می‌توانید از روش‌های مختلفی استفاده کنید:

• Chrome DevTools: به سادگی می‌توانید در Chrome DevTools به تب Lighthouse بروید و گزارش را برای صفحه فعلی خود دریافت کنید.
• Command Line: از طریق خط فرمان (CLI) می‌توانید Lighthouse را نصب و اجرا کنید.
• PageSpeed Insights: این ابزار که متعلق به Google است، Lighthouse را برای تجزیه و تحلیل عملکرد سایت شما به کار می‌برد.
• سرور مستقل: می‌توانید از Lighthouse به‌صورت مستقل و از طریق API برای ارزیابی وب‌سایت‌ها استفاده کنید.

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

لایت هوس گزارشی شامل نمرات برای هر یک از بخش‌های مختلف مانند عملکرد، دسترسی‌پذیری، SEO و امنیت به شما می‌دهد. نمرات به صورت زیر تفسیر می‌شوند:

• 90-100: عالی
• 50-89: نیاز به بهبود
• 0-49: عملکرد ضعیف

دانلود PDF