Lighthouse چیست؟ آموزش تست و افزایش سرعت سایت با Google Lighthouse

اگر می‌خواهید بدانید چرا سایت شما کند است، چه عواملی باعث کاهش سرعت بارگذاری می‌شوند و چگونه می‌توانید مشکلات Performance را برطرف کنید، ابزار Google Lighthouse یکی از بهترین گزینه‌ها برای شروع است.

Lighthouse یک ابزار رایگان و متن‌باز برای بررسی کیفیت صفحات وب است. این ابزار علاوه بر سرعت بارگذاری، بخش‌هایی مانند Accessibility، Best Practices و SEO را تحلیل می‌کند و پیشنهادهایی برای بهبود سایت ارائه می‌دهد.

در این آموزش یاد می‌گیریم Lighthouse چیست، چگونه آن را در Google Chrome اجرا کنیم، امتیاز Performance را بخوانیم و مشکلات رایجی مانند تصاویر حجیم، JavaScript سنگین، کندی سرور و Layout Shift را برطرف کنیم. همچنین با Core Web Vitals و تفاوت Lighthouse با PageSpeed Insights آشنا می‌شویم.

Google Lighthouse چیست؟

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

توسعه‌دهندگان می‌توانند از Lighthouse برای شناسایی مشکلات بارگذاری، تحلیل عملکرد کدهای Front-end و بررسی کیفیت فنی صفحات استفاده کنند. این ابزار برای سایت‌های وردپرسی، فروشگاهی و اپلیکیشن‌های ساخته‌شده با React، Angular و Next.js نیز کاربرد دارد.

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

بخش	کاربرد
Performance	بررسی سرعت بارگذاری و عملکرد صفحه
Accessibility	بررسی مشکلات دسترس‌پذیری برای کاربران مختلف
Best Practices	بررسی برخی استانداردهای فنی، امنیتی و کیفیت پیاده‌سازی
SEO	بررسی تعدادی از الزامات پایه سئوی فنی صفحه

در این مقاله تمرکز اصلی ما روی Lighthouse Performance است؛ زیرا این بخش به شناسایی عوامل کندی سایت کمک می‌کند.

آموزش تست سرعت سایت با Lighthouse در مرورگر Chrome

ساده‌ترین راه استفاده از Lighthouse اجرای آن داخل Chrome DevTools است. برای این کار نیازی به نصب افزونه جداگانه ندارید.

مرحله اول: باز کردن Chrome DevTools

ابتدا صفحه‌ای را که قصد بررسی آن دارید در Google Chrome باز کنید. سپس کلید F12 یا ترکیب Ctrl + Shift + I را در ویندوز فشار دهید. در macOS می‌توانید از Command + Option + I استفاده کنید.

مرحله دوم: انتخاب Lighthouse

در DevTools وارد تب Lighthouse شوید. اگر این تب را نمی‌بینید، آن را از منوی تب‌های بیشتر DevTools انتخاب کنید.

مرحله سوم: تنظیم نوع تست

بخش Performance را فعال کنید و نوع دستگاه را روی Mobile یا Desktop قرار دهید. توصیه می‌کنیم هر دو حالت را جداگانه بررسی کنید؛ زیرا نتیجه آن‌ها ممکن است متفاوت باشد.

مرحله چهارم: تولید گزارش Performance

با انتخاب گزینه Analyze Page Load یا دکمه اجرای Audit، Lighthouse صفحه را بارگذاری می‌کند و گزارش Performance را نمایش می‌دهد.

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

امتیاز Lighthouse Performance چگونه محاسبه می‌شود؟

Lighthouse پس از تحلیل صفحه، یک امتیاز بین صفر تا ۱۰۰ برای Performance ارائه می‌دهد. این امتیاز از ترکیب چند معیار عملکردی و وزن مشخص هر معیار محاسبه می‌شود.

