عنوان راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

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

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

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

در این مقاله به این سوالات شما پاسخ داده می‌شود:

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

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

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

این ابزار اقدام به امتیازدهی سایت‌ها در ۵ زمینه مختلف می‌کند:

1. کارایی سایت
2. برنامه‌های تحت وب
3. بهترین روش‌های استفاده شده
4. مقدار دسترسی به سایت
5. سئوی سایت

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

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

بررسی بخش بروز شده Web Core Vitals در ابزار Lighthouse

در تاریخ ۵ می سال ۲۰۲۰ پروژه Chromium مجموعه گوگل از سه معیار جدید که در مرورگرهای کروم استفاده شده‌اند رونمایی کرد. این معیارها برای اندازه‌گیری و سنجش سایت‌ها در مرورگر کروم و توسط گوگل قرار گرفته اند. معیارهای اندازه‌گیری که به Web Vital معروف شدند بخش از پروژه ابتکاری گوگل هستند که برای راهنمایی و اندازه‌گیری سیگنال‌های کیفیت سایت‌ها ارائه شده‌اند. در واقع هدف از این بروز رسانی اندازه‌گیری سایت‌ها و عملکرد آن‌ها به روش کاربر محور است.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

بعد از دو هفته از تاریخ ۵ می سال ۲۰۲۰ ابزار Lighthouse ورژن ۶ خود را با توجه به Web Core Vital بروز رسانی کرد. در ژوئیه سال ۲۰۲۰ با انتشار مرورگر گوگل کروم نسخه ۸۴ معیارهای ایجاد شده در نسخه شماره ۶ ابزار Lighthouse توسط گوگل مورد تائید قرار گرفت و این ابزار به‌صورت کامل در مرورگر گوگل کروم مورد استفاده قرار گرفت.

با این کار پنل کاربری Chrome DevTools به Lighthouse تغییر نام داد. با این کار امتیازهای ارائه شده در بخش Pagespeed و Google Search Console به عنوان یک منبع رفرنس برای Lighthouse انتخاب شده و از امتیازهای آن‌ها در این بخش نیز استفاده خواهد شد. این تغییرات در جهت تمرکز مدیران وب‌سایت‌ها روی اهداف و پالایش بهتر سایت‌ها انجام شد. نسخه شاره ۷ از ابزار Lighthouse نیز ارائه شده و در نسخه رسمی و نهایی گوگل کروم ۸۹ قرار گرفته است. این نسخه در مارس سال ۲۰۲۱ عرضه‌شده است.

نحوه تست سایت‌ها بر اساس استفاده از ابزار Lighthouse گوگل

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

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

بخش‌های مختلف صفحه اصلی سایت شما در این ابزار بررسی می‌شود. صفحه‌هایی مربوط به ثبت‌نام، اشتراک‌ها و صفحات پرداخت و غیره

مقادیر زیر به عنوان نمونه تست صفحه اصلی به شما نشان داده‌شده است:

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

بخش مربوط به کلمات کلیدی سایت با نام Keyword Hero

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

بهینه‌سازی برای استفاده از سئو

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

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

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

چگونه Lighthouse را برای تست اجرا کنیم؟

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

آیا می‌خواهید تست‌های Seo را با دیگر داده‌ها ادغام کنید؟ بهتر است به سراغ بخش NPM بروید.

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

برای دریافت گزارش‌ها از ابزار Chrome Devtools استفاده کنید.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

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

برای اجرای Lighthouse مراحل زیر را دنبال کنید:

1. بخش incognito گوگل کروم را باز کنید.
2. وارد بخش لایت هاوس شوید. برای سیستم عامل ویندوز و لینوکس در مرورگر کروم کلیدهای زیر را به ترتیب بزنید :

Control + Shift + I

برای سیستم عامل مک از این کلیدها استفاده کنید :

Command + Option + I

1. تیک بخش چک باکس غیرفعال سازی کش را بزنید.
2. در داخل کنترل پنل لایت هاوس به گشت و گذار بپردازید.
3. بر روی گزارش‌گیری کلیک کنید
4. فایل گزارش ارائه ‌شده را ذخیره کنید.

فواید استفاده از Lighthouse

