Google Lighthouse چیست؟ راهنمای جامع بهینه‌سازی سایت

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

معرفی Google Lighthouse 

Google Lighthouseبه معنی فانوس دریایی گوگل یک ابزار (Open Source) و خودکار از گوگل است که برای ارزیابی و بهینه‌سازی عملکرد صفحات وب‌سایت‌ها طراحی شده است. این ابزار گوگل معیارهای مختلف مانند عملکرد، قابلیت دسترسی‌، سئو (میزان بهینه بودن صفحات سایت) را بررسی می‌کند و پیشنهادات بهبود ارائه می‌دهد. معیارهای اصلیGoogle Lighthouse  عبارتند از:

عملکرد صفحه (Performance)

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

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

• FCP: اولین نشانه از بارگذاری سایت (First Contentful Paint) شاخصی است که نشان می‌دهد صفحه شروع به بارگذاری کرده است؛ اما لزوماً هنوز چیزی معنی‌دار برای کاربر نمایش داده نشده است. FCP، مثل این است که شما کلید روشن شدن چراغ را می‌زنید، اما هنوز لامپ کاملاً روشن نشده است.
• FMP: اولین ترسیم محتوای اصلی و معنادار (First Meaningful Paint) به معنی مدت زمانی که طول می‌کشد تا کاربر اولین بخش‌های مهم صفحه وب مانند متن، تصویر و... را ببیند. این زمان با واحد ثانیه اندازه‌گیری می‌شود.

• LCP: بزرگ‌ترین ترسیم محتوایی (Largest Contentful Paint) نشان‌دهنده سرعت بارگذاری محتوای اصلی است. در واقع، این معیار زمان لازم برای بارگذاری بزرگ‌ترین عنصر محتوایی در صفحه را نشان می‌دهد. به عبارت ساده، LCP مثل این است که ببینید مهم‌ترین قسمت یک صفحه وب، چه زمانی جلوی چشم کاربر ظاهر می‌شود.
• TTI: مدت زمان تعامل سایت با کاربر (Time to Interactive) را نشان می‌دهد. یعنی مدت زمانی که طول می‌کشد تا یک صفحه وب کاملاً آماده استفاده شود و کاربر بتواند با تمامی عناصر و قسمت‌های صفحه وب تعامل داشته باشد. 
• TBT: کل زمان مسدودکننده (Total Blocking Time) مدت زمانی است که در آن صفحه وب در طول بارگذاری، غیر قابل تعامل می‌شود. به زبان ساده‌تر، TBT به شما می‌گوید که چقدر طول می‌کشد تا کاربر بتواند با سایت شما کار کند. اگر TBT بالا باشد، کاربر تجربه خوبی از سایت شما نخواهد داشت و ممکن است سایت را ترک کند.
• CLS: تغییر چیدمان تجمعی (Cumulative Layout Shift) یکی از معیارهای مهم در ارزیابی تجربه کاربری وب‌سایت‌ها است. CLS میزان پایداری چیدمان صفحه در حین بارگذاری و ثبات بصری یک آن را اندازه‌گیری می‌کند. در واقع، این معیار وظیفه بررسی سایت را برعهده دارد تا ببینید وقتی یک سایت باز می‌شود، چقدر مرتب و منظم است؛ به این منظور که آیا المان‌های صفحه مانند تصاویر، دکمه‌ها یا متن به‌صورت ناگهانی و غیرمنتظره جابه‌جا می‌شوند یا خیر.
• SI: شاخص سرعت (Speed index) به شما می‌گوید که وقتی کسی وارد سایت شما می‌شود، چه قدر طول می‌کشد تا محتواهای سایت را ببیند. هر چه این زمان کم‌تر باشد، یعنی سایت شما سریع‌تر است و کاربر زودتر می‌تواند محتوای سایت را ببیند. این شاخص با واحد میلی‌ثانیه اندازه گیری می‌شود.

مقالات بیشتر: بهترین ابزارهای تست سرعت سایت

قابلیت دسترسی‌ (Accessibility)

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

اطلاعات بیشتر: ایده کسب و کار برای افراد دارای معلولیت

سئو (SEO)

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

بیشتر بدانید: نحوه نوشتن آدرس اینترنتی کاربر پسند؛ تأثیر URL در سئو

بهترین روش‌ها (Best Practices)

بخش Best Practices در گوگل لایت هاوس، مثل یک چک لیست برای امنیت و کیفیت سایت شماست. این بخش بررسی می‌کند که آیا سایت شما طبق استانداردهای روز ساخته شده و امنیت کافی دارد یا خیر. در کل این بخش بررسی سایت را از نظر امنیت و کیفیت کدنویسی برعهده دارد و به شما کمک می‌کند تا مشکلات مربوط به امنیت، استفاده از APIهای منسوخ شده و سایر موارد را شناسایی و برطرف کنید. در واقع، این بخش به شما کمک می‌کند تا مطمئن شوید که سایت شما از نظر امنیتی و کیفیتی در سطح بالایی قرار دارد.

وب اپلیکیشن‌های پیش‌رونده (PWA)