امتیاز	وضعیت	رنگ
0 تا 49	ضعیف (Poor)	قرمز
50 تا 89	نیازمند بهبود	نارنجی
90 تا 100	خوب (Good)	سبز

رسیدن به امتیاز بالای ۹۰ هدف مناسبی است؛ بااین‌حال امتیاز ۱۰۰ به معنی بی‌نقص بودن سایت نیست. در عمل باید تجربه کاربران واقعی را نیز بررسی کنید.

مهم‌ترین معیارهای Performance در Lighthouse

امتیاز Performance در نسخه‌های مدرن Lighthouse براساس پنج معیار اصلی محاسبه می‌شود: FCP، Speed Index، LCP، TBT و CLS.

معیار	وزن در امتیاز	چه چیزی را اندازه می‌گیرد؟
First Contentful Paint (FCP)	10%	زمان نمایش اولین محتوای صفحه
Speed Index	10%	سرعت نمایش بصری محتوای صفحه
Largest Contentful Paint (LCP)	25%	زمان نمایش بزرگ‌ترین عنصر محتوایی قابل مشاهده
Total Blocking Time (TBT)	30%	مجموع زمان مسدود شدن Main Thread در بازه اندازه‌گیری
Cumulative Layout Shift (CLS)	25%	میزان جابه‌جایی غیرمنتظره عناصر صفحه

این وزن‌ها بر اساس مدل امتیازدهی مستندشده در Lighthouse 10 هستند که در Lighthouse 13 نیز بدون تغییر باقی مانده‌اند. معیارهای TBT، LCP و CLS بیشترین تأثیر را در امتیاز نهایی دارند.

معیار LCP چیست و چگونه آن را بهبود دهیم؟

Largest Contentful Paint یا LCP مدت‌زمان لازم برای نمایش بزرگ‌ترین عنصر محتوایی صفحه در ناحیه قابل مشاهده مرورگر را اندازه می‌گیرد.

این عنصر ممکن است تصویر اصلی مقاله، تصویر Hero یک Landing Page یا یک بلوک بزرگ متنی باشد.

برای داشتن تجربه کاربری خوب، مقدار LCP در داده‌های کاربران واقعی باید حداکثر ۲.۵ ثانیه باشد.

دلایل رایج بالا بودن LCP

تصاویر بزرگ و بدون بهینه‌سازی، تأخیر پاسخ سرور، فایل‌های CSS مسدودکننده Rendering، دانلود دیرهنگام تصویر اصلی و اجرای سنگین JavaScript می‌توانند مقدار LCP را افزایش دهند.

بهینه‌سازی تصویر LCP

ابتدا تصویر اصلی صفحه را در اندازه مناسب و با فرمت‌هایی مانند WebP یا AVIF ارائه کنید. اگر تصویر Hero مهم‌ترین محتوای ابتدای صفحه است، آن را بدون تأخیر غیرضروری بارگذاری کنید.

<img
  src="/images/hero.webp"
  width="1200"
  height="630"
  alt="تصویر اصلی صفحه"
  fetchpriority="high"
>

ویژگی fetchpriority="high" می‌تواند اولویت دریافت تصویر مهم را افزایش دهد. البته نباید این ویژگی را برای تمام تصاویر صفحه استفاده کنید.

همچنین تصویر LCP را بدون دلیل با loading="lazy" بارگذاری نکنید؛ زیرا ممکن است نمایش محتوای اصلی به تأخیر بیفتد.

معیار TBT چیست؟

Total Blocking Time مجموع بخش‌هایی از Long Taskها را اندازه می‌گیرد که بیش از ۵۰ میلی‌ثانیه طول می‌کشند. Lighthouse این مقدار را در بازه بین FCP و Time to Interactive محاسبه می‌کند.

برای مثال، اگر یک Task به مدت ۱۲۰ میلی‌ثانیه Main Thread را درگیر کند، ۷۰ میلی‌ثانیه آن در TBT محاسبه می‌شود.