• شما می‌توانید وب‌سایت‌های محلی ( Local) که هنوز روی اینترنت بارگذاری نشده‌اند را با این ابزار بررسی کنید.( وب سایت محلی = وب سایتی که روی سیستم کاربر نصب شده و هنوز روی اینترنت قرار نگرفته است)
• می‌توانید گزارش‌های این وب‌سایت‌های محلی را نیز ذخیره کنید.

معایب استفاده از Lighthouse

• هر بار بررسی فقط یک گزارش به شما می‌دهد
• شما باید نتایج را به‌صورت دستی ذخیره کنید.

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

• ابتدا وارد آدرس ttps://web.dev/measure/ شوید
• با اکانت گوگل خود وارد شوید
• آدرس سایت خود را وارد کنید
• روی کلید Run Audit. کلیک کنید.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

فواید اجرای Lighthouse در قسمت web.dev

• تا زمانی که وارد سیستم باشید می‌توانید جدول زمانی مناسبی از نتایج سایت خود را مشاهده کنید.
• می‌توانید از لینک‌های دسترسی سریع به راه حل‌های مسائل استفاده کنید.( لینک هایی که برای حل مسائل قرار داده شده است.)
• می‌توانید گزارش‌های ایجاد شده را ذخیره کرده و با استفاده از ابزار Lighthouse C Diff آن‌ها را با هم بررسی کنید.

معایب اجرای Lighthouse در قسمت web.dev

• هر بار اجرا فقط یک گزارش به شما می‌دهد
• شما باید لینک‌هایی که بررسی می‌کنید را به خاطر داشته باشید. تا مجدد آنها را بررسی کنید.

برای تست نیز می‌توانید از خط فرمان زیر در مرورگر استفاده کنید.

• ابتدا NPM را نصب کنید. از کد زیر استفاده کنید:

1. npm install -g lighthouse

• یک متن را با استفاده از کد زیر اجرا کنید

lighthouse <url>

با اجرای برنامه تست و بررسی می‌توانید تست‌های مدنظر خود را در به‌صورت لیستی در مرورگر اجرا کنید.

فواید استفاده از lighthouse با استفاده از خط فرمان

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

معایب اجرای lighthouse با استفاده از خط فرمان

• برای این کار نیاز به دانش کد نویسی دارید.
• برای اینکه به خوبی با بخش‌های آن آشنا شوید نیاز به زمان بیشتری دارید.

توضیح معیارها و عملکردها در lighthouse

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

در نسخه‌های ۶ و ۷ منتشرشده از lighthouse امتیازهای داده‌شده بر اساس ۶ عملکرد اصلی است که مجموع این ۶ عملکرد کرد درصد کلی را نشان می‌دهد. این عملکردها نیز با درصدهای خود بیان می‌شوند.

جدول زیر این ۶ عملکرد و درصدهای آن را نشان می‌دهد.

بررسی بخش‌های مختلف این جدول

1. بخش اول بزرگ‌ترین محتوای رنگی و تصویری Largest Contentful Paint – LCP

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

نحوه اندازه‌گیری امتیاز آن: lighthouse

این ابزار داده‌های LCP را با استفاده از ابزارهای موجود در گوگل کروم استخراج و بررسی می‌کند که آیا این محتوای بزرگ‌ترین محتوای تصویری سایت است؟

اگر جواب بله باشد بر اساس مدت‌زمانی که آن را برای کاربر لود می‌کند شروع به امتیازدهی می‌کند. برای اینکه بتوانید امتیاز کامل را در این بخش دریافت کنید محتوای سایت شما باید در کمتر از ۲٫۵ ثانیه بارگذاری و لود شود. در این بخش وضعیت سایت شما به صورت نوار و نمودار رنگی نشان داده می شود.

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

چه محتواهایی شامل LCP می‌شوند؟

محتواهای متنی، عکسی و ویدیویی و تصاویر بک‌گراند سایت را می‌توان به عنوان LCP شناسایی کرد.

در سایت شما چه چیزهایی به عنوان LCP شناخته می‌شوند؟

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

نحوه استفاده از LCP با استفاده از Chrome Devtools

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

