Существует несколько основных целей создания производительного и отказоустойчивого сайта с низкой стоимостью данных.
Для каждой цели нужен аудит.
| Цель | Почему? | На что тестировать? |
|---|---|---|
| Обеспечьте конфиденциальность, безопасность и целостность данных, а также обеспечьте эффективное использование API. | Почему HTTPS имеет значение | HTTPS реализован для всех страниц/маршрутов и ресурсов сайта. |
| Улучшите производительность нагрузки | 53% пользователей покидают сайты , загрузка которых занимает более трех секунд. | JavaScript и CSS, которые можно загружать асинхронно или откладывать. Установите цели по времени интерактивности и размеру полезной нагрузки: например, TTI в 3G. Установите бюджет производительности . |
| Уменьшите вес страницы | • Сокращение затрат на передачу данных для пользователей с ограниченными тарифными планами. • Уменьшение требований к хранилищу для веб-приложений, что особенно важно для пользователей на устройствах с низкими характеристиками. • Снижение затрат на хостинг и обслуживание. • Повышение производительности, надежности и отказоустойчивости обслуживания. | Установите бюджет веса страницы: например, первая загрузка менее 400 КБ. Проверьте наличие тяжелого JavaScript. Проверьте размеры файлов, чтобы найти раздутые изображения, медиафайлы, HTML, CSS и JavaScript. Найдите изображения, которые могут загружаться отложенно, и проверьте наличие неиспользуемого кода с помощью инструментов покрытия . |
| Уменьшите запросы ресурсов | • Уменьшить проблемы с задержкой . • Снизить затраты на обслуживание. • Повысить производительность, надежность и отказоустойчивость обслуживания. | Ищите чрезмерные или ненужные запросы для любого типа ресурса. Например: файлы, которые загружаются повторно, JavaScript, загружаемый в нескольких версиях, CSS, который никогда не используется, изображения, которые никогда не просматриваются (или могут загружаться отложенно). |
| Оптимизировать использование памяти | Память может стать новым узким местом , особенно на мобильных устройствах | Используйте диспетчер задач Chrome, чтобы сравнить свой сайт с другими по использованию памяти при загрузке домашней страницы и использовании других функций сайта. |
| Уменьшите нагрузку на процессор | Мобильные устройства имеют ограниченный процессор, особенно устройства с низкими характеристиками. | Проверьте наличие тяжелого JavaScript. Найдите неиспользуемый JavaScript и CSS с помощью инструментов покрытия . Проверьте чрезмерный размер DOM и сценарии, которые выполняются без необходимости при первой загрузке. Ищите JavaScript, загруженный в нескольких версиях, или библиотеки, которых можно избежать с помощью незначительного рефакторинга. |
Существует широкий спектр инструментов и методов аудита веб-сайтов:
- Системные инструменты
- Встроенные инструменты браузера
- Расширения браузера
- Онлайн-тестовые приложения
- Инструменты эмуляции
- Аналитика
- Метрики, предоставляемые серверами и бизнес-системами
- Запись экрана и видео
- Ручные тесты
Ниже вы узнаете, какой подход актуален для каждого типа аудита.
Записывайте запросы ресурсов: количество, размер, тип и время.
Хорошим началом аудита сайта является проверка страниц с помощью сетевых инструментов вашего браузера. Если вы не знаете, как это сделать, воспользуйтесь руководством по началу работы с сетевой панелью Chrome DevTools. Подобные инструменты доступны для Firefox , Safari , Internet Explorer и Edge .
Не забудьте записать результаты, прежде чем вносить изменения. Для сетевых запросов это может быть просто снимок экрана — вы также можете сохранить данные профиля в виде файла JSON. Ниже приведена дополнительная информация о том, как сохранять и публиковать результаты тестов .
Прежде чем приступить к аудиту использования сети, обязательно отключите кеш браузера , чтобы получить точную статистику производительности при первой загрузке. Если вы уже выполняете кеширование через сервис-воркера, очистите хранилище Cache API . Возможно, вы захотите использовать окно в режиме инкогнито (частное), чтобы вам не приходилось беспокоиться об отключении кэша браузера или удалении ранее кэшированных записей.
Вот некоторые основные функции и показатели, которые следует проверить с помощью инструментов браузера:
- Производительность нагрузки: Lighthouse предоставляет сводку показателей нагрузки. Адди Османи написал отличный обзор ключевых моментов, связанных с загрузкой страницы.
- События временной шкалы для загрузки и анализа ресурсов, а также использования памяти. Если вы хотите пойти глубже, запустите профилирование памяти и JavaScript.
- Общий вес страницы и количество файлов.
- Количество и вес файлов JavaScript.
- Любые особенно большие отдельные файлы JavaScript (скажем, более 100 КБ).
- Неиспользуемый JavaScript. Проверить это можно с помощью инструмента покрытия Chrome.
- Общее количество и вес файлов изображений.
- Любые особенно большие отдельные файлы изображений.
- Форматы изображений: существуют ли PNG, которые могут быть JPEG или SVG ? Используется ли WebP с резервными вариантами?
- Используются ли методы адаптивного изображения (например, srcset ).
- Размер HTML-файла.
- Общее количество и вес CSS-файлов.
- Неиспользуемый CSS. (В Chrome используйте панель покрытия .)
- Проверьте наличие проблем с использованием других ресурсов, таких как веб-шрифты (включая шрифты значков).
- Проверьте временную шкалу DevTools на наличие всего, что блокирует загрузку страницы.
Если вы используете быстрый Wi-Fi или быстрое сотовое соединение, протестируйте эмуляцию с низкой пропускной способностью и высокой задержкой . Не забудьте тестировать как на мобильных устройствах, так и на настольных компьютерах — некоторые сайты используют анализ UA для предоставления разных ресурсов и макетов для разных устройств. Возможно, вам придется протестировать реальное оборудование с помощью удаленной отладки , а не только с помощью моделирования устройства.
Проверьте память и загрузку процессора
Прежде чем вносить изменения, ведите учет использования памяти и процессора.
В Chrome вы можете получить доступ к диспетчеру задач из меню «Окно». Это простой способ проверить требования веб-страницы.
Проверьте производительность при первой и последующей нагрузке
Lighthouse , WebPagetest и Pagespeed Insights полезны для анализа скорости, стоимости данных и использования ресурсов. WebPagetest также проверит кеширование статического контента, время до первого байта и эффективно ли ваш сайт использует CDN.
Сохранить результаты
- WebPagetest : каждый результат теста имеет свой собственный URL .
- Pagespeed Insights : онлайн- инструмент Pagespeed Insights теперь включает данные отчета Chrome User Experience, отражающие реальную статистику производительности.
- Lighthouse : сохраните отчеты из панели аудита Chrome DevTools, нажав кнопку загрузки:
Проверьте основные требования Progressive Web App.
Lighthouse помогает вам протестировать безопасность, функциональность, доступность, производительность и производительность поисковых систем. В частности, Lighthouse проверяет, успешно ли ваш сайт реализует функции PWA, такие как сервис-воркеры и манифест веб-приложения.
Lighthouse также проверяет, может ли ваш сайт обеспечить приемлемую работу в автономном режиме.
Вы можете загрузить отчет Lighthouse в формате JSON или, если вы используете расширение Lighthouse Chrome , поделиться отчетом как GitHub Gist: нажмите кнопку «Поделиться», выберите «Открыть в средстве просмотра», затем снова нажмите кнопку «Поделиться» в новом окне. и Сохранить как суть.
Используйте аналитику, отслеживание событий и бизнес-метрики для отслеживания реальной производительности.
Если можете, записывайте аналитические данные, прежде чем вносить изменения: показатели отказов, время на странице, страницы выхода: все, что имеет отношение к вашим бизнес-требованиям.
Если возможно, запишите бизнес- и технические показатели, которые могут быть затронуты, чтобы можно было сравнить результаты после внесения изменений. Например: сайт электронной коммерции может отслеживать количество заказов в минуту или записывать статистику для стресс-тестов и испытаний на выносливость. Затраты на внутреннее хранилище, требования к процессору, затраты на обслуживание и устойчивость, вероятно, улучшатся, если вы сократите вес страниц и запросы ресурсов.
Если аналитика не внедрена, сейчас самое время! Бизнес-показатели и аналитика являются окончательным арбитром того, работает ли ваш сайт. При необходимости включите отслеживание событий для действий пользователя, таких как нажатие кнопок и воспроизведение видео. Вы также можете реализовать анализ потока целей : путей, по которым ваши пользователи переходят к «конверсиям».
Вы можете следить за скоростью сайта Google Analytics, чтобы проверить, как показатели производительности коррелируют с бизнес-показателями. Например: «Как быстро загрузилась главная страница?» по сравнению с вопросом «привел ли вход через домашнюю страницу к продаже?»
Google Analytics использует данные из API 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 .