JavaScript حجیم، پردازش‌های هم‌زمان سنگین، Scriptهای شخص ثالث و Hydration پرهزینه ممکن است باعث افزایش TBT شوند.

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

ابتدا فایل‌های JavaScript غیرضروری را حذف کنید. سپس از Code Splitting، Dynamic Import و به تعویق انداختن اجرای Scriptهای غیرضروری استفاده کنید.

در پروژه‌های React، Angular و Next.js همچنین بهتر است Componentهای سنگین را فقط زمانی بارگذاری کنید که کاربر به آن‌ها نیاز دارد.

معیار CLS چیست و چرا اهمیت دارد؟

Cumulative Layout Shift یا CLS میزان جابه‌جایی غیرمنتظره عناصر صفحه را بررسی می‌کند.

فرض کنید کاربر قصد دارد روی یک دکمه کلیک کند، اما تصویری ناگهان بارگذاری می‌شود و دکمه به پایین صفحه منتقل می‌شود. این رفتار می‌تواند CLS را افزایش دهد.

مقدار مناسب CLS برای Core Web Vitals حداکثر 0.1 است.

جلوگیری از Layout Shift تصاویر

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

<img
  src="/images/course.webp"
  width="800"
  height="450"
  alt="تصویر دوره آموزشی"
>

همچنین برای تبلیغات، تصاویر Lazy Load و Componentهایی که بعداً نمایش داده می‌شوند فضای مناسبی در نظر بگیرید. بارگذاری فونت‌ها نیز ممکن است باعث جابه‌جایی متن شود.

معیار FCP چیست؟

First Contentful Paint یا FCP زمانی را اندازه می‌گیرد که مرورگر برای اولین بار یک محتوای قابل مشاهده مانند متن، تصویر یا Canvas را Render می‌کند.

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

Speed Index چیست؟

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

Lighthouse برای محاسبه این معیار، روند نمایش صفحه را در طول زمان بررسی می‌کند. صفحاتی که محتوای اولیه خود را سریع‌تر نمایش می‌دهند، معمولاً Speed Index بهتری دارند.

Core Web Vitals چیست؟

Core Web Vitals مجموعه‌ای از معیارهای Google برای بررسی تجربه واقعی کاربران وب است. این معیارها روی سه موضوع اصلی تمرکز دارند: سرعت نمایش محتوا، پاسخ‌گویی به تعامل و پایداری بصری صفحه.

معیارهای اصلی Core Web Vitals شامل LCP، INP و CLS هستند.

معیار	خوب	نیازمند بهبود	ضعیف
LCP	تا 2.5 ثانیه	بیشتر از 2.5 تا 4 ثانیه	بیشتر از 4 ثانیه
INP	تا 200 میلی‌ثانیه	بیشتر از 200 تا 500 میلی‌ثانیه	بیشتر از 500 میلی‌ثانیه
CLS	تا 0.1	بیشتر از 0.1 تا 0.25	بیشتر از 0.25

Google برای ارزیابی این معیارها معمولاً صدک ۷۵ داده‌های کاربران واقعی را در Mobile و Desktop در نظر می‌گیرد.

INP چیست و چه تفاوتی با TBT دارد؟

Interaction to Next Paint یا INP میزان پاسخ‌گویی صفحه به تعامل‌های کاربران مانند کلیک، لمس و تایپ را ارزیابی می‌کند.

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

در مقابل، TBT یک معیار آزمایشگاهی است که برای شناسایی مشکلات احتمالی Main Thread استفاده می‌شود. بهبود TBT ممکن است به بهبود INP نیز کمک کند، اما این دو معیار یکسان نیستند.

برای بررسی INP واقعی می‌توانید از PageSpeed Insights، Chrome User Experience Report و ابزارهای Real User Monitoring استفاده کنید.

تفاوت Lighthouse و PageSpeed Insights چیست؟