• مرورگر گوگل کروم را باز کنید
• به بخش Chrome Devtools بروید.
• بر روی نشانگر LCP در بخش Timings بروید.
• المان‌های مربوط به بخش Timings در قسمت Node به‌صورت مفصل شرح داده‌شده است.

چه مواردی باعث کم بودن درصد LCP می‌شود؟

• کند بودن پاسخ‌دهی سرور سرویس‌دهنده سایت شما
• بلوکه شدن پردازش‌های مربوط به JavaScript و CSS
• منابع خیلی سنگین که باعث طولانی شدن زمان پاسخ می‌شوند.
• اجراشدن پردازش‌های سنگین در قسمت کاربر (استفاده از کدهای پردازشی که باعث کند شدن سایت می‌شود.)

چگونه LCP ضعیف را برطرف کنیم؟

اگر مشکل سایت شما از سمت پاسخ‌دهی سرور باشد باید موارد زیر را انجام دهید:

• سرور سایت خود را بهینه کنید.
• از CDN ها استفاده کنید تا کاربران تجربه بهتری داشته باشند.
• از فناوری Cache سایت استفاده کنید.
• سایت را طوری تنظیم کنید که ابتدا کدهای HTML را Cache کند.
• بخش‌های ارتباطی سایت با کاربر را بهینه کنید.

اگر مشکل از سمت بلوکه کردن پردازش‌های کدهای جاوا اسکریپت و CSS باشد:

• CSS را بهینه کنید.
• CSS های غیرضروری را غیرفعال کنید
• CSS های ضروری را سریع‌تر اجرا کنید.
• فایل‌های جاوا اسکریپت را بهینه و فشرده‌سازی کنید.
• فایل‌های غیرضروری جاوا اسکریپت را غیرفعال کنید.
• فایل‌های polyfills استفاده نشده را به حداقل برسانید.

اگر مشکل از سمت منابع سنگین سایت باشد:

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

اگر مشکل از سمت کاربر و پردازش‌های آن باشد:

• بهتر است که فایل‌های مهم جاوا اسکریپت را به حداقل برسانید.
• از استراتژی‌های پردازشی متفاوت استفاده کنید.

1. بخش دوم – زمان مسدودی کامل یا Total Blocking Time -TBT

آنچه در این بخش مهم است مقدار زمان پاسخگویی به کاربر است. امتیاز آن در ابزار Lighthouse برابر با ۲۵ درصد است.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

این بخش چه چیزی را اندازه‌گیری می‌کند:

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

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

این بخش چگونه اندازه‌گیری می‌شود:

کل زمانی که برای لود رشته‌های اصلی سایت باید سپری شود چیزی در حدود ۵۰ میلی‌ثانیه است. حال اگر پردازش رشته‌های اصلی سایت ۸۰ میلی‌ثانیه طول بکشد این ۳۰ ثانیه اضافه به عنوان زمان TBT لحاظ می‌شود. همچنین اگر کل رشته‌های یک سایت در ۴۵ میلی‌ثانیه پردازش شوند مقدار زمان TBT برابر ۰ میلی‌ثانیه خواهد بود.

آیا زمان TBT برای سایت‌ها حیاتی و مهم است؟

بله بر اساس داده‌های به‌دست‌آمده هرچه مقدار زمان TBT کم باشد سایت‌ها سریع‌تر لود و پردازش می‌شوند. در جدول ارائه شده مقدار زمان مناسب برای لود سایت باید کمتر از ۳۰۰ میلی‌ثانیه باشد.

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

اگر اولین ورودی با تأخیر باشد زمان TBT نیز افزایش پیدا می‌کند.

کارهای سنگین که باعث افزایش TBT می‌شوند:

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

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

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

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

چه چیزی باعث طولانی شدن TBT می‌شود؟

• خیلی ساده است: کدهای جاوا اسکریپت خیلی سنگین

چگونه TBT را در سایت خود موردبررسی قرار دهیم؟

• صفحه گوگل کروم را باز کنیم.
• ابتدا وارد بخش Performance در ابزار Dev Tools می‌شویم.
• بر روی کلید reload button کلیک می‌کنیم تا سایت را مورد پردازش قرار دهد.
• به بخش‌های قرمزرنگ کادر نتایج توجه می‌کنیم. این بخش‌ها در واقع بخش‌هایی هستند که پردازش آن‌ها طولانی‌تر از مقدار مدنظر است.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

