Почему и что?
Вы, наверное, слышали обо всем хорошем, что методы прогрессивных веб-приложений могут сделать для вашего сайта. У вас может возникнуть соблазн сразу приступить к добавлению функций 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 , чтобы проверить:
- HTTPS: каждый сайт должен доставлять все ресурсы через HTTPS .
- Настройки сервера: ваш веб-сервер или CDN должны правильно использовать сжатие , использовать HTTP/2 и включать соответствующие заголовки , чтобы ваш браузер мог кэшировать ресурсы.
- Элементы сценария, которые можно переместить в нижнюю часть страницы и/или получить атрибут async или defer .
- JavaScript и библиотеки, которые можно удалить.
- Неиспользуемый CSS и неиспользуемый JavaScript .
- Изображения, которые можно сохранить с более высоким сжатием или меньшим размером пикселей.
- Файлы изображений меньшего размера сохраняются в другом формате, например фотографии, сохраненные в формате PNG.
Аудитория, заинтересованные стороны, контекст
Приоритеты рефакторинга зависят от вашей аудитории, контента и функциональности. Кто посещает ваш сайт? Почему и как они его используют? Каков ваш бюджет на производительность ? Если вы не уверены в ответе на эти вопросы, попробуйте выполнить упражнения по сбору требований из наших учебных ресурсов по PWA: ваша аудитория, ваш контент и дизайн для всех ваших пользователей .
Кто ваши заинтересованные стороны и каковы их приоритеты? Это повлияет на то, как вы структурируете, представляете и делитесь данными аудита.
Если вы не можете провести аудит всего сайта, проверьте аналитику страниц, чтобы понять, на чем сосредоточиться. Высокий показатель отказов, малое время пребывания на странице и неожиданные страницы выхода могут быть хорошим индикатором того, с чего начать. Аналогичным образом, такие бизнес-показатели, как стоимость хостинга, клики по рекламе и конверсии. Получите от заинтересованных сторон обзор того, какие данные для них важны.
Тестируйте, записывайте, исправляйте, повторяйте
Запишите состояние вашего сайта , прежде чем вносить какие-либо изменения, чтобы выявить проблемы и задать отправную точку для улучшений или регрессов. Это дает вам данные для обоснования и вознаграждения усилий по развитию.
Обязательно протестируйте несколько типов страниц на своем сайте, а не только домашнюю страницу. Для одностраничных приложений тестируйте различные компоненты, маршруты и UX-потоки, а не только первую загрузку.