Lighthouse و PageSpeed Insights ارتباط نزدیکی با یکدیگر دارند، اما دقیقاً یک ابزار یکسان نیستند.

ویژگی	Lighthouse	PageSpeed Insights
روش استفاده	DevTools، CLI و ابزارهای توسعه	وب‌سایت آنلاین Google
داده آزمایشگاهی	بله	بله، با استفاده از Lighthouse
داده کاربران واقعی	خود گزارش Lighthouse معمولاً ارائه نمی‌کند	در صورت موجود بودن داده CrUX ارائه می‌کند
تست محیط توسعه	بله	معمولاً نیازمند URL در دسترس است
کاربرد اصلی	عیب‌یابی و تست فنی	تحلیل ترکیبی عملکرد آزمایشگاهی و واقعی

برای تست آنلاین سرعت سایت می‌توانید به Google PageSpeed Insights مراجعه کنید.

چرا امتیاز Lighthouse در Mobile کمتر از Desktop است؟

آزمایش Mobile معمولاً از شرایط دستگاه و شبکه محدودتری نسبت به Desktop استفاده می‌کند. در نتیجه اجرای JavaScript، دانلود منابع و Rendering صفحه ممکن است زمان بیشتری ببرد.

همچنین برخی نسخه‌های موبایل سایت، Componentها یا Scriptهای متفاوتی دارند که بر نتیجه تست تأثیر می‌گذارند.

به همین دلیل نباید انتظار داشته باشید امتیاز Mobile و Desktop همیشه یکسان باشد.

چرا امتیاز Lighthouse در هر تست تغییر می‌کند؟

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

برای مقایسه دقیق‌تر، چند بار تست بگیرید و به جای یک عدد منفرد، روند تغییرات و مقدار هر معیار را بررسی کنید.

آشنایی با Performance Insights در Lighthouse 13

در نسخه‌های جدید Lighthouse، بخش زیادی از گزارش‌های قدیمی Opportunities و Diagnostics به مجموعه‌ای از Performance Insights تبدیل شده‌اند.

این تغییر به توسعه‌دهنده کمک می‌کند مشکلاتی مانند تأخیر دریافت سند HTML، فایل‌های JavaScript تکراری، Render Blocking و عوامل ایجاد Layout Shift را در قالب تحلیل‌های متمرکزتر بررسی کند.

به‌عنوان مثال، Insight مربوط به Document Request Latency می‌تواند مشکلاتی مانند کندی پاسخ سرور و تأخیر درخواست اولیه را نشان دهد.

نکته مهم این است که Insights مستقیماً امتیاز Performance را تعیین نمی‌کنند؛ بلکه علت مشکلات را نشان می‌دهند. امتیاز اصلی از معیارهای عملکردی محاسبه می‌شود.

آموزش افزایش سرعت سایت براساس گزارش Lighthouse

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

1. بهینه‌سازی تصاویر سایت

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

برای تصاویر خارج از محدوده اولیه دید کاربر می‌توانید از Lazy Loading استفاده کنید:

<img
  src="/images/article.webp"
  alt="تصویر مقاله آموزشی"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
>

برای تصاویر مهم ابتدای صفحه مانند Hero، اولویت بارگذاری را جداگانه بررسی کنید.

2. کاهش JavaScript غیرضروری

دانلود و اجرای JavaScript زیاد می‌تواند Main Thread را برای مدت طولانی درگیر کند. این مسئله روی TBT و تجربه تعامل کاربران اثر می‌گذارد.

با حذف Dependencyهای بدون استفاده، Code Splitting و بارگذاری مرحله‌ای Componentها می‌توانید هزینه اجرای اولیه را کاهش دهید.

3. به تعویق انداختن Scriptهای غیرضروری

Scriptهایی که برای نمایش محتوای اولیه ضروری نیستند، نباید بدون دلیل مسیر Rendering را مسدود کنند.

