Google Lighthouse چیست؟ راهنمای کامل از 0 تا 100

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

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

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

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

در ابتدا به صورت مختصر با Google Lighthouse آشنا شده و سپس به تفصیل به هر بخش از آزمون و گزارش آن می‌پردازیم.

Google Lighthouse چیست؟

موقعی که به یک رستوران می‌روید، انتظار دارید که غذا به موقع و کامل ارائه شود، اما برخی از اتفاقات ممکن است این تجربه را برای شما تلخ کند. اگر شما هم مانند من تجربه‌ای از این قبیل داشته‌اید، مطمئناً می‌فهمید که چگونه یک جزء کوچک می‌تواند تمام تجربه را تغییر دهد.

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

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

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

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

Google Lighthouse در پنج حوزه مهم تمرکز داره:

• اجرا (Performance)
• تجربه برتر (Best Practices)
• دسترسی‌پذیری (Accessibility)
• بهینه‌سازی برای موتورهای جستجو (SEO)
• وب اپلیکیشن پیش‌رونده (PWA)

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

حالا وقتشه که این تست رو اجرا کنیم!

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

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

1.  DevTools مرورگر گوگل کروم یا مرورگرهای بر پایه هسته کرومیوم (همان کلیک راست و انتخاب Inspect یا زدن دکمه F12)
2. نصب افزونه Lighthouse روی مرورگر کروم یا مرورگرهای بر پایه هسته کرومیوم (مایکروسافت ادج، اپرا و…)
3. ابزارهای واسطه ای از api این سرویس استفاده میکنند
4. استفاده از طریق خط فرمان یا اتصال به ماژول‌های برنامه‌نویسی شده اختصاصی

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

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

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

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

روش اول: اجرای Google Lighthouse از Devtools مرورگر کروم

مرورگر کروم را باز کرده و کلید F12 را فشار دهید (یا Fn+F12 در بیشتر لپ‌تاپ‌ها) یا کلید‌های ترکیبی در ویندوز (Control+Shift+I) و مک (Command+Option+I) را بفشارید تا ابزارهای توسعه باز شود.

سپس به تب Audits در بالای پنجره‌ی باز شده بروید.

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

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

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

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

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

1. اگه توی مرورگر کروم افزونه‌هایی مثل حذف تبلیغات یا آنالیز صفحه داری، بهتره قبل از شروع تست، همه‌شونو موقتا غیرفعال کنی.
2. وقتی تستو انجام می‌ده، بقیه‌ی نرم‌افزارها که از پهنای باند یا منابع سخت‌افزاری زیادی استفاده می‌کنند رو ببند.
3. آزمون لایت‌هاوس گوگل خیلی سخت‌گیره، ولی یه گزینه داره به اسم شرایط سخت شبیه‌سازی شده که تستو سخت‌تر می‌کنه. باعث میشه سرعت اینترنت و پردازشگر کم بشه تا شبیه‌سازی کنه یه دستگاه با سخت‌افزار و سرعت ضعیف. می‌تونی قبل از تست اینو انتخاب کنی.
4. بعضی از ایرادهایی که توی نتایج تست میاد، ممکنه قابل بحث باشه. برای مثال، گوگل توصیه می‌کنه از فرمت تصویر WebP استفاده کنی ولی هنوز همه‌جا استفاده نمیشه و تاثیرش همیشه مثل انتظار نیست.
5. بخشی از گزارش مربوط به وب اپلیکیشن‌هاست. اگه وب‌سایتت نسخه وب‌اپ داره، نتایجش تو این بخش نشون داده میشه. مثلا جیمیل یا اوبر نسخه وب‌اپ دارن که می‌تونی بدون نصب اپلیکیشن ازشون استفاده کنی، حتی آفلاین هم قابل استفاده‌ان.

در روش اول (Devtools) حالت موبایل از دسکتاپ جدا شده، و این باعث میشه که تست رو برای حالت دلخواه اجرا کنی.

اجرای Lighthouse

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

• با انتخاب گزینه‌های مربوط به افزونه یا منوی تنظیمات Devtools، امکان انتخاب و اجرای تست‌های مورد نیاز به راحتی در دست شماست. با این امکان، به سادگی می‌توانید تنظیمات موردنیاز را برای تست‌های خود انجام داده و به بهبود کارایی و عملکرد خود بپردازید.
• بخش‌های قابل انتخاب، دقیقاً آن گونه ابزارهای آزمایشی هستند که شما به دنبالشان می‌گردید. این ابزارها، از جمله Performance، Accessibility، Best Practices، SEO و PWA هر یک با امکاناتی فوق‌العاده ارائه شده‌اند که شما می‌توانید هر یک را به سادگی فعال یا غیرفعال کنید. از Devtools، می‌توانید بین محیط موبایل و یا دسکتاپ، هر کدام را که نیاز دارید، انتخاب کنید و با دقت بیشتری به تحلیل خود بپردازید.
• با فشردن دکمه “Generate Report” در افزونه یا اجرای “Run Audit” در Devtools، به سرعت و آسانی می‌توانید به گزارش مورد نظرتان دسترسی پیدا کنید. کافی است کمی منتظر بمانید تا گزارش موردنظر شما در یک پنجره جدید باز شود و تمام جزییات مهم را در اختیار داشته باشید.

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

