دو کلمه‌ای که اغلب با هم میشنوین سرعت سایت و موبایل هستن و این جفت شدن بی‌دلیل نیست؛ چون که این دوتا دست به دست هم میدن و سازگاری با موبایل و سرعت سایت از مهمترین مواردیه که باید بهشون توجه کنیم! اندازه گیری سرعت بارگذاری صفحه همیشه نوعی هنر تاریکه. ابزارهای سرعت سایت که امروزه از اونها استفاده میکنیم کاملاً برای این کار مناسبن، اما با معیارهای جدید Web Vital، گوگل سعی داره با در نظر گرفتن تجربه صفحه، از زاویه‌ای متفاوت و واقع بینانه‌تر به اون برسه. در اینجا، ما در مورد نحوه بررسی سرعت سایت در موبایل و سئو اون با استفاده از لایت هاوس گوگل میپردازیم.
Google Lighthouse چیست؟
Lighthouse ابزاری برای تجربه صفحه است که توسط Google ساخته شد و در ابتدا به منظور ممیزی برنامه‌های وب پیشرو (PWA) بود. این ابزار پنج مورد حسابرسی رو برای دسترسی، عملکرد، سئو، برنامه‌های وب پیشرفته و لیست گسترده‌ای از بهترین روش‌ها اجرا میکنه؛ این ممیزی ها با پشتیبانی از Core Web Vital جدید، به شما یک نمای عالی از کیفیت و عملکرد وبسایت تلفن همراه و همچنین سایت دسکتاپ یا برنامه وب شما میدن.
سرعت سایت به طور تمام و کمال در مورد درک و تجربه کاربری است. اگه سایت شما هنوز کند است، پس بدونین سرعت در تعداد پست هیچ معنی نداره. تعداد زیادی از کاربران در سراسر جهان با اینترنت ۳G یا حتی کمتر از اون در تلفن‌های همراه خودشون روبرو هستن. حتی با اتصال ۵G که عین برق سریعه، یک سایت به راحتی احساس لگی و کندی میکنه و همه ما میدونیم که سایت کند ممکنه چه تأثیر مخربی در نرخ تبدیل شما داشته باشه. کم کردن سرعت سایت شما به اندازه میلی ثانیه میتونه تاثیر خیلی زیادی در ترافیک و نرخ تبدیل شما داشته باشه.
شما میتونین ممیزی لایت هاوس گوگل رو مستقیماً از ابزارهای توسعه دهنده در Google Chrome اجرا کنین، یا برنامه افزودنی Chrome رو نصب کنین.
هنگام آزمایش، Google Lighthouse بازدید از سایت تلفن همراه شما رو از طریق اتصال ۳G که کند هم هست، در دستگاهی با قدرت کم شبیه سازی میکنه. این ابزار تلاش میکنه تا با واقعی‌ترین حالت ممکن شبیه سازی رو انجام بده و سپس نتایج با یه سری داده های دیگه ترکیب میشن و پس از اجرای این آزمون، گزارشی با نمره و مشاوره عملی با موضوعاتی برای حل به شما ارائه میده.
PageSpeed Insights در مقابل لایت هاوس گوگل
PageSpeed Insights احتمالاً پرکاربردترین ابزار تجزیه و تحلیل سرعت سایت است. این ابزار به شما یه امتیاز خوب و یه لیستی از پیشرفت‌های احتمالی میده، به علاوه به شما ایده‌ای از سرعت بارگیری سایت خودتون میده. همچنین، PageSpeed Insights توصیه‌هایی ارائه میده و فرصت‌هایی رو برای بهبود عملکرد صفحه شما شناسایی میکنه. البته بعضی از اینها به سختی اجرا میشن، بنابراین دریافت ۱۰۰/۱۰۰ برای اکثر سایت ها یه رویای خیلی دوست‌داشتنیه!
قبلاً PageSpeed Insights و Lighthouse دو ابزار متفاوت برای کار بودن. با این که هر دو بینش‌های ارزشمندی ارائه میدادن، اما ترکیب اونها با هم کار سختی بود. با ظهور Web Vital و به روزرسانی تجربه صفحه، Google معیارهای مختلف رو بهبود بخشید. حالا دیگه نه تنها درک اونها آسون‌تر شده بود، بلکه معیارهای مشترکی هم بودن. البته، هر ابزاری برای یک کار فرعی خاصی ساخته شده و معیارهای مشخصی رو ارائه میده که این معیارها از محیط‌های مختلفی ارائه میشن.
داده های میدانی در مقابل داده های آزمایشگاهی
Web Vital روش‌های جدیدی رو برای تعیین عملکرد معرفی کرد. برخی از این معیارها رو میشه در یک محیط آزمایشگاهی محاسبه کرد، بنابراین میتونیم بگیم برای اون معیارها شبیه سازی انجام میدیم، در حالی که معیارهای دیگه تنها در صورتِ منطقی بودن، آزمایش و جمع آوری میشن. بعلاوه، برخی از معیارها با هردوتا مدل به خوبی کار میکنن. ابزارهای تجربه صفحه Google از معیارهای مختلفی استفاده میکنن تا داده های لازم برای بهبود سایت خودتون رو در اختیار شما قرار بدن.
اگه خوب دقت کنین متوجه میشین که برخی از معیارها فقط در ابزار آزمایشگاهی مثل Developer Tools و لایت هاوس گوگل کار میکنن. معیارهای فیلد در ابزاری مثل گزارش Web Vital در Search Console و PageSpeed Insights نشون داده میشن و Core Web Vital مانند LCP ،FID و CLS در همه جا کار میکنن.
Core Web Vital
Core Web Vital های کاملاً جدیدی در تمام ابزارهای Google که سرعت، عملکرد و تجربه سایت رو اندازه گیری میکنن، ظاهر میشن (حتی در گزارش جدید Web Vital در Search Console). حالا فقط کافیه شما سه‌تا معیار اصلی رو درک کنین تا از عملکرد سایت یا صفحات خاص خودتون مطلع بشین. این هسته‌های وب اصلی عبارتند از:
- LCP یا Largest Contentful Paint: چه مدت طول میکشه تا بزرگترین عنصر محتوایی که در ویوپورت مشاهده میکنین بارگیری بشه.
- FID یا First Input Delay: چقدر طول میکشه تا مرورگر به تعاملی که ابتدا توسط کاربر ایجاد شده پاسخ بده (به عنوان مثال با کلیک بر روی یک دکمه)
- CLS یا Cumulative Layout Shift: چه مقدار از صفحه تحت تأثیر حرکت قرار داره، یعنی آیا چیزها روی صفحه میبرن؟
این Web Vital های جدید رویکرد عملی‌تری دارن و تجربه کاربری رو در مرکز توجه قرار میدن. این ابزارها با یه اتصال ضعیف در یه دستگاه متوسط از سایت شما بازدید میکنن تا بتونن اون‌چیزی رو که یک بازدید کننده واقعی در دنیای واقعی تجربه میکنه، تقلید و به عبارتی شبیه سازی کنن. به جای این که فقط مثل ابزارهای بررسی سرعت کلاسیک که قبلاً ازشون استفاده میکردین، ابزارهای قدرتی Web Vital ها نحوه استفاده و زمان پاسخ دهی به ورودی‌ها و همچنین مواردی که بعد از بارگیری اولیه اتفاق میفته رو بررسی میکنن.
پس در حقیقت این ابزار دقیقاً لحظه‌ای رو که محتوای شما برای استفاده آماده است پیدا میکنه؛ بنابراین وقتی خیلی کند است، میتونین اون رو تست و بهینه کنین. به علاوه، میتونین مواردی که مانع داشتن یه تجربه خوب صفحه میشه رو پیدا کنین و اونها رو از بین ببرین یا اصلاحشون کنین.
همچنین، به خاطر داشته باشین که گوگل Lighthouse نه تنها عملکرد سایت رو اندازه گیری میکنه، بلکه بهترین و جدیدترین روش‌های سئو و قابلیت دسترسی رو هم بررسی میکنه. این یک ابزار کامله که به شما در بهبود کلی سایت کمک میکنه.
PageSpeed Insights امتیازات کمی متفاوتی میده. همچنین تفاوت بین Data Field و Lab Data رو تو این عکس مشاهده میکنین.
باید از گوگل لایت هاوس چه انتظاری داشته باشیم؟
کل مفهوم سرعت بخشیدن به سایت تلفن همراه شما دو وجهیه. سایت شما باید سریع باشه و این سرعت باید احساس بشه. بنابراین شما باید مطالب خودتون رو در اسرع وقت روی صفحه نمایش قرار بدین. نذارین مردم منتظر بمونن. همچنین، کاربران باید در اسرع وقت با محتوای شما ارتباط برقرار کنن. از اونجایی که گوگل اعلام کرده سرعت صفحه و تجربه صفحه از عوامل رتبه بندی سئو هستن، باید مشکلات مربوط به این دوتا فاکتور رو برطرف کنین.
شاید بپرسین اولویت ما باید چی باشه؟
خب اول از همه مطالب خودتون رو بارگیری کنین. گرافیک عالی و انیمیشن‌های خفن میتونن بعداً اضافه بشن. پیام شما و اون‌چیزی که مردم به‌دنبالش هستن به احتمال زیاد در قسمت محتوا گنجانده شده.
معیارهایی که Google Lighthouse 6.0 استفاده میکنه
گوگل Lighthouse 6.0 ضمن اندازه گیری عملکرد سایت شما، از معیارهای زیر استفاده میکنه:
- First Contentful Paint: این معیار که به اختصار به اون FCP میگن، پس از ناوبری کاربر به صفحه شما، مدت زمان لازم برای ارائه اولین قطعه از محتوای DOM به مرورگر رو اندازه گیری میکنه. این امر شامل، تصاویر، عناصر canvas> non-white> و SVG است اما موارد داخل iframe رو شامل نمیشه.
- Speed Index: شاخص سرعت است و نمایش سریع محتوا در هنگام بارگذاری صفحه رو اندازه گیری میکنه.
- Largest Contentful Paint: به اختصار بهش LCP میگن و تمام مدت زمان بارگیری برای بزرگترین شیء محتوایی (به عنوان مثال، یک تصویر یا یک قطعه متن از محتوا) رو اندازه گیری میکنه. این یکی از مهمترین معیارهای جدیده. در اینجا، داشتن نمره خوب به این معنیه که کاربران حس میکنن سایت شما سریع بارگذاری میشه.
- Time to Interactive: یا به طور مختصر TTI مدت زمان بارگیری صفحه تا زمانی که توانایی پاسخگویی سریع به ورودی کاربر داره رواندازه گیری میکنه. بارگیری این صفحه تنها ممکنه در صورتی سریع باشه که متوجه میشین فشار دادن بعضی از دکمه‌ها کار خاصی انجام نمیده!
- Total Blocking Time: یا TBT زمانی رو که ممکنه بین FCP و TTI مسدود کردن اتفاق بیفته، اندازه گیری میکنه و از پاسخگویی جلوگیری میکنه.
- Cumulative Layout Shift: یا CLS تعداد شیفت‌های چیدمان رو که در طول فرآیند بارگیری کامل صفحه اتفاق میفته رو بررسی میکنه. هر بار که عنصری از یه قاب به قاب دیگ‌ای به صفحه میپره، این به عنوان یک تغییر layout محسوب میشه. اون تبلیغات تند و زننده که در آخرین لحظه بارگیری وجود دارن یادتونه؟
با مراجعه به محاسبه‌گر امتیاز فانوس دریایی گوگل میتونین نحوه محاسبه نمره خودتون رو مشاهده کنین:
محاسبه‌گر امتیاز فانوس دریایی گوگل یا هاوس لایت گوگل ، اختلاف وزن معیارهای مختلف رو نشون میده.
گوگل Lighthouse همچنین برخی فرصت‌ها رو برای بهبود سرعت سایت در تلفن همراه شما ارائه میده، از جمله این که چقدر زمان بارگذاری میتونین سیو کنین که خود این مورد شامل کاهش استایل شیت‌های مسدود کردن رندر، اسکریپت‌های مسدود کردن رندر، اندازه مناسب تصاویر و اصلاح تصاویر خارج از صفحه میشه.
فانوس دریایی بزرگترین عنصر محتوای رنگ یا LCP رو مشخص میکنه؛ بنابراین میتونین به راحتی اون رو بهینه کنین.
در مجموع، Lighthouse به شما اطلاعات فوق العاده‌ای در مورد عملکرد صفحه خودتون میده و شما باید از این بینش‌ها به نفع خودتون استفاده کنین.
بررسی SEO با فانوس دریایی گوگل
لایت هاوس گوگل فقط اقدامات مربوط به عملکرد سایت رو انجام نمیده، بلکه دارای یه تست قابلیت دسترسی، پیشنهادهایی در مورد بهبود سایت شما بر اساس بهترین روش‌ها و تجزیه و تحلیل PWA است. یکی دیگه از ویژگی‌های جالب فانوس دریایی بررسی اساسی SEO سایت است. با استفاده از این بررسی، میتونین یک سئو حسابرسی ساده انجام بدین تا مسائل اساسی سئو که یه سایت با اون روبرو میشه رو کشف کنین و در صورت برخوردن با مشکل اون رو برطرف کنین. از اونجایی که Lighthouse به صورت محلی در مرورگر شما اجرا میشه، میتونین بررسی‌های مربوط به مرحله استقرار رو نیز انجام بدین.
در حال حاضر، گوگل لایت هاوس موارد زیر رو در مورد هر صفحه بررسی میکنه:
- موبایل فرندلی بودن یک صفحه
- معتبر بودن داده های ساختار یافته
- آیا دارای برچسب <meta name = “viewport”> با عرض یا مقیاس اولیه است
- آیا سند دارای عنصر <title> است؟
- آیا توضیح متا وجود داره؟
- آیا این صفحه کد وضعیت HTTP موفقی داره؟
- آیا پیوندها دارای متن لنگر توصیفی هستن؟
- آیا از اندازه قلم‌های خوانا استفاده میکنه؟
- آیا صفحه درست ایندکس شده؟
- آیا robots.txt معتبر است؟
- آیا تصاویر دارای ویژگی alt هستن؟
- آیا سند از اجرای hreflang معتبری برخورداره؟
- آیا سند تنظیم معتبر Rel = canonical داره؟
- آیا پلاگین های ناخواسته‌ای مثل جاوا یا فلش وجود داره؟
در هر حال بررسی‌های Lighthouse شما رو از هرگونه مشکل مربوط به جستجوگر جهت رفع مشکل آگاه میکنه.
نحوه نصب Google Lighthouse
شروع کار با Google Lighthouse بسیار آسونه زیرا در پنل حسابرسی Chrome Developer Tools (Mac: Shift + Cmd + I. Win: Ctrl + Shift + J یا F12) ساخته شده و میتونین آزمون رو اجرا کنین و گزارش کامل رو دریافت کنین. علاوه بر این، یک افزونه جداگانه Chrome برای Lighthouse وجود داره که دکمه‌ای رو به نوار ابزار شما اضافه میکنه، البته اگه میخواین از اون استفاده کنین باید بدونین چندتا محدودیت ثابت وجود داره: شما نمیتونین سایت ها رو در سرور محلی خودتون تأیید کنین و صفحات تأیید شده هم کار نمیکنن.
همچنین میتونین Lighthouse رو به عنوان بسته Node اجرا کنین و به این ترتیب میتونین آزمون رو در مراحل ساخت خودتون قرار بدین. هنگام استفاده از بسته Node، میبینین که چندتا حسابرسی وجود داره که فقط در یک محیط Node کار میکنن و نه در صفحه Audits از DevTools.
برای نصب Lighthouse در سطح جهانی از خط فرمان استفاده کنین:
npm install -g lighthouse
اگه میخواین آزمایشی برای https://example.com اجرا کنین استفاده کنین:
lighthouse https://example.com
نتایج کامل حسابرسی در ترمینال و همچنین در یک فایل HTML جداگانه در دسترس خواهد بود.
شما همچنین میتونین تست رو به دلخواه خودتون تنظیم کنین.
فرم و لیست دیدگاه
هنوز دیدگاهی وجود ندارد.