برای یک فایل JavaScript کلاسیک مستقل می‌توانید در شرایط مناسب از defer استفاده کنید:

<script src="/js/app.js" defer></script>

توجه داشته باشید که اجرای دیرتر یک Script همیشه بهترین راهکار نیست. ابتدا وابستگی Script به UI و زمان موردنیاز اجرای آن را بررسی کنید.

4. بهینه‌سازی فونت‌های سایت

فونت‌های متعدد یا سنگین ممکن است نمایش متن را به تأخیر بیندازند. تعداد Weightهای غیرضروری را کاهش دهید و در صورت امکان از WOFF2 استفاده کنید.

@font-face {
  font-family: "SiteFont";
  src: url("/fonts/site-font.woff2") format("woff2");
  font-display: swap;
}

ویژگی font-display: swap به مرورگر اجازه می‌دهد متن را ابتدا با یک فونت جایگزین نمایش دهد. برای جلوگیری از CLS احتمالی باید تفاوت ابعاد فونت جایگزین و فونت اصلی را نیز بررسی کنید.

5. کاهش زمان پاسخ سرور

اگر سرور برای ارسال سند HTML زمان زیادی نیاز داشته باشد، نمایش محتوای صفحه نیز ممکن است به تأخیر بیفتد.

استفاده صحیح از Cache، بهینه‌سازی Queryهای دیتابیس، کاهش Redirectهای غیرضروری و بررسی عملکرد Backend می‌توانند به کاهش تأخیر پاسخ کمک کنند.

6. استفاده صحیح از Cache و CDN

Cache می‌تواند نیاز به دانلود مجدد فایل‌های ثابت را کاهش دهد. CDN نیز در شرایط مناسب منابع را از سرورهای نزدیک‌تر به کاربر ارائه می‌کند.

برای فایل‌های نسخه‌گذاری‌شده مانند CSS و JavaScript می‌توان از Cache طولانی‌مدت استفاده کرد؛ البته سیاست Cache باید با روش Deploy پروژه هماهنگ باشد.

7. حذف CSS بدون استفاده

فایل‌های CSS بزرگ و غیرضروری می‌توانند هزینه دانلود و پردازش اولیه صفحه را افزایش دهند.

با بررسی Coverage در Chrome DevTools، جدا کردن Styleهای موردنیاز و حذف Selectorهای بلااستفاده می‌توانید حجم CSS را کاهش دهید.

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

در وردپرس معمولاً قالب، افزونه‌ها، تصاویر و سرویس‌های خارجی از عوامل مهم مؤثر بر Performance هستند.

ابتدا صفحه را با Lighthouse بررسی کنید و مشخص کنید مشکل اصلی از JavaScript، تصاویر، فونت، پاسخ سرور یا Layout Shift است.

ابزارهایی مانند WP Rocket می‌توانند در مدیریت Cache و برخی بهینه‌سازی‌های Front-end کمک کنند؛ اما فعال‌سازی هم‌زمان تنظیمات مشابه در چند افزونه ممکن است باعث تداخل شود.

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

بهینه‌سازی Lighthouse در React، Angular و Next.js

در پروژه‌های Front-end مدرن، بخش زیادی از Performance به حجم JavaScript، نحوه Rendering، دانلود داده‌ها و نحوه Hydration وابسته است.

React و Code Splitting

در React می‌توانید Componentهایی را که برای نمایش اولیه ضروری نیستند، به شکل Lazy بارگذاری کنید:

import { lazy, Suspense } from "react";

const Reports = lazy(() => import("./Reports"));

export default function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Reports />
    </Suspense>
  );
}

این روش در سناریوهای مناسب حجم JavaScript اولیه را کاهش می‌دهد، اما باید تأخیر احتمالی نمایش محتوای Lazy Loaded را نیز در نظر بگیرید.

Angular و Lazy Loading

