فهرست مطالببستن

گوگل پیج اسپید اینسایتس Google PageSpeed Insights یکی از ابزارهای خانواده Google PageSpeed ئه که توسط کمپانی گوگل برای کمک به بهینه سازی سرعت و عملکرد صفحات وب ایجاد شده. این ابزارها اولین بار در سال ۲۰۱۰ میلادی در کنفرانس توسعه گوگل معرفی شدن.

این خانواده چهار عضو اصلی داره که عبارتند از:

  1. ماژول پیج اسپید PageSpeed Module که یک ماژول سرور وب برای آپاچی و انجین ایکس
  2. پیج اسپید اینسایتس PageSpeed Insights که موضوع بحث من در این نوشته همین ابزاره
  3. سرویس پیج اسپید PageSpeed Service که یک محصول تجاری بود و در ۵ مارس ۲۰۱۵ منقضی و در ۳ آگوست ۲۰۱۵ به طور کامل کنار گذاشته شد
  4. افزونه گوگل کروم PageSpeed Chrome Dev Tools که در مرورگر گوگل کروم به منظور کشف نقایص عملکرد و سرعت صفحه استفاده میشه

این ابزارها توسط گوگل ایجاد شدن تا به شما کمک کنن صفحات وبی طراحی کنید که با تجارب بهینه و Best Practice گوگل که با عنوان Google Web Performance Best Practices شناخته میشن، همخوانی داشته باشه.

گوگل پیج اسپید اینسایتس Google PageSpeed Insights

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

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

نمره کلی که به صفحه شما میده از ۰ تا ۱۰۰ متغیره. مشخصه که ۰ رو به بدترین صفحه و ۱۰۰ رو به بهترین صفحه تخصیص میده. بر خلاف ابزارهای شناخته شده دیگه مثل جی تی متریکس GTmetrix گرفتن امتیاز ۱۰۰ از این ابزار اصلا کار راحتی نیست. و البته بهتره بگم کار هر کسی هم نیست. البته این جای خوشحالی داره، چون رقبای شما هم به آسونی نمیتونن از این ابزار ۱۰۰ بگیرن.

چرا ابزار پیج اسپید اینستایتس PageSpeed Insights مهمه؟

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

عباس دوست صمیمی ات، ازت میپرسه: با گوگل پیج اسپید اینسایتس Google PageSpeed Insights چک کردی ببینی نمره ات از ۱۰۰ چنده؟ با خودت میگی این دیگه چیه؟ پیج اسپید چی چی؟

میری یه چکی میکنی و میبینی که سایت زیبا و چشم نوازت اصلا نمره راضی کننده‌ای نمیگیره. حداکثر شاید ۴۰ یا ۵۰ یا که نهایتا ۶۰. ظاهرا حال سایتت اصلا خوب نیست.

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

آمار و اطلاعات
فقط ۱۵٪ از وبسایت ها سرعت صفحه قابل قبولی دارن. هر ثانیه تأخیر در بارگذاری صفحه، حدودا ۷٪ از نرخ تبدیل کم میکنه. نرخ پرش صفحاتی که زودتر از ۲ ثانیه لود میشن، کمتر از ۹٪ ئه که عدد خیلی خوبیه.

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

تأثیر سرعت صفحه روی سئو چقدره؟

جالبه بدونی که ۳ تا از ۴ سینگال اصلی تجربه کاربری User Experience که مستقیما روی سئو SEO اثر میذارن ارتباط زیاد با سرعت صفحه دارن. میگی نه؟ این لیست رو ببین:

  1. بازدید مستقیم از سایت
  2. مدت زمان حضور در سایت
  3. تعداد صفحه در هر نشست Session
  4. نرخ پرش Bounce Rate
  5. تعداد دامین هایی که به سایتت لینک میدن
  6. تعداد بک لینک
  7. تعداد آدرس های آی پی IP Address که به سایتت لینک میدن
  8. تعداد لینک های فالو ورودی به سایت
  9. حجم و کیفیت محتوا
  10. امنیت ترافیک وبسایت HTTPS

