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