در Angular استفاده از Lazy Loading برای Routeهای غیرضروری در بارگذاری اولیه می‌تواند به کاهش Initial Bundle کمک کند.

import { Routes } from "@angular/router";

export const routes: Routes = [
  {
    path: "dashboard",
    loadComponent: () =>
      import("./dashboard/dashboard.component")
        .then(m => m.DashboardComponent)
  }
];

علاوه بر این، بهبود Change Detection، حذف Subscriptionهای غیرضروری و مدیریت صحیح State می‌توانند به عملکرد اپلیکیشن کمک کنند.

Next.js و بهینه‌سازی Rendering

در Next.js بهتر است برای Componentهایی که به تعامل سمت Client نیاز ندارند، از Server Components استفاده کنید.

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

انتخاب بین SSR، SSG و سایر روش‌های Rendering نیز باید براساس ماهیت صفحه و نیازهای پروژه انجام شود.

اجرای Lighthouse از طریق Command Line

Lighthouse علاوه بر Chrome DevTools از طریق CLI نیز در دسترس است. این روش برای توسعه‌دهندگانی که می‌خواهند تست Performance را در Workflow پروژه اجرا کنند کاربرد دارد.

نصب Lighthouse

npm install -g lighthouse

اجرای تست برای یک سایت

lighthouse https://example.com

خروجی HTML از Lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./lighthouse-report.html

برای اجرای Lighthouse CLI باید نسخه سازگار Chrome یا Chromium روی سیستم در دسترس باشد.

Lighthouse CI چیست؟

Lighthouse CI مجموعه‌ای از ابزارها برای اجرای خودکار تست‌های Lighthouse در فرآیند توسعه و CI/CD است.

با Lighthouse CI می‌توانید پس از تغییرات پروژه، وضعیت Performance را بررسی کنید و افت عملکرد را پیش از انتشار نسخه جدید شناسایی کنید.

این روش برای پروژه‌هایی که مرتب Deploy می‌شوند، به‌ویژه اپلیکیشن‌های React، Angular و Next.js، ارزش زیادی دارد.

آیا امتیاز 100 در Lighthouse ضروری است؟

خیر. امتیاز ۱۰۰ تضمین نمی‌کند که تمام کاربران تجربه‌ای کاملاً سریع و بدون مشکل داشته باشند.

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

بهتر است هدف اصلی را روی بهبود معیارهای واقعی، رفع مشکلات مهم و جلوگیری از افت Performance قرار دهید.

آیا امتیاز Lighthouse روی SEO تأثیر دارد؟

امتیاز Lighthouse به‌تنهایی یک عامل مستقیم و مستقل برای رتبه‌بندی Google نیست. بااین‌حال Core Web Vitals در سیستم‌های رتبه‌بندی Google مورد استفاده قرار می‌گیرند.

بهبود سرعت، پاسخ‌گویی و ثبات بصری صفحه می‌تواند تجربه کاربران را بهتر کند؛ اما حتی دریافت امتیاز ۱۰۰ نیز رتبه بالای سایت در نتایج جست‌وجو را تضمین نمی‌کند.

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

چگونه گزارش Lighthouse را درست تحلیل کنیم؟

ابتدا معیارهایی را بررسی کنید که بیشترین ضعف را دارند. سپس Insights مرتبط با آن‌ها را پیدا کنید و تغییرات پیشنهادی را براساس اثر احتمالی و هزینه پیاده‌سازی اولویت‌بندی کنید.

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

مشکل مشاهده‌شده	اقدام پیشنهادی
LCP بالا	بررسی Hero، تصویر LCP، پاسخ سرور و منابع مسدودکننده
TBT بالا	کاهش JavaScript و Long Taskها
CLS بالا	رزرو فضای تصاویر، تبلیغات و عناصر پویا
FCP کند	بهبود بارگذاری HTML و منابع اولیه
INP ضعیف در داده واقعی	تحلیل Interactionها در Performance Panel و کاهش پردازش‌های سنگین