این لیست فاکتورها بود. به آیتم های ۲ و ۳ و ۴ یه نگاهی بنداز. هر سه شون ارتباط مستقیم با سرعت صفحات سایتت دارن! پس قضیه سرعت بارگذاری صفحه و افزایش نمره گوگل پیج اسپید اینسایتس Google PageSpeed Insights رو خیلی جدی بگیر.

نکته
برای کسب جایگاه اول گوگل مدت زمان لود صفحه باید زیر ۲ ثانیه باشه که کار آسونی نیست.

نمره سرعت گوگل پیج اسپید اینسایتس Google PageSpeed Insights Performance Score

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

حتما می پرسین این نمره دقیقا چطوری محاسبه میشه؟ با استفاده از ابزار فانوس دریایی یا لایت هاوس Lighthouse این کار انجام میشه. اگه نمره ای بالاتر از ۹۰ بگیرید که با سبز پر رنگ هم نشون داده میشه یعنی به اندازه کافی سریع هستید. نمرات بین ۵۰ تا ۹۰ متعادل محسوب میشن و با رنگ نارنجی نمایش داده میشن و اعداد پایین تر از ۵۰ هم افتضاح هستند و قرمز.

استفاده از داده های آزمایشگاهی Lab Data و داده های میدانی Field Data

وقتی به این ابزار یک آدرس اینترنتی میدین، اون با استفاده از مجموعه داده یا همون دیتاست آماری گزارش تجربه کاربری کروم Chrome User Experience Report اون آدرس رو تطبیق میده. اگه آدرس توی دیتاست بود، دو شاخص اولین نمایش محتوایی First Contentful Paint یا به اختصار FCP و تأخیر تا اولین ورودی First Input Delay یا به اختصار FID رو به طور دقیق با استفاده از داده‌های میدانی Field Data گزارش می‌کنه. در غیر اینصورت از داده‌های آزمایشگاهی Lab Data استفاده میکنه که به نوعی شبیه سازی داده‌های میدانی ئه.

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

دو شاخص میدانی FCP و FID بسته به مقادیر اندازه گیری شده در ۳ دسته قرار می گیرن.

برای FCP یا همون اولین نمایش محتوایی First Contentful Paint:

  • سریع (کمتر از یک ثانیه)
  • معمولی (بین ۱ تا ۳ ثانیه)
  • کند (بیشتر از ۳ ثانیه)

برای FID یا همون تأخیر تا اولین ورودی First Input Delay:

  • سریع (کمتر از ۱۰۰ میلی ثانیه)
  • معمولی (بین ۱۰۰ تا ۳۰۰ میلی ثانیه)
  • کند (بیشتر از ۳۰۰ میلی ثانیه)

تفاوت داده های میدانی Field Data در گوگل پیج اسپید اینسایتس PSI و تجربه کاربری کروم CrUX

تفاوت بین داده های میدانی در گوگل پیج اسپید اینسایتس Google PageSpeed Insights یا به اختصار PSI و تجربه کاربری کروم Chrome User Experience یا به اختصار CrUX اینه که داده های PSI هر روز آپدیت میشن و همیشه داده های ۳۰ روز گذشته در دسترسه. در صورتی که داده های BigQuery که مربوط به CrUX هست ماهی فقط یک بار آپدیت میشه و مثل PSI به روز نیست.

گوگل پیج اسپید با استفاده از ابزار فانوس دریایی Lighthouse این داده ها رو برای آدرس اینترنتی دریافتی محاسبه و اعلام میکنه. این معیارها عبارتند از:

  • اولین نمایش محتوایی First Contentful Paint
  • اولین نمایش معنادار First Meaningful Paint
  • شاخص سرعت Speed Index
  • اولین زمان بیکاری پردازنده First CPU Idle
  • مدت زمان تا تعامل پذیری Time to Interactive
  • حداکثر تأخیر تا اولین ورودی Max Potential First Input Delay که سابقا و در نسخه‌های قبلی ابزار PSI با نام تخمین تأخیر ورودی Estimated Input Latency شناخته می شد

