При создании эффективного и надежного сайта с низкими затратами на передачу данных необходимо решить несколько основных задач.
Для каждой цели нужен аудит.
| Цель | Зачем? | Что тестировать? |
|---|---|---|
| Обеспечьте конфиденциальность, безопасность и целостность данных, а также эффективное использование API | Почему важен протокол HTTPS | Протокол HTTPS используется для всех страниц, маршрутов и объектов сайта. |
| Повышение скорости загрузки | 53 % пользователей покидают сайты, которые загружаются дольше трех секунд. | Код JavaScript и CSS, который можно загрузить асинхронно или отложить. Установите цели для времени до интерактивности и размера полезной нагрузки: например, TTI в 3G. Задайте бюджет производительности. |
| Уменьшите размер страницы | • Снижение расходов на передачу данных для пользователей с ограниченными тарифными планами. • Снижение требований к хранилищу веб-приложений, что особенно важно для пользователей устройств с низкими техническими характеристиками. • Снижение затрат на хостинг и обслуживание. • Повышение производительности, надежности и отказоустойчивости обслуживания. | Установите ограничение на размер страницы, например не более 400 КБ при первой загрузке. Проверьте, не слишком ли много на сайте кода JavaScript. Проверьте размеры файлов, чтобы найти слишком большие изображения, медиафайлы, HTML, CSS и JavaScript. Найдите изображения, которые можно загружать с отложенной загрузкой, и проверьте, есть ли неиспользуемый код, с помощью инструментов покрытия. |
| Сократите количество запросов ресурсов | • Уменьшение задержек. • Снижение стоимости показа. • Повышение эффективности, надежности и отказоустойчивости показа. | Проверьте, нет ли чрезмерных или ненужных запросов к ресурсам любого типа. Например, это могут быть файлы, которые загружаются повторно, JavaScript, который загружается в нескольких версиях, CSS, который никогда не используется, изображения, которые никогда не просматриваются (или могут быть загружены с отложенной загрузкой). |
| Оптимизация использования памяти | Память может стать новым узким местом, особенно на мобильных устройствах. | С помощью Диспетчера задач Chrome сравните использование памяти, которое требуется вашему сайту и другим ресурсам для загрузки главной страницы и работы с другими функциями. |
| Снижение нагрузки на ЦП | Мобильные устройства, особенно недорогие, имеют ограниченную мощность ЦП. | Проверьте, не слишком ли много на сайте кода JavaScript. Найдите неиспользуемый код JavaScript и CSS с помощью инструментов покрытия. Проверьте, не слишком ли велик размер DOM и не выполняются ли при первой загрузке ненужные скрипты. Проверьте, не загружаются ли несколько версий JavaScript или библиотеки, от которых можно отказаться, немного изменив код. |
Существует множество инструментов и методов для аудита сайтов:
- Системные инструменты
- Встроенные инструменты браузера
- Расширения браузера
- Онлайн-заявки на тестирование
- Инструменты эмуляции
- Аналитика
- Показатели, предоставляемые серверами и бизнес-системами
- Запись экрана и видео
- Ручное тестирование
Ниже вы узнаете, какой подход подходит для каждого типа аудита.
Запись запросов ресурсов: количество, размер, тип и время
Для начала проверьте страницы с помощью сетевых инструментов браузера. Если вы не знаете, как это сделать, ознакомьтесь с руководством по началу работы с панелью "Сеть" в инструментах разработчика Chrome. Похожие инструменты есть в Firefox, Safari, Internet Explorer и Edge.
Не забудьте сохранить результаты до внесения изменений. Для сетевых запросов это может быть скриншот. Вы также можете сохранить данные профиля в виде файла JSON. Ниже вы найдете информацию о том, как сохранять результаты тестирования и делиться ими.
Прежде чем начать аудит использования сети, отключите кеш браузера, чтобы получить точную статистику по первой загрузке. Если вы уже используете кеширование с помощью сервисного работника, очистите хранилище Cache API. Чтобы не отключать кеш браузера и не удалять ранее кешированные записи, можно использовать окно в режиме инкогнито.
Вот некоторые основные функции и показатели, которые следует проверить с помощью инструментов браузера:
- Эффективность загрузки. Lighthouse предоставляет сводку показателей загрузки. Эдди Османи (Addy Osmani) написал отличную статью о ключевых моментах загрузки страницы.
- События временной шкалы, связанные с загрузкой и анализом ресурсов, а также использованием памяти. Если вы хотите получить более подробные данные, выполните профилирование памяти и JavaScript.
- Общий размер страницы и количество файлов.
- Количество и размер файлов JavaScript.
- Особенно большие файлы JavaScript (например, размером более 100 КБ).
- Неиспользуемый код JavaScript. Это можно проверить с помощью инструмента покрытия в Chrome.
- Общее количество и размер графических файлов.
- отдельные графические файлы большого размера;
- Графические форматы: есть ли файлы PNG, которые можно преобразовать в JPEG или SVG? Используется ли формат WebP с резервными вариантами?
- Используются ли методы адаптивных изображений (например, srcset).
- Размер HTML-файла.
- Общее количество и размер файлов CSS.
- Неиспользуемый код CSS. В Chrome для этого используется панель покрытия.
- Проверьте, нет ли проблем с использованием других объектов, например веб-шрифтов (включая шрифты значков).
- Проверьте временную шкалу в Инструментах разработчика на наличие элементов, блокирующих загрузку страницы.
Если вы используете быстрое подключение по Wi-Fi или передачу данных по мобильной сети, протестируйте сайт, эмулируя низкую пропускную способность и высокую задержку. Не забудьте протестировать сайт как на мобильных устройствах, так и на компьютерах. Некоторые сайты используют анализ агента пользователя, чтобы показывать разные ресурсы и макеты на разных устройствах. Возможно, вам потребуется протестировать сайт на реальном оборудовании с помощью удаленной отладки, а не только с помощью симуляции устройства.
Проверьте загрузку памяти и процессора
Прежде чем вносить изменения, запишите данные об использовании памяти и ЦП.
В Chrome диспетчер задач можно открыть из меню "Окно". Это простой способ проверить требования к веб-странице.
Протестируйте производительность при первой и последующих загрузках
Lighthouse, WebPagetest и Pagespeed Insights помогут вам проанализировать скорость загрузки, стоимость передачи данных и использование ресурсов. WebPagetest также проверяет кеширование статического контента, время до первого байта и эффективность использования сетей доставки контента.
Сохраните результаты
- WebPagetest У каждого результата тестирования есть собственный URL.
- PageSpeed Insights. Онлайн-инструмент PageSpeed Insights теперь включает данные отчета об удобстве пользования браузером Chrome, в котором представлена статистика производительности в реальных условиях.
- Lighthouse: сохраняйте отчеты с панели аудита инструментов разработчика Chrome, нажав кнопку скачивания:
Проверка на соответствие основным требованиям к прогрессивным веб-приложениям
Lighthouse помогает тестировать безопасность, функциональность, доступность, производительность и эффективность поисковой системы. В частности, Lighthouse проверяет, успешно ли на вашем сайте реализованы функции PWA, такие как сервис-воркеры и манифест веб-приложения.
Lighthouse также проверяет, может ли ваш сайт обеспечить приемлемый уровень работы в офлайн-режиме.
Вы можете скачать отчет Lighthouse в формате JSON или, если вы используете расширение Lighthouse для Chrome, поделиться отчетом в виде GitHub Gist. Для этого нажмите кнопку "Поделиться", выберите "Открыть в средстве просмотра", затем снова нажмите кнопку "Поделиться" в новом окне и выберите "Сохранить как Gist".
Используйте аналитику, отслеживание событий и бизнес-показатели, чтобы оценивать эффективность в реальном мире.
По возможности сохраните данные аналитики до внесения изменений: показатели отказов, время на странице, страницы выхода – все, что имеет отношение к вашим бизнес-требованиям.
По возможности запишите бизнес- и технические показатели, на которые могут повлиять изменения, чтобы сравнить результаты до и после. Например, на сайте электронной торговли можно отслеживать количество заказов в минуту или записывать статистику для стресс-тестирования и тестирования на выносливость. Если вы уменьшите размер страницы и количество запросов ресурсов, то, скорее всего, снизятся расходы на хранение данных, требования к ЦП, общая стоимость и отказоустойчивость.
Если вы ещё не настроили аналитику, сейчас самое время это сделать. Бизнес-метрики и аналитика – это окончательный арбитр, определяющий, работает ли ваш сайт. При необходимости настройте отслеживание событий, чтобы регистрировать действия пользователей, например нажатия кнопок и просмотры видео. Также рекомендуем настроить анализ путей к цели, чтобы узнать, как пользователи совершают конверсии.
Вы можете отслеживать скорость загрузки сайта в Google Аналитике, чтобы проверять, как показатели эффективности коррелируют с бизнес-показателями. Например, "Как быстро загрузилась главная страница?" и "Привел ли переход на главную страницу к продаже?".
Google Аналитика использует данные из Navigation Timing API.
Вы можете записывать данные с помощью одного из 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. Вы получаете реальные данные о скорости загрузки компонентов страницы: что загружается быстро, а что медленно. Сохраняйте видеозаписи и скринкасты, чтобы сравнивать их с последующими улучшениями.
Сравнение "до" и "после" – отличный способ показать улучшения.
Что еще?
Если применимо, получите оценку избыточности веб-страниц. Это забавный тест, но он также может быть убедительным способом продемонстрировать раздувание кода или показать, что вы внесли улучшения.
What Does My Site Cost? – приблизительная стоимость загрузки вашего сайта в разных регионах.
Существует множество других автономных и онлайн-инструментов. Ознакомьтесь с ними на сайте perf.rocks/tools.