PWA مخفف Progressive Web Apps است و قابلیت سایت برای تبدیل شدن به یک اپلیکیشن تحت وب را بررسی می‌کند. این بخش نقش مهمی در ارزیابی و بهینه‌سازی سایت‌هایی دارد که قصد دارند به‌عنوان یک اپلیکیشن وب پیشرفته عمل کنند. به بیان واضح‌تر، PWA بررسی می‌کند که آیا وب‌سایت شما ویژگی‌هایی دارد که آن را شبیه به یک اپلیکیشن موبایل کند. این ویژگی‌ها در ادامه آمده‌اند:

• قابلیت اجرا در حالت آفلاین: لایت هاوس عملکرد PWA شما را در شرایط مختلف شبکه، از جمله حالت آفلاین، ارزیابی می‌کند. این بخش بررسی می‌کند که آیا سایت شما از سرویس ورکرها (Service Workers) برای ذخیره کردن اطلاعات استفاده می‌کند؟

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

• نمایش تمام صفحه (Full-Screen Mode): آیا سایت شما از  «Web App Manifest» استفاده می‌کند تا بتواند مثل یک برنامه واقعی، نه فقط به عنوان یک صفحه وب، اجرا شود؟ اگر جواب این سؤال‌ها مثبت باشد؛ یعنی سایت شما از مانیفیست استفاده می‌کند و می‌تواند به صورت تمام صفحه اجرا شود. این کار باعث می‌شود تجربه کاربری بهتر شود و سایتتان بیشتر شبیه یک اپلیکیشن واقعی به نظر برسد.
• بارگذاری سریع و بهینه: به این معنی است که سایت شما باید جوری ساخته شده باشد که حتی در شرایط اینترنت ضعیف، باز هم خوب و سریع کار کند و تجربه خوبی به کاربران ارائه دهد.
• پروتکل HTTPS: برای اینکه برنامه‌های وب پیشرو (PWA) امن‌تر باشند، باید روی پروتکل امن HTTPS اجرا شوند. این پروتکل مانند یک قفل امنیتی است که اطلاعات بین سایت و کاربر را رمزگذاری کرده و از دزدیده‌شدن اطلاعات جلوگیری می‌کند.
• ریسپانسیو بودن:  این گزینه یعنی وقتی سایت را روی گوشی، تبلت یا کامپیوتر باز می‌کنید، همه چیز مرتب و درست نشان داده شود. لازم نباشد صفحه را چپ و راست کنید یا خیلی زوم کنید تا نوشته‌ها را بخوانید. به زبان ساده‌تر، سایت باید خودش را با اندازه صفحه نمایش دستگاه شما تنظیم کند. به طور کلی، یعنی طراحی سایت باید روی دستگاه‌های مختلف به‌خوبی نمایش داده شود.

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

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

استفاده از DevTools در مرورگر گوگل کروم

برای اجرای Lighthouse از DevTools:

1. مرورگر Google Chrome را باز کنید و به صفحه موردنظر بروید.
2. دکمه‌های (Ctrl + Shift + I) یا(Fn+F12 در بیشتر لپ‌تاپ‌ها) در ویندوز یا (Command+Option+I) در مک را فشار دهید تا DevTools باز شود.
3. به تب Lighthouse بروید.
4. بخش‌های موردنظر اعم از Performance، SEO، Accessibility و... را برای تحلیل انتخاب کنید. 
5. روی Generate Report کلیک کنید.

استفاده از افزونه Google Lighthouse

اگر نمی‌خواهید از DevTools استفاده کنید، می‌توانید افزونه Lighthouse را از Chrome Web Store نصب کنید:

1. به Chrome Web Store بروید و Lighthouse Extension را جستجو کنید.
2. افزونه را نصب کرده و آن را فعال کنید.
3. روی آیکون Lighthouse در نوار ابزار کلیک کرده و Generate Report را بزنید.

اجرای Lighthouse از طریق Page Speed Insights

می‌توانید از سایت Page Speed Insights نیز استفاده کنید:

1. به صفحه Page Speed Insights بروید.
2. آدرس وب‌سایت خود را وارد کنید.
3. روی Analyze کلیک کنید.

نتیجه این عمل، اجرا شدن تحلیل Google Lighthouse روی سرورهای گوگل و نمایش امتیازات سایت (امتیاز Lighthouse) است.

دو راه دیگر نیز برای استفاده از ابزار گوگل لایت هاوس وجود دارد:

• اجرای Lighthouse از طریق خط فرمان: فرض کنید شما یک سری دستورات تایپ می‌کنید و لایت هاوس طبق آن دستورات کار می‌کند. در واقع با این روش می‌توانید آن را کنترل کنید.
• اجرای لایت هاوس اتصال به ماژول‌ها یا برنامه‌های کدنویسی شده اختصاصی: این یعنی شما به عنوان برنامه‌نویس‌ می‌توانید لایت هاوس را به سایر برنامه‌هایی وصل کنید که خودتان برنامه نویسی کرده‌اید. این روش برای کاربردی است. تا بتوانند لایت هاوس را در برنامه‌های خود جای دهند.

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

