Предположим, у вас есть сайт или веб-приложение на JS-фреймворке. Было бы здорово, если бы оно работало так же быстро, как этого хотят пользователи. Для того, чтобы ваш проект соответствовал их ожиданиям в плане скорости, необходимо оптимизировать работу фронтенда. Какие этапы нужно пройти, чтобы заставить сайт работать максимально быстро?
Сначала необходимо собрать аналитику производительности фронтенда. Для этого вам понадобятся такие инструменты, как Lighthouse (от Chrome) и Speedcurve.
Lighthouse даст вам четкую сводку по производительности фронтэнда и компонентам, которые стоит оптимизировать. Второй инструмент предназначен для этих же задач, но позволяет отслеживать динамику. Что и как оптимизировать после получения результатов.
1. Изображения
Пожалуй, именно они составляют значимую долю данных.
- Оптимизируйте их по размеру и убедитесь в их адаптивности. Можно использовать инструмент Responsive Image Breakpoints Generator для получения все нужных вариантов и код: https://www.responsivebreakpoints.com/
- Также для уменьшения нагрузки можно использовать облачное хранилище, которое будет отдавать все статические данные.
- Увеличить быстродействие также можно с помощью технологии lazy load, при использовании которой будут подгружаться только видимые в данный момент изображения.
- В качестве финального шага по оптимизации картинок можно использовать CDN. Благодаря кэшированию изображений на распределенной сети вы сможете значительно ускорить загрузку. Пользователь, заходящий на ваш сайт из США, не будет вынужден загружать картинку с европейского сервера, CDN "выдаст" его с ближайшего из возможных сервера.
2. HTML, CSS, JS
HTML — каркас сайта. Если в коде присутствуют ссылки на внешние ресурсы, как бывает в 99.9% случаев, придерживайтесь нескольких правил:
- все ссылки на CSS — в начале документа;
- критичные стили можно вынести в <style>, а для других использовать предварительную загрузку или http/2 Server Push;
- используйте для JS атрибуты async (если ждать полной загрузки нет необходимости) или defer (в обратном случае).
Конечно, не забывайте отключать загрузку неиспользуемых модулей.
3. Сжатие и кэширование
- Сжать код, картинки, аудио можно с помощью gzip или Brotli. Отредактировав файл конфигурации веб-сервера, можно включить выбранный способ сжатия.
Для кэширования отлично подходит Leverage Browser Caching, который также можно включить в конфиг-файле.
Не ленитесь оптимизировать сайт или веб-приложение, так как скорость работы является одним из критически важных факторов популярности его использования.
Понравилась статья? Тогда ставьте лайк и подписывайтесь на канал, чтобы не пропускать новые выпуски!