Почему и что?
Вы, вероятно, слышали обо всех хороших вещах, которые методы Progressive Web App могут сделать для вашего сайта. Вы можете почувствовать искушение сразу же перейти к добавлению функций PWA. Это возможно, но будет гораздо лучше, если вы сначала подготовитесь к PWA.
Никакое количество магии PWA не исправит такие проблемы, как блокировка JavaScript или раздутые изображения. PWA нуждаются в прочном фундаменте.
Итак, как проверить работоспособность вашего сайта? Первый шаг — провести аудит сайта: объективный обзор того, что работает хорошо, а где (и как) можно улучшить.
Аудит вашего сайта или приложения поможет вам создать устойчивый, производительный опыт — и выделить быстрые победы, которые могут быть реализованы с минимальным одобрением. Аудит также дает вам базовый уровень для разработки на основе данных. Улучшилось ли что-то в результате изменения? Как ваш сайт выглядит по сравнению с конкурентами? Вы получаете метрики для определения приоритетов усилий и конкретные доказательства, которыми можно похвастаться после внесения улучшений.
Если у вас всего 5 минут…
Запустите Lighthouse на своей домашней странице и сохраните данные отчета . Вы получите количественную базовую линию и список задач для улучшения производительности, доступности, безопасности и SEO.
Если у вас всего 30 минут…
Lighthouse , вероятно, по-прежнему остается лучшим местом для начала, но потратив немного больше времени, вы также сможете записывать результаты с других инструментов:
- Панель безопасности Chrome DevTools : использование HTTPS.
- Сетевая панель Chrome DevTools : время загрузки; размеры ресурсов и количество запросов для HTML, CSS, JavaScript, изображений, шрифтов и других файлов.
- Chrome Task Manager: если ваш сайт постоянно использует значительную часть ресурсов ЦП или памяти, чем другие приложения, то вам может потребоваться устранить утечки памяти, проблемы с запуском задач или загрузкой ресурсов. Обязательно протестируйте свой сайт на устройствах, представляющих ваших пользователей.
- WebPagetest : производительность для разных местоположений и типов подключений, кэширование, время до первого байта, использование CDN.
- Pagespeed Insights : производительность загрузки, стоимость данных и использование ресурсов, включая данные отчета об опыте использования Chrome, отражающие реальную статистику производительности.
- Таблица показателей скорости и калькулятор воздействия : сравните скорость сайта с аналогами и оцените потенциальные возможности получения дохода от улучшения скорости сайта.
Обязательно протестируйте свой веб-сайт так, как его видит первый пользователь. Откройте сайт в режиме инкогнито (частное окно) или используйте инструменты браузера, чтобы отключить кэширование и очистить хранилище. Это гарантирует, что каждый ресурс будет извлечен из сети, а не из локального кэша, поэтому вы получите точную картину производительности первой загрузки.
Ничто не сравнится с реальным тестированием — протестируйте свой сайт на тех же устройствах и с теми же подключениями, что и ваши пользователи, и запишите свои субъективные впечатления.
Если вас сбивает с толку широкий спектр инструментов…
Ознакомьтесь с нашим руководством: Как думать об инструментах повышения скорости .
Если ничего другого не найдено, просто используйте Lighthouse для проверки:
- HTTPS: каждый сайт должен предоставлять все ресурсы по протоколу HTTPS .
- Настройки сервера: ваш веб-сервер или CDN должны правильно использовать сжатие , использовать HTTP/2 и включать соответствующие заголовки, чтобы ваш браузер мог кэшировать ресурсы.
- Элементы скрипта, которые можно переместить в конец страницы и/или присвоить им атрибут async или defer .
- JavaScript и библиотеки, которые можно удалить.
- Неиспользуемый CSS и неиспользуемый JavaScript .
- Изображения, которые можно сохранять с более высокой степенью сжатия или меньшим размером пикселей.
- Файлы изображений, которые были бы меньше, сохранены в другом формате, например, фотографии, сохраненные в формате PNG.
Аудитория, заинтересованные стороны, контекст
Приоритеты рефакторинга зависят от вашей аудитории, контента и функциональности. Кто посещает ваш сайт? Почему и как они его используют? Каков ваш бюджет производительности ? Если вы не уверены в ответе на эти вопросы, попробуйте упражнения по сбору требований из наших учебных ресурсов PWA: Ваша аудитория, ваш контент и дизайн для всех ваших пользователей .
Кто ваши заинтересованные стороны и каковы их приоритеты? Это повлияет на то, как вы структурируете, представляете и делитесь данными аудита.
Если вы не можете провести аудит всего сайта, проверьте аналитику страниц, чтобы понять, на чем сосредоточиться. Высокие показатели отказов, малое время на странице и неожиданные страницы выхода могут быть хорошим индикатором того, с чего начать. Аналогично и бизнес-показатели, такие как расходы на хостинг, клики по рекламе и конверсии. Получите обзор от заинтересованных сторон о том, какие данные важны для них.
Тест, запись, исправление, повторение
Запишите состояние вашего сайта перед внесением любых изменений, чтобы выявить проблемы и установить отправную точку для улучшений или регрессий. Это даст вам данные для обоснования и вознаграждения усилий по разработке.
Обязательно протестируйте несколько типов страниц на вашем сайте — не только домашнюю страницу. Для одностраничных приложений тестируйте различные компоненты, маршруты и потоки UX, а не только первый опыт загрузки.