Аудит эффективности

Почему и что?

Вы, наверное, слышали обо всем хорошем, что методы прогрессивных веб-приложений могут сделать для вашего сайта. У вас может возникнуть соблазн сразу приступить к добавлению функций PWA. Это возможно, но вам будет намного лучше, если вы сначала подготовитесь к PWA.

Никакая магия PWA не решит такие проблемы, как блокировка JavaScript или раздутые изображения. PWA нуждается в прочной основе.

Так как же проверить работоспособность вашего сайта? Первый шаг — провести аудит сайта: объективный анализ того, что работает хорошо, а где (и как) можно улучшить.

Аудит вашего сайта или приложения поможет вам создать отказоустойчивую и производительную среду и выделить быстрые результаты, которые можно реализовать с минимальными затратами. Аудит также дает вам основу для разработки, основанной на данных. Сделало ли изменение ситуацию лучше? Чем ваш сайт отличается от конкурентов? Вы получаете показатели для определения приоритетности усилий и конкретные доказательства, которыми можно похвастаться после достижения улучшений.

Если у вас есть всего 5 минут…

Запустите Lighthouse на своей домашней странице и сохраните данные отчета . Вы получаете количественный базовый уровень и список задач по улучшению производительности, доступности, безопасности и SEO.

Если у вас есть всего 30 минут…

Вероятно, Lighthouse по-прежнему является лучшим местом для начала, но, потратив немного больше времени, вы также сможете записывать результаты с помощью других инструментов:

  • Панель безопасности Chrome DevTools : использование HTTPS.
  • Сетевая панель Chrome DevTools : время загрузки; размеры ресурсов и количество запросов к HTML, CSS, JavaScript, изображениям, шрифтам и другим файлам.
  • Диспетчер задач Chrome: если ваш сайт постоянно использует значительный объем процессора или больше памяти, чем другие приложения, вам может потребоваться устранить утечки памяти, проблемы с выполнением задач или загрузкой ресурсов. Обязательно протестируйте свой сайт на устройствах, типичных для ваших пользователей.
  • WebPagetest : производительность для разных мест и типов соединений, кеширование, время до первого байта, использование CDN.
  • Pagespeed Insights : производительность загрузки, стоимость данных и использование ресурсов, включая данные отчета Chrome User Experience, отражающие реальную статистику производительности.
  • Система показателей скорости и калькулятор воздействия : сравните скорость сайта с аналогами и оцените потенциальную возможность получения дохода от повышения скорости сайта.

Обязательно протестируйте свой веб-сайт так, как его видит первый пользователь. Откройте сайт в режиме инкогнито (частное) или используйте инструменты браузера, чтобы отключить кеширование и очистить хранилище. Это гарантирует, что каждый ресурс извлекается из сети, а не из локального кэша, поэтому вы получаете точную картину производительности при первой загрузке.

Ничто не сравнится с тестированием в реальных условиях — опробуйте свой сайт на тех же устройствах и соединениях, что и ваши пользователи, и записывайте свои субъективные впечатления.

Если вас сбивает с толку разнообразие инструментов…

Ознакомьтесь с нашим руководством: Как относиться к скоростным инструментам .

Если ничего другого, просто используйте Lighthouse , чтобы проверить:

Аудитория, заинтересованные стороны, контекст

Приоритеты рефакторинга зависят от вашей аудитории, контента и функциональности. Кто посещает ваш сайт? Почему и как они его используют? Каков ваш бюджет на производительность ? Если вы не уверены в ответе на эти вопросы, попробуйте выполнить упражнения по сбору требований из наших учебных ресурсов по PWA: ваша аудитория, ваш контент и дизайн для всех ваших пользователей .

Кто ваши заинтересованные стороны и каковы их приоритеты? Это повлияет на то, как вы структурируете, представляете и делитесь данными аудита.

Если вы не можете провести аудит всего сайта, проверьте аналитику страниц, чтобы понять, на чем сосредоточиться. Высокий показатель отказов, малое время пребывания на странице и неожиданные страницы выхода могут быть хорошим индикатором того, с чего начать. Аналогичным образом, такие бизнес-показатели, как стоимость хостинга, клики по рекламе и конверсии. Получите от заинтересованных сторон обзор того, какие данные для них важны.

Тестируйте, записывайте, исправляйте, повторяйте

Запишите состояние вашего сайта , прежде чем вносить какие-либо изменения, чтобы выявить проблемы и задать отправную точку для улучшений или регрессов. Это дает вам данные для обоснования и вознаграждения усилий по развитию.

Обязательно протестируйте несколько типов страниц на своем сайте, а не только домашнюю страницу. Для одностраничных приложений тестируйте различные компоненты, маршруты и UX-потоки, а не только первую загрузку.

Обратная связь