• مرحبا! بخش بالای گزارش، با دایره‌های رنگی از 0 تا 100 امتیاز نهایی هر بخش از آزمون را نشان می‌دهد. این امتیازها، نتایج دقیق‌تری را در ادامه گزارش ارائه می‌دهند. رنگ سبز نشان دهنده عملکرد بی‌نقص، زرد بیانگر عملکرد متوسط و رنگ قرمز نشان‌دهنده نیاز به بهبود وضعیت است.

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

آزمون سرعت بارگذاری و عملکرد صفحه (Performance)

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

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

حالا به معرفی این شاخص‌ها می‌پردازیم.

شاخص‌ها (Metrics)

بخش Performance، مهمترین بخش در ارزیابی معیارهای کارایی است. این بخش شامل شاخص‌هایی است که تاثیر بسیار زیادی در عملکرد نهایی دارند. هر یک از این شاخص‌ها ویژگی‌های منحصربه‌فردی دارند که به ارزیابی دقیق‌تر کمک می‌کنند. در صورتی که اطلاعات کمی مبهم به نظر می‌رسد، صبر کنید؛ زیرا در ادامه این موضوعات به شیوه‌ای شفاف و روشن بیان می‌شوند.

اولین ترسیم محتوا First Contentful Paint یا FCP

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

لایت هاوس چطور FCP را محاسبه می‌کند؟

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

به عنوان مثال، اگر 99 درصد از وب‌سایت‌ها FCP با زمان 1/5 ثانیه داشته باشند و وب‌سایت شما در آزمون اولین ترسیم معنادار، در زمان 1/5 ثانیه بارگذاری شود، امتیاز شما 99 از 100 خواهد بود. این اطلاعات در میانگین سرعت بارگذاری FCP وب‌سایت‌ها در سایت HTTParchive قابل مشاهده است. این روش برای سایر شاخص‌های زمانی نیز به کار می‌رود.

جدول زیر نشان‌دهنده‌ی امتیازهای تقریبی بر اساس سرعت بارگذاری است. به عنوان مثال، اگر FCP صفحه‌ای بین 0 تا 2 ثانیه داشته باشد، امتیاز آن می‌تواند از 75 تا 100 باشد که به مقایسه با سایر وب‌سایت‌ها، یک امتیاز خوب را نشان می‌دهد.

تأثیر FCP در امتیاز کل عملکرد، سه از پنج است. بالاتر بودن ضریب تأثیر به معنای تأثیر بیشتر در امتیاز کل است.

این نکته را هم به یاد داشته باشید: ضریب تأثیر همانند ضریب تأثیر نمرات دروس در دانشگاه یا مدرسه بر روی معدل نهایی است.

اولین ترسیم معنادار First Meaningful Paint

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

در جدول زیر، می‌توانید نمونه‌ای از زمان مطلوب 2 ثانیه‌ای را مشاهده کنید. فاکتور FMP، یکی از پنج عامل تأثیرگذار بر عملکرد است که با ارزش 1 از 5، کمترین تأثیر را دارد.

اولین استراحت پردازنده First CPU Idle

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

ضریب تاثیر First CPU Idle رتبه‌بندی 2 از 5 را دارد. در بهترین حالت، صفحه باید در بازه زمانی 0 تا 4/7 ثانیه، قابلیت تعامل حداقلی را داشته باشد.

زمان تعامل Time to Interactive

با تمرکز بر شاخص TTF، می‌توان به دقت بیشتری به تعامل صفحات پرداخت. زمانی که تمام ابزارها و ورودی‌های صفحه به سرعت و بدون هیچ تأخیری پاسخ می‌دهند، تجربه کاربری بهبود می‌یابد. میانگین زمان بین 0 تا 5/2 ثانیه به عنوان یک امتیاز خوب و سریع در نظر گرفته می‌شود که نشان دهنده کیفیت و سرعت صفحه است.

ضریب تأثیر بالای TTF که به اندازه 5 است، نشانگر اهمیت بیشتر این شاخص در ارزیابی عملکرد صفحه است.