هر یک از این معیارها با یک آیکون و شرح مختصر به همراه لینک برای اطلاعات بیشتر ارائه میشن. جالبه بدونید که وزن این معیارها یکسان نیست. این وزن ها به مرور زمان و با پیشرفت نسخه های گوگل پیج اسپید اینسایتس Google PageSpeed Insights در حال تغییر هستند. در زمان نگارش این نوشته، آخرین نسخه PSI نسخه ۵ هست که به ترتیب اولویت از وزن های زیر استفاده می کنه:

  • مدت زمان تا تعامل پذیری Time to Interactive با ضریب ۵ (۳۳٪ وزنی)
  • شاخص سرعت Speed Index با ضریب ۴ (۲۷٪ وزنی)
  • اولین نمایش محتوایی First Contentful Paint با ضریب ۳ (۲۰٪ وزنی)
  • اولین زمان بیکاری پردازنده First CPU Idle با ضریب ۲ (۱۳٪ وزنی)
  • اولین نمایش معنادار First Meaningful Paint با ضریب ۱ (۷٪ وزنی)
  • حداکثر تأخیر تا اولین ورودی Max Potential First Input Delay با ضریب صفر (فعلا)

چطوری گوگل پیج اسپید اینسایتس Google PageSpeed Insights رو ۱۰۰ سبز کنم؟

حتما این نوشته رو تا به اینجا خوندی که چطوری میتونم پیج اسپید اینسایتس رو برای صفحات سایتم ۱۰۰ کنم؟ احتمالا یک سایت با وردپرس داری و به دنبال افزایش سرعت وردپرس هستی.

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

باید از معیار با بیشترین وزن شروع کنیم. الان که این نوشته رو مینویسم نسخه ۶ بتا ریلیز شده و به زودی نسخه ۶ هم بیرون خواهد اومد که احتمالا تغییراتی هم در معیارها و هم در وزن شون شاهد خواهیم بود. چیزی که دارم میگم مربوط به نسخه ۵ از PSI هست و نه نسخه ۶.

بیشترین وزن رو همونطور که قبلا هم گفتم مدت زمان تا تعامل پذیری Time to Interactive با وزن ۵ از مجموع ۱۵ یعنی ضریب ۳۳٪ داره که ضریب بالایی ئه. در ادامه به دقت بررسی اش میکنیم و بعد هم ارائه راه کار.

مدت زمان تا تعامل پذیری Time to Interactive چیست؟

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

معیار مدت زمان تا تعامل پذیری Time to Interactive  مدت زمانی رو اندازه میگیره که طول میکشه تا یک صفحه توسط کاربر قابل تعامل بشه. یعنی بتونه باهاش کار کنه. این تعامل پذیری شامل موارد زیر میشه:

  • صفحه محتوای قابل استفاده آماده و به کاربر ارائه کرده که با معیار اولین نمایش محتوایی First Contentful Paint اندازه گیری میشه.
  • توابع مدیریت رخداد Event Handler ها برای اکثر المان های قابل مشاهده صفحه ثبت Register شده باشن
  • صفحه به تعامل کاربر در کمتر از ۵۰ میلی ثانیه پاسخ بده

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

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

بهبود مدت زمان تا تعامل پذیری Time to Interactive

برای بهبود نمره TTI بهتره پردازش کدهای جاوا اسکریپت JavaScript رو تا لود کامل صفحه به تعویق بندازید. این کار میتونه از ۲ راه انجام بشه:

اضافه کردن خصیصه defer

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

تغییر در ساختار کدهای جاوا اسکریپت

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

بهبود شاخص سرعت Speed Index