چند هدف اصلی برای ساختن سایتی با عملکرد خوب و انعطاف‌پذیر با هزینه داده کم وجود دارد.
برای هر هدف، به یک ممیزی نیاز دارید.
| هدف | چرا؟ | چه چیزی را باید آزمایش کرد؟ |
|---|---|---|
| تضمین حریم خصوصی، امنیت، و تمامیت داده‌ها، و فعال کردن استفاده قدرتمند از میانای برنامه‌سازی کاربردی | چرا HTTPS اهمیت دارد | HTTPS برای همه صفحه‌ها/مسیرها و دارایی‌های سایت پیاده‌سازی شده است. |
| بهبود عملکرد بارگیری | ۵۳٪ از کاربران سایت‌هایی را که بار شدنشان بیش‌از سه ثانیه طول می‌کشد رها می‌کنند | جاوا اسکریپت و CSS که می‌توانند به‌صورت ناهمگام بار شوند یا به تعویق بیفتند. اهدافی را برای زمان تعاملی و اندازه بار مفید تنظیم کنید: برای مثال، TTI در 3G. بودجه عملکرد تنظیم کنید. |
| کاهش سنگینی صفحه | • کاهش هزینه داده برای کاربران با طرح‌های داده محدود • کاهش الزامات فضای ذخیره‌سازی برنامه وب — به‌ویژه برای کاربران دستگاه‌های با مشخصات پایین مهم است • کاهش هزینه‌های میزبانی و ارائه • بهبود عملکرد، قابلیت اطمینان، و انعطاف‌پذیری ارائه | بودجه‌ای برای سنگینی صفحه تنظیم کنید: برای مثال، بارگیری اول کمتر از ۴۰۰ کیلوبایت باشد. بررسی کنید که جاوا اسکریپت سنگین نباشد. اندازه فایل‌ها را بررسی کنید تا تصاویر، رسانه‌ها، HTML، CSS، و جاوا اسکریپت‌های حجیم را پیدا کنید. تصاویری را که می‌توانند بارگیری کُند شوند پیدا کنید و با ابزارهای پوشش کدهای استفاده‌نشده را بررسی کنید. |
| کاهش درخواست‌های منبع | • کاهش مشکلات تأخیر • کاهش هزینه‌های ارائه • بهبود عملکرد، قابلیت اطمینان، و انعطاف‌پذیری ارائه | به‌دنبال درخواست‌های بیش‌ازحد یا غیرضروری برای هر نوع منبع بگردید. برای مثال: فایل‌هایی که به‌طور مکرر بار می‌شوند، جاوا اسکریپتی که در چندین نسخه بار می‌شود، CSS که هرگز استفاده نمی‌شود، تصاویری که هرگز مشاهده نمی‌شوند (یا می‌توانند به‌صورت کُند بار شوند). |
| بهینه کردن مصرف حافظه | حافظه می‌تواند به گلوگاه جدیدی تبدیل شود، به‌ویژه در دستگاه‌های همراه | از «مدیر وظیفه Chrome» برای مقایسه سایتتان با سایت‌های دیگر ازنظر استفاده از حافظه هنگام بار کردن صفحه اصلی و استفاده از دیگر ویژگی‌های سایت استفاده کنید. |
| کاهش بار واحد پردازش مرکزی | دستگاه‌های همراه واحد پردازش مرکزی محدودی دارند، به‌ویژه دستگاه‌های دارای مشخصات پایین | بررسی کنید که جاوا اسکریپت سنگین نباشد. جاوا اسکریپت و CSS استفاده‌نشده را با ابزارهای پوشش پیدا کنید. اندازه DOM بیش‌ازحد و اسکریپت‌هایی را که در اولین بارگیری به‌طور غیرضروری اجرا می‌شوند بررسی کنید. به‌دنبال جاوا اسکریپت بارشده در نسخه‌های متعدد یا کتابخانه‌هایی باشید که با بازسازی جزئی کد می‌توان از آن‌ها اجتناب کرد. |
طیف گسترده‌ای از ابزارها و تکنیک‌ها برای ممیزی وب‌سایت‌ها وجود دارد:
- ابزار سیستم
- ابزارهای داخلی مرورگر
- افزونه‌های مرورگر
- برنامه‌های آزمایشی آنلاین
- ابزارهای شبیه‌سازی
- Analytics
- سنجه‌های ارائه‌شده توسط سرورها و سیستم‌های کسب‌وکار
- ضبط صفحه‌نمایش و ویدیو
- آزمایش‌های دستی
در زیر خواهید دید که کدام رویکرد برای هر نوع ممیزی مناسب است.
ثبت درخواست‌های منبع: تعداد، اندازه، نوع، و زمان‌بندی
مکان خوبی برای شروع ممیزی سایت، بررسی صفحه‌ها با ابزارهای شبکه مرورگرتان است. اگر مطمئن نیستید چگونه این کار را انجام دهید، ازطریق پانل شبکه Chrome DevTools راهنمای شروع به کار را دنبال کنید. ابزارهای مشابهی برای Firefox، Safari، Internet Explorer و Edge دردسترس است.
به‌یاد داشته باشید که قبل‌از ایجاد تغییرات، نتایج را ثبت کنید. برای درخواست‌های شبکه، این کار می‌تواند به‌سادگی گرفتن نماگرفت باشد — همچنین می‌توانید داده‌های نمایه را به‌عنوان فایل JSON ذخیره کنید. اطلاعات بیشتری درباره نحوه ذخیره و هم‌رسانی نتایج آزمایش در زیر وجود دارد.
قبل‌از شروع ممیزی استفاده از شبکه، حتماً حافظه پنهان مرورگر را غیرفعال کنید تا مطمئن شوید آمار دقیقی برای عملکرد بارگیری اولیه دریافت می‌کنید. اگر ازقبل ازطریق یک سرویس‌کار حافظه پنهان را انجام می‌دهید، فضای ذخیره‌سازی Cache API را پاک کنید. شاید بخواهید از پنجره «ناشناس» (خصوصی) استفاده کنید تا نگران غیرفعال کردن حافظه نهان مرورگر یا برداشتن ورودی‌های قبلاً ذخیره‌شده در حافظه نهان نباشید.
در اینجا چند ویژگی و سنجه اصلی وجود دارد که باید با ابزارهای مرورگر بررسی کنید:
- عملکرد بار کردن: Lighthouse خلاصه‌ای از سنجه‌های بار کردن ارائه می‌دهد. ادی عثمانی خلاصه خوبی از لحظات کلیدی کاربر برای بار کردن صفحه نوشته است.
- رویدادهای خط زمان برای بار کردن و تجزیه کردن منابع، و استفاده از حافظه. اگر می‌خواهید عمیق‌تر شوید، حافظه و نمایه‌سازی جاوا اسکریپت را اجرا کنید.
- سنگینی کل صفحه و تعداد فایل‌ها.
- تعداد و وزن فایل‌های جاوا اسکریپت.
- هر فایل جاوا اسکریپت تکی که به‌طور خاص بزرگ باشد (مثلاً بیش‌از ۱۰۰ کیلوبایت).
- جاوا اسکریپت استفاده‌نشده. می‌توانید بااستفاده از ابزار پوشش Chrome بررسی کنید.
- تعداد و وزن کل فایل‌های تصویری.
- هر فایل تصویری تکی که به‌طور خاص بزرگ باشد.
- قالب‌های تصویر: آیا PNGهایی وجود دارد که بتواند JPEG یا SVG باشد؟ آیا WebP با بازگشت استفاده می‌شود؟
- آیا از تکنیک‌های تصویر واکنش‌گرا (مانند srcset) استفاده می‌شود.
- اندازه فایل HTML.
- تعداد و وزن کل فایل‌های CSS.
- CSS استفاده‌نشده. (در Chrome، از پانل پوشش استفاده کنید.)
- استفاده مشکل‌ساز از دارایی‌های دیگر مانند «قلم‌های وب» (ازجمله قلم‌های نماد) را بررسی کنید.
- خط زمان DevTools را برای هر چیزی که بارگیری صفحه را مسدود می‌کند بررسی کنید.
اگر از Wi-Fi سریع یا اتصال شبکه تلفن همراه سریع استفاده می‌کنید، با شبیه‌سازی تأخیر بالا و پهنای باند کم آزمایش کنید. به‌خاطر داشته باشید که هم در تلفن همراه و هم در رایانه آزمایش کنید — برخی‌از سایت‌ها از بوکشیدن UA برای ارائه دارایی‌ها و چیدمان‌های مختلف برای دستگاه‌های مختلف استفاده می‌کنند. ممکن است لازم باشد علاوه‌بر شبیه‌سازی دستگاه، روی سخت‌افزار واقعی بااستفاده از اشکال‌زدایی ازراه‌دور آزمایش کنید.
بررسی بار حافظه و واحد پردازش مرکزی
قبل‌از اعمال تغییرات، سابقه استفاده از حافظه و CPU را نگه دارید.
در Chrome می‌توانید از منو «پنجره» به «مدیر فعالیت‌ها» دسترسی پیدا کنید. این روشی ساده برای بررسی الزامات صفحه وب است.
آزمایش عملکرد بارگیری اول و بارگیری‌های بعدی
Lighthouse، WebPagetest و Pagespeed Insights برای تجزیه‌وتحلیل سرعت، هزینه داده و استفاده از منابع مفید هستند. WebPagetest همچنین حافظه پنهان محتوای ایستا، زمان اولین بایت، و اینکه آیا سایت شما به‌طور مؤثر از CDN استفاده می‌کند یا نه را بررسی می‌کند.
ذخیره کردن نتایج
- WebPagetest: نتایج آزمایش هرکدام نشانی وب خودشان را دارند.
- Pagespeed Insights: ابزار آنلاین Pagespeed Insights اکنون شامل داده‌های گزارش تجربه کاربری Chrome است که آمار عملکرد در دنیای واقعی را برجسته می‌کند.
- Lighthouse: با کلیک کردن روی دکمه بارگیری، گزارش‌ها را از پانل «بازرسی Chrome DevTools» ذخیره کنید:
آزمایش برای الزامات اصلی «برنامه وب پیش‌رو»
Lighthouse به شما کمک می‌کند امنیت، عملکرد، دسترس‌پذیری، کارایی، و عملکرد موتور جستجو را آزمایش کنید. به‌طور خاص، Lighthouse بررسی می‌کند که آیا سایت شما ویژگی‌های PWA مانند کارگران خدمات و مانیفست برنامه وب را با موفقیت پیاده‌سازی می‌کند یا خیر.
Lighthouse همچنین آزمایش می‌کند که آیا سایت شما می‌تواند تجربه آفلاین قابل‌قبولی ارائه دهد یا نه.
می‌توانید گزارش Lighthouse را به‌صورت JSON بارگیری کنید یا اگر از افزونه Lighthouse Chrome استفاده می‌کنید، گزارش را به‌عنوان GitHub Gist هم‌رسانی کنید: روی دکمه هم‌رسانی کلیک کنید، «باز کردن در نمایشگر» را انتخاب کنید، سپس دوباره روی دکمه هم‌رسانی در پنجره جدید کلیک کنید و «ذخیره به‌عنوان Gist» را انتخاب کنید.
استفاده از تجزیه‌وتحلیل، ردیابی رویداد، و سنجه‌های کسب‌وکار برای ردیابی عملکرد در دنیای واقعی
اگر می‌توانید، پیش‌از اعمال تغییرات، سابقه‌ای از داده‌های تحلیلی را نگه دارید: نرخ پرش، زمان صرف‌شده در صفحه، صفحات خروج: هر چیزی که به الزامات کسب‌وکارتان مربوط است.
درصورت امکان، سنجه‌های فنی و کسب‌وکار را که ممکن است تحت‌تأثیر قرار بگیرند ثبت کنید تا بتوانید نتایج را پس‌از اعمال تغییرات مقایسه کنید. برای مثال: سایت تجارت الکترونیک ممکن است سفارش‌ها در دقیقه را ردیابی کند یا آمار آزمایش‌های استرس و تحمل را ثبت کند. اگر سنگینی صفحه و درخواست‌های منابع را کاهش دهید، احتمالاً هزینه‌های ذخیره‌سازی پس‌نهایی، الزامات CPU، هزینه‌های خدمات ارائه‌شده، و انعطاف‌پذیری بهبود می‌یابد.
اگر تجزیه‌وتحلیل را پیاده‌سازی نکرده‌اید، اکنون وقتش است! سنجه‌ها و تجزیه‌وتحلیل‌های کسب‌وکار داور نهایی برای تعیین این است که سایتتان کار می‌کند یا نه. درصورت لزوم، ردیابی رویداد را برای کنش‌های کاربر مثل کلیک کردن روی دکمه و پخش ویدیو اضافه کنید. همچنین ممکن است بخواهید تحلیل جریان هدف را پیاده‌سازی کنید: مسیرهایی که کاربران شما ازطریق آن‌ها به‌سمت «تبدیل‌ها» حرکت می‌کنند.
می‌توانید سرعت سایت Google Analytics را زیرنظر داشته باشید تا ببینید سنجه‌های عملکرد چگونه با سنجه‌های کسب‌وکار همبستگی دارند. برای مثال: «صفحه اصلی چقدر سریع بار شد؟» درمقایسه با «آیا ورود ازطریق صفحه اصلی به فروش منجر شد؟»
Google Analytics از داده‌های Navigation Timing API استفاده می‌کند.
ممکن است بخواهید داده‌ها را بااستفاده از یکی از میاناهای برنامه‌سازی کاربردی عملکرد JavaScript یا سنجه‌های خودتان ضبط کنید، برای مثال:
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های متعدد برای دریافت اندازه‌گیری‌های زنده و واقعی از کاربران واقعی است.
تجربه دنیای واقعی: ضبط صفحه‌نمایش و ویدیو
از بار شدن صفحه در تلفن همراه و رایانه فیلم بگیرید. این ویژگی در نرخ فریم بالا و درصورت افزودن نمایشگر زمان‌سنج حتی بهتر کار می‌کند.
شاید بخواهید ضبط‌های ویدیویی از صفحه را هم ذخیره کنید. برنامه‌های ضبط ویدیویی از صفحه زیادی برای Android، iOS، و پلاتفرم‌های رایانه (و اسکریپت‌هایی برای انجام همین کار) وجود دارد.
بار کردن صفحه ضبط ویدیو بسیار شبیه به نمای نوار فیلم در WebPagetest یا ضبط نماگرفت در Chrome DevTools است. سوابق واقعی سرعت بار شدن مؤلفه‌های صفحه را دریافت می‌کنید: چه چیزی سریع است و چه چیزی کند. ضبط‌های ویدیویی و ضبط‌های ویدیویی از صفحه را ذخیره کنید تا با بهبودهای بعدی مقایسه کنید.
مقایسه پهلوبه‌پهلو قبل و بعد می‌تواند راهی عالی برای نشان دادن بهبودها باشد!
دیگر چه؟
درصورت مرتبط بودن، امتیاز تورم وب دریافت کنید. این یک آزمایش جالب است، اما همچنین می‌تواند راهی قانع‌کننده برای نشان دادن تورم کد باشد — یا نشان دهد که شما بهبودهایی ایجاد کرده‌اید.
هزینه سایت من چقدر است؟، که در زیر نشان داده شده است، راهنمای تقریبی برای هزینه مالی بار کردن سایت شما در مناطق مختلف ارائه می‌دهد.
بسیاری از ابزارهای مستقل و آنلاین دیگر دردسترس هستند: به perf.rocks/tools نگاهی بیندازید.