برای بهتر درک کردن این شاخص‌ها، بهتر است به تصویر بارگذاری یک جستجوی گوگل فکر کنیم. تغییرات ابتدایی در صفحه (First Paint) شامل این نیستند، اما به سرعت به چشم می‌آیند. سپس اولین نمایش محتوا (FCP) و سپس نمایش معنادار (FMP) دیده می‌شوند. در نهایت، صفحه به وضعیت تعاملی می‌رسد.

زمان ورودی تخمینی Estimated Input Latency

به عنوان یکی از عوامل مهم در تجربه کاربری، فاصله زمانی بین تصور کاربر و واقعیت تعامل، در دنیای اپلیکیشن‌های وب حیاتی است. وقتی کاربر فکر می‌کند “اینجا قابل تعامل است” تا زمانی که واقعاً اقدام به تعامل می‌کند، همه چیز در این دوران حساب می‌شود. این بازه زمانی از اهمیت ویژه‌ای برخوردار است؛ زیرا کاربر نباید به پس‌زمینه‌ها و پردازش‌های زمان‌بر برای شروع تعامل نیاز داشته باشد.

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

ایندکس سرعت Speed Index

معیار سرعت نمایش محتوا، به زبان ساده، زمانی است که صفحه وب یا وب‌اپلیکیشن در زمان بارگذاری خود نمایش داده می‌شود. فرض کنید چقدر زمان می‌برد تا یک فیلم باز شود، از لحظه اینتر زدن تا زمانی که کاملاً بارگذاری شود و هر مرحله از این بارگذاری را در نظر بگیرید. زمانی که هر مرحله ثابت یا مشخصی طول می‌کشد تا به مرحله بعدی برسد، این زمان‌ها محاسبه شده و میانگین‌شان گرفته می‌شود. این میانگین به صورت ثانیه‌ای بیان می‌شود و به عنوان “Speed Index” شناخته می‌شود.

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

جدول زیر نشان می‌دهد که Speed Index در بهترین حالت باید بین 0 تا 4/3 ثانیه باشد و اهمیتی معادل عدد 4 از 5 دارد.

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

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

بررسی گزارش عملکرد و راهکارهای بهینه‌سازی

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

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

گزارش Lighthouse به سه دسته اصلی تقسیم می‌شود: فرصت‌ها (Opportunities) که موارد بهبودی را نشان می‌دهد، تشخیص‌ها (Diagnostics) که مشکلات را شناسایی می‌کند و موفقیت‌ها (Passed audits) که آزمون‌هایی را که با موفقیت پشت سر گذاشته‌اند، نمایش می‌دهد. بخش موفقیت‌ها آزمون‌هایی را که مشکلی نداشتند، لیست می‌کند. اما در دو بخش دیگر، هر مشکلی که شناسایی شده است به همراه منبع آن و راه‌حل‌های پیشنهادی برای آن ذکر می‌شود.

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

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

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

تاخیر نمایش تصاویر بیرون از نمایش اولیه Defer offscreen images

بخش Offscreen در وب‌سایت به محتوایی اشاره دارد که برای دیدن آن، کاربر نیاز به اسکرول کردن به پایین یا فعال کردن دکمه‌ای دارد. بارگذاری تصاویر این بخش در ابتدا ضروری نیست و می‌توان از روش Lazy Loading استفاده کرد. این روش به کاربر این امکان را می‌دهد که هنگامی که به پایین صفحه حرکت می‌کند، تصاویر به صورت زمانبندی شده بارگذاری شوند.

برای سایت‌های وردپرسی، استفاده از افزونه‌هایی مانند بهینه‌سازی تصاویر Smush Image Optimization، Autoptimize یا Lazy Load by WP Rocket پیشنهاد می‌شود. این افزونه‌ها به شما کمک می‌کنند تا مصرف منابع را بهینه‌سازی کرده و سرعت بارگذاری صفحات را افزایش دهند.

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

بخشی از ارزیابی تصاویر در اینجا براساس اندازه واقعی آن‌ها است. اگر حجم تصاویر با یکدیگر تفاوت بیشتر از 25 کیلوبایت داشته باشد، در این مرحله از تست گذر نمی‌کنند. مثالی را برداشته و اشاره می‌کنیم که اگر تصویر در صفحه ابعاد 700 در 400 پیکسل داشته باشد اما در اصل تصویر آپلود شده اندازه‌ای برابر با 1400 در 800 پیکسل داشته باشد، مرورگر تصویر بزرگتر دریافت کرده و سپس به صورت کوچکتر نمایش می‌دهد.

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

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