چگونه مشکلات مربوط به TBT را برطرف کنیم؟

• پردازش‌های طولانی را تا حد امکان به چند بخش تقسیم کنید.
• صفحه سایت خود را بهینه‌سازی کنید
• پردازش‌های جاوا اسکریپت را تا جای ممکن کاهش دهید.
• از web worker استفاده کنید.

1. بخش سوم: اولین بخش و محتوای رنگی سایت یا First Contentful Paint-FCP

این بخش FCP زمانی را نشان می‌دهد که اولین متن یا تصویر را به کاربر نمایش می‌دهد. امتیاز ارائه شده در این بخش ۱۵ درصد است. در این بخش شما می‌توانید زمانی را که سایت برای کاربر به نمایش داده می‌شود مشاهده کنید.

امتیاز FCP در Lighthouse در واقع مقایسه FCP واقعی و FCP صفحه سایت شما است. FCP واقعی بر اساس اندازه‌گیری داده‌های ذخیره شده در HTTP اندازه‌گیری می‌شود. هرچه که FCP سایت شما سریع‌تر باشد امتیازهای قرارگرفته در HTTP افزایش پیدا می‌کند.

آیا این بخش برای سایت‌ها حیاتی است؟

بله. هدف اصلی FCP رسیدن سرعت اجرای سایت‌ها به کمتر از ۲ ثانیه است.

چه چیزهایی به عنوان بخشی از FCP لحاظ می‌شوند؟

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

نکته مهم این است که iframes ها به عنوان بخشی از FCP محسوب نمی‌شوند. اگر اولین محتوای ارائه شده در قالب iframes باشد زمان بارگذاری FCP لحاظ نمی‌شود تا زمانی که اجرای iframes به پایان برسد.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

نحوه تعریف FCP با استفاده از Chrome Devtools

• ابتدا صفحه مرورگر گوگل کروم را باز کنید.
• به بخش Dev Tools بروید.
• بر روی نشانگر FCP در بخش Timings بروید.
• برگه و مشخصات ارائه شده دارای یک نشان‌گر زمانی است که مقدار FCP را بر اساس میلی‌ثانیه نشان می‌دهد.

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

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

سریع‌ترین راه برای دور زدن تأخیر در پردازش فایل‌ها استفاده از فایل‌های سبک درون سایت‌ها است.

برای اینکه سایت شما به‌صورت متناسبی سریع تر شود باید از ابزارهای مناسبی مانند penthouse و Apache mod_pagespeed استفاده کنید. این نکته را به یاد داشته باشید که این ابزارها دارای محدودیت‌هایی هستند و ممکن است برای همه سایت‌ها مناسب نباشند.

در حالت کلی شما می‌توانید با کاهش پردازش‌ها و پیچیدگی‌های یک سایت و سبک شدن محاسبات، زمان بارگذاری سایت خود را به‌ طور مناسبی کاهش داده و آن را برای First Contentful Paint بهبود ببخشیم.

اگر از محتوای خاصی در سایت شما استفاده نمی‌شود بهتر است که آن را حذف کنید. می‌توانید CSS های بلااستفاده را از سایت خود حذف کنید. می‌توانید از ابزار Google Analytics نیز برای بررسی بهتر و همبستگی بیشتر سایت نیز استفاده کنید.

1. بخش چهارم – شاخص سرعت یا همان Speed Index

آن چیزی که در این بخش اندازه گیری می‌شود مقدار زمان ممکن برای یک محتوا است. امتیازهای ارائه شده در Lighthouse برابر با ۱۵ درصد است. این شاخص در واقع میانگین زمانی است که قسمت‌های مختلف سایت قابل ‌نمایش می‌شود. نحوه اندازه‌گیری آن در ابزار Lighthouse با استفاده از یک ماژول به نام Speedline انجام می‌شود.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

آیا امتیاز Speed Index در سایت حیاتی است؟

خیر. هدف در این بخش رسیدن به زمانی کمتر از ۴٫۳ ثانیه است.

چگونه Speed Index را بهبود ببخشیم؟

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

