امروزه ابزارهای(Tools) زیادی برای اندازه‌گیری سرعت وب‌سایت‌ها وجود دارد اما چطور میتوانیم به درستی از این ابزار‌ها استفاده کنیم و اطلاعات درستی از این بررسی‌ها به دست بیاوریم.
در این مطلب کوتاه، میخواهیم با هم بررسی کنیم که اصلاً منظور از سرعت صفحات وب چیست و تفاوت داده‌های میدانی و داده‌های آزمایشگاهی چیست و ابزارهای(Tools) مناسب کدامند.
برای مشاهده لینک‌ها و مثال‌ها به دلیل اینکه تحریم هستیم ): فیلتر شکن خودتون را روشن کنید.
طی این سال‌ها استفاده کاربر‌ها از تلفن های همراهشون برای بهره بردن از محتوا و خدمات‌ای که در اینترنت است رشد خیلی زیادی داشته که همه‌ی ما متوجه آن شده‌ایم :) . اگر دقت کرده باشید در چند سال اخیر توجه گوگل به نسخه موبایل وب‌سایت‌ها خیلی بیشتر شده و حتی ایندکس کردن محتوا رو هم براساس نسخه موبایل وب‌سایت ها انجام میده(در بیشتر موارد) و سرعت بارگذاری(load) اولیه هم در موبایل از فاکتور‌های مهم به حساب میاد.
امروزه حتی مشتری‌های قدیمی ما در استفاده از محصول یا خدمتی که ما ارائه میدهیم شروع به مقایسه کردن سایت ما می‌کنند که این مقایسه تنها با سایت های رقیب ما نیست بلکه با بهترین سایت هایی که در طول روز از خدمات آن‌ها استفاده می‌کنند است.
وقتی صحبت از تجربه کاربر می‌شود، سرعت یکی از فاکتور‌های با اهمیت به حساب میاد. تأخیرهای ناشی از سرعت موبایل فقط ناامید کننده نیست، بلکه می توانند بر نتایج کسب و کار نیز تأثیر منفی بگذارند. به عنوان مثال ما دیده‌ایم که یک ثانیه تاخیر در بارگذاری صفحه میتواند تا 20٪ نرخ تبدیل(Conversion Rate) را تحت تأثیر قرار دهد.
بنابراین ، سرعت اهمیت دارد ، اما منظور ما از سرعت دقیقاً چیست؟ منظور از داشتن سایت سریع چیست؟
معمولا وقتی از کسی سرعت وب‌سایتش را می‌پرسیم به عنوان مثال میگه سایت من تو ۴ ثانیه بارگذاری میشه در صورتی که سرعت یک وب‌سایت دیگر یک شاخص ثابت نیست و ما نمی‌توانیم فقط با یک عدد اون رو توصیف کنیم. بلکه باید تمامی اتفاقاتی که در طول این چند ثانیه که زمان میبره تا صفحه‌ي ما بارگذاری شود را بررسی کنیم و ببینیم که چه اتفاقاتی در حال رخ دادن.
هنگامی که یک کاربر وارد یک صفحه وب می‌شود، ما بازخورد‌های خاصی رو باید بررسی کنیم:
در تصویر بالا(از سمت چپ به راست) اینکه بدانیم سرور ما در چه زمانی پاسخگو درخواست کاربر بوده و یا اینکه محتوایی که برای کاربر در چند لحظه اول بارگذاری شده جذاب بوده یا خیر یا اینکه کاربر در چندمین ثانیه میتواند در صفحه ما تعامل(interact) داشته باشد(مثل کلیک کردن روی یک منو) و این تعامل بدون وجود باگ و یا خطایی بوده یا نه از این رو شاخص‌های دیگه‌ای معرفی شدند که برخی از آن‌ها را بررسی می‌کنیم.
شاخص‌های(metrics) قدیمی مثل زمان بارگذاری(load time) و DOMContentLoaded time(مدت زمانی است که طول می‌کشد تا فایل HTML بارگذاری و parse شود و درخت DOM یا همان Document Object Model ساخته شود) دیگر کافی نیستند تا بتوانیم تحلیل درستی از سریع یا کند بودن سایت خود داشته باشیم بنابراین فاکتور‌های دیگری نیز اضافه شدند تا بتوانیم به راحتی زمان بارگذاری را بررسی کنیم و آن را بهبود بدهیم.
شاخص‌هایی که در تصویر بالا میبینید را می‌توان به شرح زیر تعریف کرد:
اولین ترسیم/نمایش(First Paint): اولین تغییری که بعد از ورود کاربر به صفحه اتفاق می‌افتد مانند تغییر رنگ زمینه صفحه.
اولین نمایش محتوا(First Contentful Paint): مدت زمانی که طول می‌کشد تا اولین متن(حتی متن هایی که در انتظار بارگذاری فونت هستند) یا تصویر(image, background-image) و همچنین SVG و canvasها روی صفحه نمایش داده شود را می‌گویند.
اولین نمایش محتواي معنی‌دار(First meaningful Paint): مدت زمانی که طول می‌کشد تا محتوای اصلی(معنادار) صفحه دیده شود. محتوای اصلی وابسته به نوع صفحه است به عنوان مثال در وبلاگ‌ها منظور عنوان مقاله و متن اصلی است و در صفحه گالری، تصاویر محتوای اصلی هستند.
زمان تعامل(Time to Interactive): به مدت زمانی گفته می‌شود که بعد از ورود کاربر به صفحه طول می‌کشد تا صفحه برای کاربر کاملاً قابل تعامل باشد یعنی با کلیک بر روی المان هایی مثل دکمه‌ها به درستی کار کنند.
میتوانید برخی از این شاخص‌های مهم اندازه‌گیری رو در User-centric performance metrics مطالعه کنید.
حال بعد از آنکه درک درستی از سرعت صفحات و شاخص‌ها(metrics) پیدا کردیم وقت آن رسیده که ببینیم چطور میتوانیم سرعت صفحات وب رو اندازه‌گیری کنیم.
سرعت در دنیای واقعی به دلیل متفاوت بودن دستگاه‌های کاربران، اتصالات شبکه و سایر عوامل بسیار متغیر است. به عنوان مثال، اگر وب‌سایت خود را با استفاده از WiFi منزلتون چک بکنید و همچنین آن را با استفاده از WiFi در کافی شاپ مقایسه کنید، به احتمال زیاد تجربیات بسیار متفاوت خواهد بود. ابزارهای زیادی وجود دارد که میتواند به شما در جمع آوری داده‌های آزمایشگاهی(Lab data) و داده‌های میدانی(Field data) برای ارزیابی عملکرد صفحات وب کمک کند.
داده‌های آزمایشگاهی(Lab data) در واقع به داده‌های جمع‌آوری شده در یک محیط کنترل شده، با دستگاه‌ها(موبایل و کامپیوتر و....) و تنظیمات شبکه مشخص گفته می‌شود. در حالی که داده‌های میدانی(Field data) به داده‌هایی که از تجربه کاربر‌ها در هنگام استفاده از وب‌سایت ما جمع آوری شده گفته می‌شود که هرکدام از آن‌ها نقاط ضعف و قوتی دارند.
داده‌های آزمایشگاهی یا Lab data در واقع محیطی برای رفع خطا‌ها است و با استفاده از آن شما میتوانید براساس دستگاه(Device) و تنظیمات شبکه کاربرانتان در محیطی مشابه، سایت خود را آزمایش کنید و همچنین این نکته را هم در نظر داشته باشید که حتی کاربرانی که از اینترنت 4G استفاده می‌کنند هم ممکن در موقعیت هایی مثل آسانسور و مکان هایی که آنتن دهی مناسبی وجود ندارد قرار بگیرند و در نتیجه سرعت و کارایی خوبی رو تجربه نکنند.
داده‌های میدانی یا Field data هم که به آن "نظارت بر کاربر واقعی" یا Real User Monitoring)RUM) گفته می‌شود تجربیات واقعی کاربر در صفحات وب‌سایت شما رو ثبت می‌کند و میتواند برای کسب و کار شما بسیار مفید باشد.
برای Lab data شما میتوانید از ابزاری به نام Lighthouse استفاده کنید که به سادگی با وارد کردن URL وب‌سایت گزارش کاملی از کارایی سایت را در اختیار شما قرار میدهد. راه های مختلفی برای استفاده از این ابزار وجود داره مانند نصب extension آن بر روی مرورگرتون و یا از طریق Chrome DevTools(فشردن کلید F12 و مراجعه به بخش audits). ما در اینجا قصد نداریم این ابزار را آموزش بدهیم اما شما میتوانید به راحتی با مراجعه به Lighthouse میتوانید به راحتی کارکرد آن را یاد بگیرید و اگر به دنبال نسخه فارسی برای یادگیری آن هستید میتوانید از Google Lighthouse راهنمای کامل از صفر تا ۱۰۰ استفاده کنید.
برای Field data یا داده‌های میدانی شما میتوانید از ابزاری که گوگل معرفی کرده است به نام CrUX یا Chrome User Experience Report استفاده کنید که شاخص‌هایی را ارائه میدهد که نشان‌دهنده این است که چگونه کاربران Chrome در دنیای واقعی سایت‌های محبوب را در وب تجربه می‌کنند.
در واقع Chrome User Experience Report یک پروژه عمومی در Google BigQuery(که یک data warehouse) است که برای دسترسی به آن شما تنها کافیست یک اکانت گوگل و یک پروژه Google Cloud داشته باشید که میتوانید آن را از آموزش مرحله به مرحله Google BigQuery در سایت گوگل پیش ببرید که مراحل بسیار ساده‌ای دارد و برای استفاده از آن همانند مثال‌هایی که در لینک بالا آمده برای Queryهای خود باید از سینتکس SQL استفاده کنید که مثال‌هایی برای آن وجود دارد و همچنین میتوانید از Standard SQL Query Syntax با تعدادی از این دستورات آشنا شوید.
در تصویر زیر محیط این ابزار را مشاهده می‌کنید:
ابزار PageSpeed Insights هم داده‌های میدانی و هم داد‌های آزمایشگاهی صفحه‌ی وب شما را بررسی می‌کند. این ابزار از Lighthouse برای جمع‌آوری و ارزیابی داده‌های آزمایشگاهی صفحه استفاده می‌کند و برای داده‌های میدانی از CrUX یا Chrome User Experience Report که پیش تر بررسی کردیم استفاده می‌کند.
ابزار Chrome Developer Tools نیز مجموعه‌ای از ابزار ها را در اختیار توسعه دهندگان قرار میدهد تا یک صفحه‌ی وب را در حال اجرا به طور کامل بررسی کنید و خطاهای پیش آمده را حل کنید.
امیدوارم که بعد از خواندن این مطلب درک درستی از سرعت صفحات وب و روش‌های اندازه‌گیری آن پیدا کرده باشید. ممنون میشوم اگر نقصی در این مطلب مشاهده می‌کنید و اگر نظری دارید اون رو برای من در بخش کامنت‌ها بنویسید چون برای من خیلی با ارزش خواهد بود (; .