همچنین، می‌توانید از افزونه‌هایی مانند Smush Image Optimization استفاده کرده و با تنظیمات آن، تصاویر را به صورت خودکار تغییر اندازه دهید.

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

وقتی از تصاویر در وب استفاده می‌شود، حجم آنها مسئله‌ای مهم است. با ابزارهایی مثل Save for Web در فتوشاپ یا سایت‌هایی مانند tinypng و compressjpeg می‌توانید حجم تصاویر را به حداقل برسانید، اما نباید از دست دادن کیفیت را نیز فراموش کنید.

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

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

ذخیره تصاویر با فرمت‌های جدید Serve images in next-gen formats

از دیدگاه Lighthouse، فرمت‌های تصویری مانند JPEG 2000، JPEG XR و WebP نه تنها بهتر از JPEG و PNG هستند، بلکه ارتقاء فشرده‌سازی تصویر را نشان می‌دهند و سرعت بارگذاری بیشتری را نیز ارائه می‌دهند.

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

ابزارهای ویرایش تصویری مانند فتوشاپ توانایی پشتیبانی از تمامی این فرمت‌های جدید را دارند. همچنین، افزونه‌هایی مانند Autoptimiz یا Smush Image که برای سیستم مدیریت محتوای وردپرس ارائه شده‌اند، امکان تبدیل فرمت‌های تصویری به WebP را با سادگی و کارایی فراهم می‌کنند.

کش کردن عناصر ثابت صفحه Serve static assets with an efficient cache policy

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

برای بهینه‌سازی این فرآیند، بخش‌های ثابت یا استاتیک را به عنوان محتوای قابل کش شدن به مرورگر معرفی کنید و زمان انقضای کش را به اندازه کافی طولانی در نظر بگیرید. نصب افزونه‌هایی مانند W3 Total Cache یا WP Super Cache در سایت‌های مبتنی بر وردپرس، این فرآیند را آسان می‌کند و به بهبود سرعت بارگذاری صفحات کمک می‌کند.

کوچک‌سازی فایل‌های سی اس اس Minify CSS

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

یک نمونه از ادغام چند خط کد در یک خط و حذف فاصله‌های اضافی را می‌توانید در تصویر زیر مشاهده کنید. این تکنیک‌ها تنها یک جزء از بهینه‌سازی کدها هستند؛ توصیه‌های بعدی نیز نحوه بهینه‌سازی و تقسیم‌بندی کدها را برای بهبود سرعت و عملکرد بیشتر مورد بررسی قرار می‌دهند.

/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}

⇓ ⇓