هرچه مسیر رسیدن به این منابع حیاتی در سایت‌ها طولانی‌تر و پیچیده‌تر باشد سرعت سایت شما کندتر تر خواهد بود. اگر مسیر رسیدن به این منابع حیاتی بهینه‌تر شود سرعت سایت شما افزایش پیدا می‌کند. این کار باعث می‌شود که امتیاز بالاتری در Speed Index به دست بیاورید.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

• دسترسی به منابع حیاتی سایت را به حداقل برسانید.
• زمان اجرای جاوا اسکریپت‌ها را کاهش دهید.
• درخواست‌های بحرانی موجود در سایت (Critical Requests Depth) را به حداقل برسانید.
• منابع مسدود شده در سایت را به حداقل برسانید.
• پردازش تصاویر خارج از سایت (offscreen images) را به تعویق بیندازید.

1. بخش پنجم – برسی زمان تعامل با سایت یا همان Time to Interactive

این ابزار صفحات سایت هایی را که واکنشگرا (responsive) به نظر می‌رسند اما در واقعیت responsive نیستند را شناسایی و بررسی می‌کند. امتیاز ارائه شده این بخش در Lighthouse برابر با ۱۵ درصد است.

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

صفحات responsive شامل موارد زیر می‌شود:

• صفحه‌ای که محتوای مفیدی را نشان می‌دهد و با استفاده از بخش First Contentful Paint اندازه‌گیری می‌شود.
• کنترل کننده‌های این بخش در واقع بیشتر عناصر موجود در صفحه را ثبت و شناسایی می‌کنند.
• صفحه باید در عرض ۵۰ میلی‌ثانیه به تعاملات کاربر پاسخ دهد.

آیا Time to Interactive برای سایت‌ها مهم است؟

بله- نحوه امتیازدهی این بخش این است که زمان TTI باید کمتر از ۳٫۸ ثانیه باشد.

1. بخش ششم Cumulative Layout Shift- CLS

این بخش مربوط به درک کاربر از بخش بصری یک صفحه است. امتیاز این بخش در Lighthouse برابر با ۵ درصد است.

نکته مهم در خصوص این بخش این است که امتیاز این بخش در حال حاضر ۵ درصد است و ممکن است در آینده این بخش امتیاز خود را افزایش دهد. انتظار می‌رود که امتیاز این بخش در سه ماهه آخر سال ۲۰۲۱ افزایش داشته باشد.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

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

چه عناصری شامل CLS می‌شود؟

بر اساس معیارهای گوگل هر عنصری که در بالای آن نقطه چین ظاهر شود جزء CLS خواهد بود. نکته مهم این است که ابتدا باید منابع اصلی خود را بارگذاری کنید و سپس محتوای تصویری را بارگذاری کنید تا CLS شما آسیب نبیند.

عوامل ضعف CLS

• تصاویر بدون dimensions(ابعاد تصاویر بهینه نباشد)
• تبلیغات و جداسازی فریم‌های متحرک در بخش‌های مختلف سایت
• تزریق محتواهای پویا در بخش‌های مختلف سایت
• فونت‌های غیرمتعارف در سایت
• مجموعه موارد و اقداماتی که قبل از اجرا منتظر پاسخ‌دهی شبکه می‌مانند.

نحوه استفاده از CLS با استفاده از ابزار Chrome Devtools

• ابتدا صفحه مرورگر گوگل کروم را باز کنید.
• به بخش Dev Tools بروید.
• در بین اسکرین شات های سایت حرکت کنید. این اسکرین شات ها به‌صورت اسلاید و از سمت چپ به راست می‌روید.
• به دنبال عناصر رنگی که در نتایج سایت وجود دارد باشید.

راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse

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

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

برخی از روش‌های معمول برای بهبود CLS عبارت‌اند از:

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

نتیجه‌گیری:

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

ابزار Google’s Test My Site چه فوایدی برای سایت‌های من دارد؟

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

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

نوشته عنوان راهنمای فنی استفاده از قابلیت‌های ابزار بهبود سئوی Lighthouse اولین بار در الفدالپِ | دنیای دیجیتال مارکتینگ | سئو کاربردی |هرآنچه باید بدانید. پدیدار شد.

source https://alefdalpe.ir/lighthouse-for-seo/