از ابزارهایی برای سنجش عملکرد استفاده کنید

Sam Dutton

چندین هدف اصلی برای ایجاد یک سایت کارآمد و انعطاف پذیر با هزینه داده کم وجود دارد.

برای هر هدف، شما نیاز به یک ممیزی دارید.

طیف گسترده ای از ابزارها و تکنیک ها برای ممیزی وب سایت ها وجود دارد:

• ابزارهای سیستم
• ابزارهای داخلی مرورگر
• پسوند مرورگر
• برنامه های تست آنلاین
• ابزارهای شبیه سازی
• تجزیه و تحلیل
• معیارهای ارائه شده توسط سرورها و سیستم های تجاری
• ضبط صفحه و فیلم
• تست های دستی

در زیر خواهید آموخت که کدام رویکرد برای هر نوع حسابرسی مرتبط است.

درخواست های منابع را ثبت کنید: تعداد، اندازه، نوع و زمان

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

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

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

در اینجا برخی از ویژگی ها و معیارهای اصلی وجود دارد که باید با ابزارهای مرورگر بررسی کنید:

• عملکرد بار: Lighthouse خلاصه ای از معیارهای بار را ارائه می دهد. Addy Osmani خلاصه ای عالی از لحظات کلیدی کاربر برای بارگذاری صفحه نوشته است.
• رویدادهای جدول زمانی برای بارگیری و تجزیه منابع و استفاده از حافظه. اگر می خواهید عمیق تر شوید، حافظه و پروفایل جاوا اسکریپت را اجرا کنید.
• وزن کل صفحه و تعداد فایل ها
• تعداد و وزن فایل های جاوا اسکریپت.
• هر فایل جاوا اسکریپت به خصوص بزرگ (مثلاً بیش از 100 کیلوبایت).
• جاوا اسکریپت استفاده نشده می‌توانید با استفاده از ابزار پوشش Chrome بررسی کنید.
• تعداد و وزن کل فایل های تصویری.
• هر فایل تصویری به خصوص بزرگ.
• فرمت های تصویر: آیا PNG هایی وجود دارند که می توانند JPEG یا SVG باشند ؟ آیا WebP همراه با بک گراند استفاده می شود؟
• آیا از تکنیک‌های تصویر واکنش‌گرا (مانند srcset ) استفاده می‌شود.
• اندازه فایل HTML
• تعداد و وزن کل فایل های CSS.
• CSS استفاده نشده (در کروم، از پانل پوشش استفاده کنید.)
• استفاده مشکل ساز از سایر دارایی ها مانند فونت های وب (از جمله فونت های نماد) را بررسی کنید.
• جدول زمانی DevTools را برای هر چیزی که بارگذاری صفحه را مسدود می کند بررسی کنید.

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

بار حافظه و CPU را بررسی کنید

قبل از ایجاد تغییرات، سابقه استفاده از حافظه و CPU را نگه دارید.

در کروم می توانید از منوی Window به Task Manager دسترسی داشته باشید. این یک راه ساده برای بررسی الزامات یک صفحه وب است.

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

Lighthouse ، WebPagetest و Pagespeed Insights برای تجزیه و تحلیل سرعت، هزینه داده و استفاده از منابع مفید هستند. WebPagetest همچنین ذخیره محتوای استاتیک، زمان تا اولین بایت و اینکه آیا سایت شما از CDN ها استفاده موثری می کند، بررسی می کند.

نتایج را ذخیره کنید

• WebPagetest : نتایج آزمایش هر کدام URL خاص خود را دارند .
• Pagespeed Insights : ابزار آنلاین Pagespeed Insights اکنون شامل داده‌های گزارش تجربه کاربر Chrome است که آمارهای عملکرد دنیای واقعی را برجسته می‌کند.
• Lighthouse : با کلیک بر روی دکمه دانلود، گزارش ها را از پانل حسابرسی Chrome DevTools ذخیره کنید:

  

الزامات اصلی برنامه وب پیشرفته را آزمایش کنید

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

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

می‌توانید گزارش Lighthouse را به‌عنوان JSON دانلود کنید یا اگر از افزونه Lighthouse Chrome استفاده می‌کنید، گزارش را به‌عنوان GitHub Gist به اشتراک بگذارید: روی دکمه اشتراک‌گذاری کلیک کنید، Open in Viewer را انتخاب کنید، سپس دوباره روی دکمه اشتراک‌گذاری در پنجره جدید کلیک کنید. و ذخیره به عنوان Gist.

از تجزیه و تحلیل، ردیابی رویداد و معیارهای تجاری برای ردیابی عملکرد دنیای واقعی استفاده کنید

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

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

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

می‌توانید سرعت سایت Google Analytics را زیر نظر داشته باشید تا بررسی کنید که چگونه معیارهای عملکرد با معیارهای کسب‌وکار مرتبط هستند. به عنوان مثال: "صفحه اصلی با چه سرعتی بارگیری شد؟" در مقایسه با "آیا ورود از طریق صفحه اصلی منجر به فروش شد؟"

Google Analytics از داده های Navigation Timing API استفاده می کند.

ممکن است بخواهید داده ها را با استفاده از یکی از APIهای عملکرد جاوا اسکریپت یا معیارهای خود ثبت کنید، به عنوان مثال:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

همچنین می‌توانید از ReportingObserver برای بررسی اخطارهای عدم استفاده از مرورگر و مداخله استفاده کنید. این یکی از بسیاری از APIها برای دریافت اندازه‌گیری‌های واقعی و زنده از کاربران واقعی است.

تجربه دنیای واقعی: ضبط صفحه و فیلم

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

همچنین ممکن است بخواهید تصاویر صفحه را ذخیره کنید. بسیاری از برنامه های ضبط صفحه نمایش برای پلتفرم های اندروید، iOS و دسکتاپ (و اسکریپت هایی برای انجام همین کار ) وجود دارد.

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

مقایسه قبل و بعد از کنار هم می تواند راهی عالی برای نشان دادن پیشرفت ها باشد!

دیگه چی؟

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

هزینه سایت من چقدر است؟ ، نشان داده شده در زیر، راهنمای تقریبی هزینه مالی بارگذاری سایت شما در مناطق مختلف را ارائه می دهد.

بسیاری از ابزارهای مستقل و آنلاین دیگر در دسترس هستند: نگاهی به perf.rocks/tools بیندازید.