سوالات متداول درباره Google Lighthouse

Google Lighthouse چیست؟

Lighthouse ابزار رایگان و متن‌باز Google برای بررسی کیفیت صفحات وب است. این ابزار بخش‌هایی مانند Performance، Accessibility، Best Practices و SEO را ارزیابی می‌کند.

چطور سرعت سایت را با Lighthouse تست کنیم؟

صفحه سایت را در Google Chrome باز کنید، وارد DevTools شوید، تب Lighthouse را انتخاب کنید و تست Performance را اجرا کنید.

امتیاز خوب Lighthouse چند است؟

امتیاز بین ۹۰ تا ۱۰۰ در دسته Good قرار می‌گیرد. بااین‌حال امتیاز آزمایشگاهی باید در کنار تجربه کاربران واقعی بررسی شود.

چرا امتیاز Mobile در Lighthouse پایین است؟

شرایط شبیه‌سازی‌شده Mobile معمولاً محدودتر از Desktop است و عواملی مانند پردازش JavaScript و سرعت شبکه می‌توانند تأثیر بیشتری بر نتیجه بگذارند.

تفاوت Lighthouse و PageSpeed Insights چیست؟

Lighthouse یک موتور تحلیل آزمایشگاهی است، درحالی‌که PageSpeed Insights علاوه بر گزارش Lighthouse می‌تواند داده‌های واقعی کاربران را از CrUX نمایش دهد.

آیا Lighthouse برای وردپرس مناسب است؟

بله. Lighthouse می‌تواند صفحات سایت‌های وردپرسی را نیز بررسی کند و مشکلات مربوط به تصاویر، JavaScript، CSS، فونت‌ها و عملکرد سرور را نشان دهد.

آیا Lighthouse برای React و Angular هم کاربرد دارد؟

بله. Lighthouse مستقل از Framework کار می‌کند و برای بررسی اپلیکیشن‌های React، Angular، Next.js و سایر فناوری‌های Front-end قابل استفاده است.

تفاوت LCP و FCP چیست؟

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

آیا INP در Lighthouse اندازه‌گیری می‌شود؟

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

آیا امتیاز 100 Lighthouse باعث رتبه یک گوگل می‌شود؟

خیر. امتیاز Lighthouse به‌تنهایی تضمین‌کننده رتبه Google نیست. سرعت و Core Web Vitals مهم هستند، اما کیفیت محتوا و ارتباط آن با نیاز کاربر نیز اهمیت دارند.

چرا امتیاز Lighthouse گاهی تغییر می‌کند؟

شرایط شبکه، بار سیستم، پاسخ سرور، Cache و Scriptهای خارجی می‌توانند باعث تغییر نتایج تست شوند. چند اجرای مشابه برای تحلیل روند عملکرد مناسب‌تر است.

جمع‌بندی

Google Lighthouse یکی از کاربردی‌ترین ابزارهای توسعه‌دهندگان برای بررسی سرعت و کیفیت فنی صفحات وب است.

با استفاده از Lighthouse می‌توانید معیارهایی مانند LCP، TBT، CLS، FCP و Speed Index را بررسی کنید و علت کندی سایت را با کمک Performance Insights شناسایی کنید.

بااین‌حال بهتر است به امتیاز کلی محدود نشوید. داده‌های واقعی Core Web Vitals، وضعیت کاربران Mobile و عملکرد سایت در شرایط واقعی تصویر کامل‌تری از کیفیت تجربه کاربری ارائه می‌کنند.

هدف نهایی از بهینه‌سازی Performance فقط رسیدن به عدد ۱۰۰ نیست؛ بلکه ساخت سایتی سریع، پاسخ‌گو، پایدار و قابل استفاده برای کاربران واقعی است.

منابع و مستندات رسمی

مستندات رسمی Google Lighthouse

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

راهنمای Core Web Vitals در web.dev

تغییرات Lighthouse 13