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

سام داتون

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

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

هدف، واقعگرایانه چرا؟ برای چه چیزی تست کنیم؟
از حریم خصوصی، امنیت و یکپارچگی داده ها اطمینان حاصل کنید و استفاده قدرتمند از API را فعال کنید چرا HTTPS مهم است HTTPS برای تمام صفحات/مسیرها و دارایی های سایت پیاده سازی شده است.
بهبود عملکرد بار 53 درصد از کاربران سایت هایی را که بارگذاری آنها بیش از سه ثانیه طول می کشد، رها می کنند جاوا اسکریپت و CSS که می توانند به صورت ناهمزمان بارگیری شوند یا به تعویق بیفتند. اهدافی را برای زمان به اندازه تعاملی و محموله تعیین کنید: به عنوان مثال TTI در 3G. بودجه عملکرد را تنظیم کنید .
کاهش وزن صفحه • کاهش هزینه داده برای کاربران با طرح‌های داده محدود • کاهش نیازهای ذخیره‌سازی برنامه‌های وب - به ویژه برای کاربران دستگاه‌های با مشخصات پایین مهم است • کاهش هزینه‌های میزبانی و سرویس • بهبود عملکرد، قابلیت اطمینان و انعطاف‌پذیری سرویس بودجه وزن صفحه را تنظیم کنید: برای مثال، ابتدا زیر 400 کیلوبایت بارگیری کنید. جاوا اسکریپت سنگین را بررسی کنید. اندازه فایل ها را بررسی کنید تا تصاویر متورم، رسانه، HTML، CSS و جاوا اسکریپت را پیدا کنید. تصاویری را بیابید که ممکن است تنبل بارگذاری شوند و کدهای استفاده نشده را با ابزارهای پوشش بررسی کنید.
کاهش درخواست منابع • کاهش مشکلات تاخیر • کاهش هزینه های سرویس • بهبود عملکرد سرویس، قابلیت اطمینان و انعطاف پذیری به دنبال درخواست های بیش از حد یا غیر ضروری برای هر نوع منبعی باشید. به عنوان مثال: فایل هایی که به طور مکرر بارگذاری می شوند، جاوا اسکریپت که در چندین نسخه بارگذاری می شود، CSS که هرگز استفاده نمی شود، تصاویری که هرگز مشاهده نمی شوند (یا ممکن است با تنبلی بارگذاری شوند).
استفاده از حافظه را بهینه کنید حافظه می تواند به گلوگاه جدید تبدیل شود ، به ویژه در دستگاه های تلفن همراه از مدیر وظایف Chrome برای مقایسه سایت خود با سایرین برای استفاده از حافظه هنگام بارگیری صفحه اصلی و استفاده از سایر ویژگی های سایت استفاده کنید.
کاهش بار CPU دستگاه های تلفن همراه دارای CPU محدود هستند، به خصوص دستگاه های با مشخصات پایین جاوا اسکریپت سنگین را بررسی کنید. جاوا اسکریپت و CSS استفاده نشده را با ابزارهای پوشش پیدا کنید. اندازه DOM بیش از حد و اسکریپت هایی که در بارگذاری اول به طور غیر ضروری اجرا می شوند را بررسی کنید. به دنبال جاوا اسکریپت بارگیری شده در چندین نسخه یا کتابخانه هایی باشید که می توان با تغییر شکل جزئی از آنها جلوگیری کرد.

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

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

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

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

یک مکان خوب برای شروع هنگام ممیزی یک سایت، بررسی صفحات با ابزارهای شبکه مرورگرتان است. اگر مطمئن نیستید که چگونه این کار را انجام دهید، از طریق پانل شبکه 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 دسترسی داشته باشید. این یک راه ساده برای بررسی الزامات یک صفحه وب است.

Chrome Task Manager استفاده از حافظه و CPU را برای چهار برگه باز مرورگر نشان می دهد
Task Manager Chrome — مراقب حافظه و CPU hogs باشید!

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

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

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

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

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

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

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

اسکرین شات نحوه صادر کردن گزارش Chrome Lighthouse را به صورت خلاصه نشان می دهد
یک گزارش را از افزونه Lighthouse Chrome به یک خلاصه صادر کنید — روی دکمه اشتراک گذاری کلیک کنید

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

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

در صورت امکان، معیارهای تجاری و فنی را که ممکن است تحت تأثیر قرار گیرند، ثبت کنید تا بتوانید پس از ایجاد تغییرات، نتایج را با هم مقایسه کنید. به عنوان مثال: یک سایت تجارت الکترونیک ممکن است سفارشات در دقیقه را ردیابی کند یا آماری را برای تست استرس و استقامت ثبت کند. اگر وزن صفحه و درخواست منابع را کاهش دهید، هزینه‌های ذخیره‌سازی پشتیبان، نیازهای 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 را دریافت کنید. این یک تست سرگرم‌کننده است، اما همچنین می‌تواند راهی قانع‌کننده برای نشان دادن نفخ کد - یا نشان دادن بهبودهایی باشد.

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

تصویر از whatdoesmysitecost.com

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