در فضای اینترنت، کاربران انتظار دارند وب‌سایت‌ها با سرعت بالایی داشته باشند و صفحات وب در عرض چند ثانیه بارگذاری شوند که نهایتاً تجربه کاربری بی‌نقصی را ارائه دهند؛ در غیر این صورت، احتمال ترک سایت توسط آن‌ها افزایش می‌یابد؛ اما سؤال اینجاست که چه چیزی یک باعث می‌شود یک وب‌سایت سریع و کاربردی باشد؟ در این بخش به بررسی راهکارهای بهینه‌سازی عملکرد سایت می‌پردازیم تا شما را در مسیر تبدیل وب‌سایت خود به یک تجربه آنلاین بی‌نظیر همراهی کنیم.

بهینه‌سازی سرعت بارگذاری

سرعت بارگذاری سایت یکی از مهم‌ترین فاکتورهای سئو و تجربه کاربری است. مطالعات نشان داده‌اند که اگر یک صفحه در کمتر از 3 ثانیه بارگذاری نشود، بسیاری از کاربران سایت را ترک خواهند کرد. برای بهینه‌سازی سرعت بارگذاری باید موارد زیر را درنظر بگیرید: 

• کاهش حجم تصاویر با استفاده از فرمت‌های جدید مثل WebP یا AVIF به جای JPEG و PNG
• فشرده‌سازی فایل‌های CSS، JavaScript   وHTML
• استفاده از قابلیت Lazy Loading (بارگذاری تنبل) برای بارگذاری تصاویر و ویدئوها.
• کاهش تعداد درخواست‌های HTTP با ادغام فایل‌های CSS و JavaScript.

بهبود زمان پاسخگویی سرور

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

• کاهش تأخیر بارگذاری و زود لو شدن سایت با استفاده از CDN (شبکه پخش محتوا)
• کاهش زمان پاسخگویی سایت به درخواست‌ها با بهینه‌سازی پایگاه داده
• استفاده از سرورهای پرقدرت و هاستینگ با کیفیت 

بهبود تجربه کاربری

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

اطلاعات بیشتر: رابط کاربری (UI) چیست؟

• کم کردن حجم کدهای جاوا اسکریپت (JavaScript) که جلوی نمایش صفحه را می‌گیرند (Render Blocking JavaScript).
• بهینه‌سازی کدهای CSS و JavaScript با حذف منابع بلااستفاده از این کدها
• کاهش مقدار (CLS) تغییر چیدمان تجمعی برای جلوگیری از تغییر ناگهانی عناصر صفحه

بهینه‌سازی قابلیت دسترسی سایت

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

• استفاده از متن جایگزین (Alt text) برایعکس‌ها
• انتخاب مناسب رنگ‌ها برای خوانایی بهتر و آسان‌تر
• افزودن توضیحات عناصر تعاملی مانند به دکمه‌ها و لینک‌ها برای استفاده راحت از بخش‌های مختلف سایت

افزایش امنیت و استفاده از بهترین اقدامات

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

• استفاده از HTTPS برای امنیت ارتباطات سایت
• جلوگیری از بارگذاری اسکریپت‌های ناامن (Mixed Content) یا به عبارت ساده، جلوگیری از بارگذاری فایل‌های برنامه‌نویسی خطرناک
• به‌روزرسانی مداوم افزونه‌ها و فریم‌ورک‌های (Framework) مورد استفاده

با Google Lighthouse سایت خود را سریع‌تر و کاربرپسندتر کنید

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

پرتال با ارائه قالب‌های بهینه ضمن اینکه فرابند راه‌اندازی سایت را آسان‌ می‌کند، به تسهیل روند بهبود تجربه کاربری و سئو سایت شما نیز کمک می‌کند. اگر در این زمینه سؤالی دارید با کارشناسان ما با شماره 02191003383 داخلی تماس بگیرید و از کمک آن‌ها بهره‌مند شوید. همچنین می‌توانید نظرات خود را در قسمت دیدگاه‌ها با ما به اشتراک بگذارید.

سؤالات متداول

• آیا بازاریابی دهان به دهان واقعاً مؤثر است؟

بازاریابی دهان به دهان یکی از قوی‌ترین و مؤثرترین روش‌ها برای جذب مشتری است. وقتی مشتریان راضی تجربه مثبت خود را با دیگران به اشتراک می‌گذارند، حس اعتماد بیشتری ایجاد می‌شود که بسیار بیشتر از تبلیغات روی بقیه تأثیرگذار است و می‌تواند به جذب مشتریان جدید منجر شود. 

• آیا بهینه‌سازی ‌سایت برای موتورهای جستجو (SEO) می‌تواند به جذب مشتری کمک کند؟

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

• چگونه می‌توانید از شبکه‌های اجتماعی برای جذب مشتریان جدید استفاده کنید؟

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

• چگونه می‌توانید مشتریان فعلی را به معرفی کسب‌وکارم به دیگران ترغیب کنید؟

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