روش های استفاده از Google Lighthouse

چه‌طور از Google Lighthouse استعمال کنیم؟

برای آزمودن وبسایت به کمک فانوس دریایی گوگل طرق تحت وجود داراست:

 DevTools مرورگر کروم (همان کلیک راست و انتخاب Inspect یا زدن دکمه F12)

نصب افزونه Lighthouse روی مرورگر کروم

آموزش سئو مشهد

ابزارهای واسطه

به کارگیری از طریق خط امر یا اتصال به ماژول‌های نرم افزار‌نویسی شده

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

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

مطلقا بخوانید: اینفوگرافیک: نکات اساسی سئو داخلی وبسایت

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

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

شیوه نخستین: اجرای Google Lighthouse از Devtools مرورگر کروم

ورقه مورد نظر خود را در مرورگر کروم باز نمایید. آن گاه کلید F12 را بزنید (یا Fn+ F12 در اکثر لپ‌تاپ‌ها) یا کلید‌های ترکیبی در ویندوز (Control+Shift+I) و مک (Command+Option+I) تا developer tools باز گردد.

در بالای داک باز شده به تب Audits بروید.

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

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

نکته: Google Lighthouse یک نرم افزار متن باز می‌باشد. تغییرات و به‌روزرسانی‌های انجام شده در آن به مرور و شاید غیرهمزمان در ابزار Devtools مرورگر کروم (طرز اول) و افزونه آن (روش دوم) ایفا گردد. پس به همین برهان امکان دارد گزارش این دو طریق مقداری مختلف باشد. در زمان نوشتن این نوشته‌علمی، نسخه لایت هاوس 5.2.0 هست.

نکات اصلی درباره اجرای آزمون Lighthouse و مورد‌های قابل تعیین

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

1) در صورتی روی مرورگر کروم افزونه‌های دیگری مثل حذف کننده‌های تبلیغات، نظارت کننده‌های برگه و ... نصب کرده‌اید، خوب هست قبل از جاری ساختن تست Lighthouse تمامی افزونه‌ها را فعلا غیرفعال کنید.

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

3) آزمون لایت هاوس گوگل در شرایط بی آلایش بسیار سختگیرانه طراحی شده، اما با این اکنون گزینه‌‌ای به نام موقعیت دشوار شبیه‌سازی شده (Simulated throttling) در آن گنجانده شده تا این آزمون سخت‌تر شود. یعنی سرعت اینترنت و پردازشگر (CPU) تا حدی کاهش داده می گردد. هدف از این شغل شبیه‌سازی یک دستگاه با طاقت فرسا‌افزار و سرعت اینترنت ضعیف می‌باشد. این گزینه قبل از تست قابل تعیین است.

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

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

در شیوه اول (Devtools) حالت گوشی از دسکتاپ غیر وابسته شده است. با تمرکز به اینکه نسخۀ موبایل و دسکتاپ اکثری از وب سایت‌ها متفاوت می باشند، میتوانید تست را برای حالت دلخواه ایفا نمائید.

اجرای Lighthouse

برای جاری ساختن تست شیت مورد نظر را باز فرمایید. روی افزونه لایت هاوس کلیک فرمایید یا Devtools را باز فرمایید.

در نصیب option افزونه یا منوی تنظیمات Devtools می توانید تست‌های مورد نیاز را گزینش نمایید.

گزینه‌های قابل انتخاب همان بخش‌های آزمون میباشند. شامل Performance، Accessibility، Best Practices، سئو و PWA که هر مورد را به دلخواه می توانید غیرفعال فرمائید. در Devtools دربین موبایل یا دسکتاپ یکی از را گزینش فرمایید.

Generate Report در افزونه یا Run Audit را در Devtools بزنید و جهت دریافت گزارش پاره ای صبر نمایید. گزارش در یک پنجره جدید باز میشود.

می‌توانید گزارش را در قالب‌های PDF، HTML و ... با انتخاب از منوی بالا سمت راست (سه نقطه) ذخیره فرمائید.

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

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

آزمون سرعت بارگذاری و همت کاغذ (Performance)

این آزمون جمعاَ بررسی می‌کند که کاغذ مورد نظر تا چه اندازه برای مشاهده و تعامل باصرفه‌سازی گردیده‌است. سرعت لود و فرایند بارگذاری دو فاکتور مهم در تلاش می باشند.

قطعا بخوانید: الگوریتم کبوتر گوگل چیست و چه تاثیری روی جایگاه تارنما شما دارد؟

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

اکنون این شاخص‌ها را معرفی می کنیم.

شاخص‌ها (Metrics)

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