h1, h2 { bachround-color: #000000; }

⇓ ⇓

h1,h2{bachround-color:#000000;}

برای بهبود سرعت وب‌سایت خود، در وب‌سایت‌های وردپرسی می‌توانید از افزونه‌هایی مانند Hummingbird، W3 Total Cache یا Autoptimize استفاده کنید. با نصب و تنظیمات دقیق این افزونه‌ها، تجربه کاربری را بهبود بخشید و زمان بارگذاری صفحات را به حداقل ممکن کاهش دهید. با این اقدام، وب‌سایت شما را به یک تجربه سریع و دلچسب برای بازدیدکنندگان تبدیل خواهید کرد.

کوچک‌سازی فایل‌های جاوا اسکریپت Minify JavaScript

البته که فشرده‌سازی فایل‌های جاوااسکریپت امری بسیار حیاتی است. بهره‌وری بالا و سرعت بارگذاری بهتر از جمله مزایای چشمگیری است که این روش‌ها ارائه می‌دهند. فرمت‌هایی مانند Gzip و Brotli علاوه بر فشرده‌سازی، تاثیرات بسیار مثبتی بر روی بهبود عملکرد وب‌سایت‌ها دارند.

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

استفاده از ویدیو به جای تصویر گیف‌ پرحجم Use video formats for animated content

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

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

اطمینان از قابل مشاهده بودن نوشته‌ها هنگام بارگذاری فونت Ensure text remains visible during webfont loads

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

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

تنها کافی است در فایل مربوط به استایل یا فونت‌های وب‌سایت، از دستور font-display: swap استفاده نماییم.

کد زیر یک مثال است:

@font-face{
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: utl(https://example.com/s/pacifico/v12/a.woff2) format('woff2');
font-display: swap;
}

توصیه‌های تخصصی برای بهبود عملکرد وبسایت

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

حذف منابع جلوگیری کننده از رندر  Eliminate render-blocking resources

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

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

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

کدهای CSS و جاوا اسکریپت (JS) دارای اهمیت بی‌نظیری در این فایل‌ها هستند.

در طراحی وب، سه رویکرد اصلی با استفاده از CSS و جاوا اسکریپت وجود دارند:

• استفاده از استایل‌شیت خارجی (external style sheet)
• استایل‌شیت داخلی (internal style sheet)
• استایل‌شیت درون‌خطی (inline style)

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

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

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

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

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

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

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

برای درک بهتر و گسترده‌تر این مبحث، می‌توانید به تکنیک‌های طراحی وب و دیگر گزارش‌های Lighthouse مراجعه کنید.

حذف استایل‌های بی‌استفاده Remove unused CSS

ممکن است بخش‌هایی از کد CSS بی‌استفاده باشند، کدهایی که هرگز به کار نمی‌روند اما همچنان بر روی وبسایت بارگذاری می‌شوند. برای شناسایی این بخش‌ها و کاهش حجم بارگذاری صفحه، از ابزار Developer در مرورگر کروم استفاده کنید. با مراجعه به تب Coverage، می‌توانید به راحتی کدهای بی‌استفاده را شناسایی و حذف کنید تا به بهبود عملکرد و سرعت بارگذاری صفحه کمک کنید.

فعال کردن فشرده‌سازی نوشتار Enable text compression

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

اتصال زودهنگام Preconnect to required origins

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

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

استفاده از دستورهای “Preconnect” می‌تواند برای اتصالات زودهنگام و دانلود سریع‌تر فایل‌های مختلف مفید باشد.

کاهش زمان پاسخ سرور Reduce server response times

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

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

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

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

استفاده نکردن از ریدایرکت‌های متعدد Avoid multiple page redirects

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

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

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

کاهش کدهای شخص ثالث Reduce the impact of third-party code

کدهای third-party به مجموعه‌ای از کدهایی اطلاق می‌شود که از یک منبع خارجی به سایت یا برنامه‌ای اضافه می‌شوند. این کدها معمولاً برای اهداف مشخصی مانند رصد کاربران، انجام آزمایش‌های A/B و جمع‌آوری داده‌ها استفاده می‌شوند. اما استفاده بیش از حد از این کدها می‌تواند منجر به کاهش سرعت وب‌سایت شما شود.

خب، همانطور که گفتیم، گوگل پیشنهاد کاهش حجم این کدها را به ما می‌دهد. دلیل آن هم واضح است: استفاده از تعداد زیادی کد third-party باعث می‌شود که سرعت سایت شما کند شوند.

گوگل پیشنهاد می‌دهد که از ابزارهایی مانند گوگل تگ منیجر استفاده کنید تا حجم این کدها را به حداقل برسانید. این ابزار به شما اجازه می‌دهد که تمام کدهای third-party را در یک محیط مدیریت کنید، بدون نیاز به درج هر کد به صورت جداگانه در وب‌سایت خود. به راحتی می‌توانید تنظیمات مربوط به این کدها را از طریق گوگل تگ منیجر انجام داده و فقط با وارد کردن یک کد، کل فرایند را ساده‌تر و کاراتر انجام دهید.

از بارگذاری بیش از حد اطلاعات جلوگیری کنید Avoid enormous network payloads

حجم کل داده‌هایی که در بارگذاری اولیه دریافت می‌شود نباید بیشتر از ۱۶۰۰ کیلوبایت باشد. این حجم ایده‌آلی است که با توجه به شاخص TTI (یا همان Time To Interactive) زیر ۱۰ ثانیه و اتصال به اینترنت از نوع 3G در نظر گرفته شده است. این رقم ایده‌آل همیشه قابل دستیابی نیست.

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

جلوگیری از انباشت بیش از حد اشیاء در صفحه Avoid an excessive DOM size

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

این ساختاری که به آن DOM (Document Object Model) یا مدل شیء سند می‌گویند، یک چارچوب درختی از اشیاء و المان‌های موجود در صفحه را ایجاد می‌کند.

در آزمون لایت هاوس تعداد کل عناصر DOM محاسبه می‌شود. توصیه می‌شود تعداد عناصر کمتر از حدود 1500 باشد؛ چون هرچه تعداد بیشتر شود مموری بیشتری در سرور درگیر بارگذاری صفحه خواهد شد.

تعداد درخواست‌های ضروری را کم کنید Minimize critical requests depth

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

کاهش زمان اجرای جاوااسکریپت Reduce JavaScript execution time

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

برای حل این مشکل، راهکارهایی وجود دارد:

• استفاده از تکنیک code-split که فقط کدهای مورد نیاز کاربر را اجرا می‌کند.
• حذف کدهای اضافی که نیازی به آنها نیست.
• فشرده‌سازی کدها را فراموش نکنید.
• استفاده از کش کردن کدها برای بهبود عملکرد و سرعت بارگذاری.

کاهش رشته کارهای اصلی Minimize main-thread work

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

کم کردن تعداد درخواست‌های ارسالی از سمت کاربر و کاهش حجم قابل انتقال Keep request counts low and transfer sizes small

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

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

گزارش سئو در Lighthouse

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

صفحه عنوان ندارد – Document doesn’t have a <title> element

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

توضیحات متا مشخص نشده است Document does not have a meta description

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

توضیحات متا در تگ <meta name=description> صفحه قرار می‌گیرد.

لینک‌ها توضیح متنی ندارند Links do not have descriptive text

بهترین راه برای جلب توجه و کمک به کاربران و موتورهای جستجو در درک محتوای لینک، انتخاب یک انکرتکست مناسب است. انتخاب نادرست می‌تواند منجر به شناسایی لینک‌های بدون توضیح در گزارش‌های Lighthouse شود. برای نمونه، کلماتی مانند “کلیک کنید” یا “ادامه“، هرچند رایج، ارتباطی با موضوع ندارند و می‌توانند کاربر را گمراه کنند.

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

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

برای آموزش استفاده بهتر از انکرتکست میتوانید مقالۀ انکر تکست چیست و چه اهمیتی در سئو دارد؟ را در وبلاگ فنابایت بخوانید.

صفحه دارای تگ زبان مشخص نیست Document doesn’t have a valid hreflang

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

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

<link rel="alternate" hreflang="fa" href="https://example.com" />
<link rel="alternate" hreflang="en" href="https://en.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />

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

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

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

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

Document does not have a valid rel=canonical

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

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

شکل ساختاری لینک canonical به این شکل است:

<link rel="canonical" href="https://example.com"/>

در صورتی که لینک canonical به شکل درستی ساختاردهی نشده باشد و یا مشکلات دیگری وجود داشته باشد، این موارد در گزارشی دقیق بیان خواهد شد:

• وجود بیش از یک لینک canonical.
• نبود صحت در آدرس مشخص شده.
• لینک مشخص شده مربوط به زبان یا منطقه دیگری باشد.
• اشاره به دامنه (domain) دیگر.

برای آموزش استفاده بهتر از تگ Rel=Canonical میتوانید مقالۀ هر آنچه باید درباره تگ Rel=Canonical بدانید! را در وبلاگ فنابایت بخوانید.

صفحه دارای کد HTTP نامنعتبر است Page has unsuccessful HTTP status code

بهتر است هر درخواستی که از طرف کاربر به سرور ارسال می‌شود، با یک کد سه رقمی به‌عنوان پاسخ اولیه مواجه شود. این اعداد، وضعیت HTTP را نمایان می‌کنند. از جمله کدهای سری 400 و 500 که نشان‌دهنده مواردی مانند خطاهای مختلف هستند. به عنوان مثال، کد ۴۰۴ به معنای عدم وجود صفحه یا هرگونه منبع دیگری است.

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

از ایندکس شدن صفحه جلوگیری شده است Page is blocked from indexing

می‌خواهید وبسایت خود را برای دیده شدن در نتایج جستجوی گوگل آماده کنید؟ حتماً نیاز دارید که به گوگل بگویید کدام بخش‌های وبسایت شما نباید در جستجوها نمایش داده شوند. با استفاده از کدهای noindex این کار را به راحتی انجام دهید.

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

فایل robots.txt ساختار درستی ندارد – robots.txt is not valid

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

برای اطلاعات بیشتر و راهنمایی درباره‌ی فایل Robots.txt می‌توانید به مقاله ما با عنوان فایل Robots.txt چیست و چه کاربردی دارد؟ در وبلاگ فنابایت مراجعه کنید.

استفاده از محتواهای غیراستاندارد و مبتنی بر افزونه – Document uses plugins

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

Does not have a <meta name=”viewport”> tag with width or initial-scale

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

یکی از اصول اساسی برای داشتن یک وب‌سایت موبایل فرندلی، استفاده از کد <meta name=”viewport”> در هدر سایت است. این کد، مرورگرهای موبایل را مجاب می‌کند که چگونگی نمایش محتوا و بزرگنمایی آن را مشخص کنند. با اعمال این تنظیمات، اطمینان حاصل می‌شود که تجربه کاربری بر روی دستگاه‌های هوشمند بهتر و سریع‌تر خواهد بود.

یک نمونه از استفاده از کد <meta name=”viewport”> به شرح زیر است:

<!doctype html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
<body>
…
</body>
</html>

ساز فونت صفحه کوچک یا نامناسب است – Document doesn’t use legible font sizes

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

دکمه‌های قابل لمس فاصله و اندازه مناسب ندارند – Tap targets are not sized appropriately

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

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

گزارش تجربه برتر (Best Practices)

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

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

داده‌های ساختاریافته معتبر نیستند – Structured data is valid

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

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

مشخص نبودن ساختار صفحه – Page lacks the HTML doctype, thus triggering quirks mode

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

یکی از اصولی‌ترین روش‌ها برای جداسازی استانداردهای جدید از قدیمی‌ترین روش‌ها، استفاده از تگ <!DOCTYPE html> در ابتدای کد صفحه است. امروزه این تگ بخشی جدایی‌ناپذیر از بسیاری از وبسایت‌هاست. عدم وجود این تگ ممکن است باعث اشکال در بارگذاری صفحه شود، اما با ظهور HTML5 این مشکلات به‌طور کامل رفع شده است.

نمایش تصاویر با نسبت ابعادی نادرست – Displays images with incorrect aspect ratio

مطمئناً می‌دانید که اندازه‌ی تصویرها در وبسایت‌ها بسیار اهمیت دارد. اگر تصویری با نسبت ابعاد متفاوت از ابعاد اصلی خود نمایش داده شود، باعث می‌شود تصویر کم‌کیفیت یا غیر واضحی برای کاربران نمایش داده شود. این موضوع به طور ویژه در آزمون Lighthouse به چشم می‌خورد؛ زیرا این ابزار با اختلاف‌های بیش از 5 درصد در نسبت‌های تصاویر، مشکلات را به طور واضح نمایش می‌دهد.

بنابراین، تعیین نسبت تصاویر از طریق فایل استایل (CSS) امری ضروری است که بهبود وضوح و کیفیت تصاویر را برای تمام کاربران فراهم می‌کند.

Does not use HTTP/2 for all of its resources

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

Uses document.write

بعد از نسخه 55 مرورگر گوگل کروم دیگه از دستور Uses document.write پشتیبانی نمی‌شود. این دستور ابزاری بود برای اجرای اسکریپت‌های خارجی. در صورتی که از این دستور استفاده کنید ممکن است چندین ثانیه طول بکشد تا بارگذاری انجام شود.

Does not use passive listeners to improve scrolling performance

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

یک پیشنهاد از سوی گوگل این است که از روش‌های “passive” که تا قبل از بارگذاری، جلوی تعامل را نمی‌گیرند، استفاده کنیم. این تغییر نیازمند افزودن دستور “passive: true” در اجراکننده‌ها است.

از ارتباط رمزگذاری شده استفاده کنید – Uses HTTPS

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

از روش‌های امن لنیک دادن استفاده کنید – Links to cross-origin destinations are unsafe

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

_blank
_self
_parent
_top

با توجه به مسائل امنیتی مرتبط، استفاده از صفات rel=”noopener” یا rel=”noreferrer” توسط گوگل پیشنهاد شده است تا از اجرای کدهای جاوااسکریپت مخرب یا انتقال اطلاعات به صورت ناخواسته به صفحات دیگر جلوگیری شود.

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

Includes front-end JavaScript libraries with known security vulnerabilities

هکرها به کمک نرم‌افزارهای خزنده در وبسایت‌ها می‌توانند رخنه‌های امنیتی را شناسایی و از آنها سوءاستفاده کنند. تعدادی زیادی از این رخنه‌های امنیتی در کتابخانه‌ها یا ماژول‌های جاوااسکریپت (JavaScript libraries) وجود دارد.

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

درخواست موقعیت کاربر در هنگام بارگذاری صفحه – Requests the geolocation permission on page load

متخصصان فناوری هشدار می‌دهند: “هکرها از نرم‌افزارهای خبیث برای تخریب امنیت وبسایت‌ها استفاده می‌کنند.” این تهدیدات امنیتی اغلب در بخش‌هایی از وبسایت‌ها مخفی می‌شوند که کمتر دیده می‌شوند، مانند کتابخانه‌ها و ماژول‌های جاوااسکریپت. Lighthouse، ابزاری که برای تجزیه و تحلیل سایت‌ها به‌کار می‌رود، این ریسک‌ها را شناسایی می‌کند.

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

Requests the notification permission on page load

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

بهتر است این نکته حائز اهمیت را در نظر داشته باشیم و در زمان مناسب این اعلان‌ها را ارسال نماییم تا تأثیر مثبت بر روی کاربران داشته باشد.

جلوگیری از کپی پیست کردن رمز – Prevents users from pasting into password fields

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

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

Uses Application Cache

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

Uses deprecated APIs

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

Detected JavaScript libraries

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

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

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

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

بازگذاری سریع در موبایل (Page load is fast enough on mobile)

تست لایت‌ها دو شرط اساسی برای سرعت وب‌اپ دارند:

1. بارگذاری کامل صفحه از نظر ظاهری.
2. تعامل‌پذیری صفحه.

در این آزمون، اگر زمان تعامل‌پذیری وب‌اپ بیش از 10 ثانیه باشد، آزمون رد می‌شود. توصیه‌های گوگل نیز برای بهبود سرعت وب‌اپ همانند توصیه‌هایی است که برای بهبود سرعت وب‌سایت ارائه شده است.

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

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

Current page responds with a 200 when offline

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

برای این منظور، بهتر است به این موارد توجه شود:

1. استفاده از سرویس‌ورکرها به‌منظور حفظ ارتباط.
2. استفاده از سرویس‌ورکر برای کش کردن فایل به صورت محلی.
3. استفاده از سرویس‌ورکر در حالت آفلاین برای بازیابی نسخه کش شده فایل‌ها به عنوان پروکسی.

استفاده از ارتباط رمزنگاری شده – Uses HTTPS

معتقدم که بخشی که باید حتماً توجه شود، تجربه برتر در امنیت و اعتماد است. استفاده از HTTPS نقطه‌ی شروعی است که نشان می‌دهد وب‌سایت شما محافظت شده و اطلاعات کاربران در امان هستند. بسیاری از شرکت‌های میزبانی این امکان را فراهم کرده‌اند و تنها گامی کوچک برای نصب گواهی HTTPS است. با استفاده از سرویس‌هایی مانند Let’s Encrypt، این فرآیند را به صورت کاملاً رایگان و سریع می‌توان انجام داد. این اقدام نه تنها به امنیت وب‌سایت کمک می‌کند بلکه به ایجاد یک تجربه بیشتر و اعتماد بیشتر از سوی کاربران نیز منجر می‌شود.

استفاده از یک سرویس‌ورکر (Registers a service worke)

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

User can be prompted to install the web app

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

Does not provide a valid apple-touch-icon

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

<link rel="apple-touch-icon" href="/example.png">

این کار کمک می‌کند تا تجربه کاربری شما در دستگاه iOS بهبود یابد و همچنین زیبایی و ارتباط بیشتری را بین شما و اپلیکیشن‌های محبوب‌تان فراهم می‌کند.

Avoid multiple page redirects

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

Configured for a custom splash screen

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

Sets an address-bar theme color

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

Content is not sized correctly for the viewport

بهترین تجربه کاربری آن زمان رخ می‌دهد که محتوایی که مشاهده می‌شود، با صفحهٔ کاربر هماهنگی داشته باشد. اندازهٔ صفحه باید به درستی با پهنای دید (viewport) هماهنگ شود. اینکه تگ‌های viewport به درستی تنظیم شده باشند، معنای نمایش نسخهٔ موبایل در مرورگرهای موبایلی را دارد؛ در غیر این صورت، ممکن است مرورگر نسخهٔ دسکتاپ را باز کند که ممکن است محتوایش سازگاری و قابلیت خواندن مناسبی نداشته باشد.

Contains some content when JavaScript is not available

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

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

Site works cross-browser

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

Page transitions don’t feel like they block on the network

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

Each page has a URL

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

آزمون دسترسی‌پذیری (Accessibility) در Lighthouse

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

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

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

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

یک مثال ساده برای این موضوع قابل ذکر است. فرض کنید فردی دسترسی محدودیت‌های حرکتی دارد و نمی‌تواند از موس استفاده کند، اما قادر است از صفحه کلید استفاده نماید.

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

نکاتی که باید در طراحی وبسایت برای افراد کم‌توان رعایت شود

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

1. بهینه‌سازی صفحات و اجزا برای تشخیص آسان توسط ابزارهای صفحه‌خوان.
2. اضافه کردن توضیحات متنی برای محتواهای صوتی و توضیحات برای محتواهای تصویری.
3. بهبود یا حذف موانعی که استفاده از وب‌سایت را دشوار می‌کنند.
4. تنظیم مجدد رنگ‌ها.
5. استفاده از کدهایی در طراحی صفحه که به بهبود دسترسی کمک می‌کنند.

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

راهنمای تشریحی درباره گزارش دسترسی‌پذیری

مبانی و راهنمای نوشتاری توسعه برای افراد کم‌توان

کانال A11ycasts برای آموزش طراحی دسترسی‌پذیر

دورۀ رایگان یوداسیتی با موضوع طراحی دسترسی‌پذیر

رسیدیم به آخر …

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

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

اگر سوال یا مشکلی دارید، با اطمینان بپرسید. ما در اختیار شما هستیم تا بهترین پاسخ را ارائه دهیم.