У вас есть всего 50 мс, чтобы произвести хорошее впечатление на потенциальных посетителей вашего сайта. Да, всего за 50 мс пользователи получают представление о вашем сайте и решают, хотят ли они остаться.
Большинству сайтов не удается предоставить хороший UX из-за плохо оптимизированного фронтенда. Чаще всего дело бывает в загрузке данных и изображений.
В этой статье я расскажу о лучших подходах к оптимизации загрузки данных во фронтенде.
1. Минимизируйте ресурсы
Минимизация ресурсов подразумевает удаление ненужных и устаревших данных из вашего HTML, CSS и JavaScript-кода. Речь идет о данных, загружать которые не обязательно. Это комментарии в коде и форматирование, пробелы, неиспользуемый код, символы новой строки и т. д.
Минимизация HTML, CSS и JavaScript ускоряет время загрузки фронтенда, поскольку уменьшает количество кода, который нужно запросить с сервера.
Обратите внимание на следующие инструменты. Они помогут вам сгенерировать оптимизированную версию вашего HTML, CSS и JavaScript-кода.
- HTML: PageSpeed Insights, HTML Minifier.
- CSS: cssmin.js, Coverage tool в Chrome Dev Tools, YUI Compressor.
- JavaScript: JSMin, Coverage tool в Chrome Dev Tools.
2. Уменьшайте число вызовов сервера
В общем, чем чаще ваш фронтенд обращается к серверу, тем больше времени потребуется на загрузку. Дело в том, что какой бы запрос вы ни отправили на сервер, перед рендерингом страницы потребуется полная коммуникация.
Чтобы снизить число обращений к серверу до необходимого минимума, можно сделать следующее:
- Используйте CSS-спрайты. Это один из самых простых способов снизить число вызовов сервера. Вместо загрузки на сайт десяти отдельных изображений спрайт загружает один графический файл, содержащий набор картинок. Для отображения желаемого сегмента изображения можно использовать CSS-свойства background-image и background-position. Это позволит вам уменьшить количество запросов к серверу.
- Ограничивайте число сторонних плагинов, совершающих много внешних запросов.
- Следите за тем, чтобы на сайте не было сломанных ссылок на несуществующие файлы.
Кроме того, чтобы увеличить скорость начальной загрузки приложения, можно рассмотреть возможность рендеринга на сервере.
Если при загрузке первой страницы также будет загружаться не много данных, это очень сильно улучшит производительность.
3. Удаляйте ненужные пользовательские шрифты
Пользовательские шрифты весьма популярны, ведь они придают сайту индивидуальность. Но их применение сказывается на производительности.
Пользовательские шрифты могут быть довольно большими по размеру, а веб-шрифты, например, от Google, добавляют HTTP-запросы ко внешним ресурсам. Это снижает скорость рендеринга страницы.
Поэтому, работая со шрифтами на сайте:
- Конвертируйте шрифты в наиболее эффективный формат. Шрифты в современном формате, например WOFF2, могут быть приблизительно на 30% меньше по размеру, чем в других форматах.
- Делайте поднаборы шрифтов, чтобы удалить ненужные символы. Файлы шрифтов содержат символы для многих языков. Некоторые из них могут вообще никогда на вашем сайте не использоваться. Делая поднаборы шрифтов, мы можем удалить ненужные символы. Останутся лишь те, которые действительно необходимы для отображения контента сайта.
- Делайте предварительную загрузку шрифтов, которые явно требуются на странице.
Использование парочки пользовательских шрифтов может не нанести ощутимого вреда. Но если они используются очень широко, это непременно скажется на скорости загрузки фронтенда. Поэтому стоит еще раз оценить плюсы и минусы использования пользовательских шрифтов на своем сайте.
4. Сжимайте файлы
Чем больше размер файла, тем дольше происходит его загрузка. А современные сайты часто содержат большие пакеты HTML, CSS и JavaScript.
Сжимая эти файлы подходящим способом, вы можете легко улучшить время загрузки фронтенда. По части сжатия файлов есть два хороших варианта:
- Gzip. Самый популярный метод сжатия и распаковки данных. В настоящее время поддерживается всеми современными браузерами. Gzip сжимает пакеты HTML, CSS и JavaScript на сервере, еще до отправки их браузеру. А на стороне клиента происходит распаковка файлов и доставка контента.
- Brotli. Наилучший уровень сжатия по сравнению с другими доступными вариантами. Согласно исследованию CertSimple, файлы JavaScript, сжатые при помощи Brotli, на 14% меньше файлов, сжатых Gzip. В файлы HTML и CSS сжимаются лучше, чем с использованием Gzip, на 21% и 17% соответственно.
5. Оптимизируйте изображения
Картинки — жизненно важная часть сайтов. 93,7% сайтов в интернете используют хотя бы один формат изображений, потому что картинки привлекают пользователей.
Но изображения на сайте влияют на время загрузки. Конечно, если они не оптимизированы.
Есть несколько способов оптимизации изображений.
Используйте WebP или AVIF
Использование новых форматов изображений, например WebP и AVIF, способствует улучшению производительности (по сравнению с использованием более старых форматов, таких как JPEG и PNG).
WebP на 26% меньше, чем PNG, и на 25-35% меньше, чем JPEG. AVIF на 50% меньше, чем JPEG, и на 20% меньше, чем WebP.
Но тут есть загвоздка: поддержка в браузерах. WebP получил эту поддержку недавно, так что в более старых версиях браузеров ее может не быть. А формат AVIF поддерживается только в Chrome и Opera.
Сохраняйте изображения в правильных размерах
Еще один способ уменьшить время доставки картинок и улучшить производительность сайта — использовать адаптивные изображения. На смартфоны и планшеты приходится больше половины всего веб-трафика. Подгонка размеров под разрешения популярных устройств и подача их при помощи srcset позволит еще больше оптимизировать время загрузки фронтенда.
Однако выбор подходящего формата и размеров изображений — не единственное, что можно сделать. Вы можете:
- сжимать изображения
- использовать progressive JPEG
- показывать пользователям с медленным интернетом картинки поменьше
- использовать HTTP/2 вместо HTTP/1.1
- использовать image-set.
6. Применяйте ленивую загрузку
Lazy loading помогает ускорить загрузку фронтенда. При ленивой загрузке на странице сперва загружается только необходимый контент, а остальное подгружается по мере того, как у пользователя возникает в этом необходимость.
Например, когда вы делаете поиск по изображениям в Google, сперва загружается только маленький набор картинок. Для недостающего контента загружаются плейсхолдеры. Это уменьшает время загрузки. Настоящий контент рендерится только когда пользователь начинает прокручивать страницу внизу.
Помимо плейсхолдеров, можно использовать эффект размытия и нативную ленивую загрузку.
7. Кэширование
При каждом уникальном посещении веб-страницы должно загружаться всё, от HTML до JavaScript. Из-за этого скорость загрузки снижается.
Лучший способ бороться с этой проблемой — использовать кэширование. При должной настройке браузеры сохраняют файлы в своем локальном кэше и не загружают их заново при повторном посещении страницы.
Но помимо кэша браузеров есть и другие варианты:
- Кэш-сервер. Запрос пользователя отправляется на ближайший кэширующий сервер из набора подобных серверов.
- Кэширование в памяти. Некоторые части данных (например, переменные JavaScript) сохраняются в памяти и не загружаются повторно.
- Кэш страницы. Похоже на кэширование в памяти, но для хранения данных используется файловое хранилище, обычно управляемое браузером.
8. Используйте префетчинг
Предварительная выборка ресурсов (prefetching) — еще один способ улучшения производительности и оптимизации загрузки данных фронтенда.
Вы, разработчик, знаете свое приложение лучше, чем какой-то браузер. Префетчинг использует эту информацию, чтобы подсказывать браузеру, какие ресурсы могут понадобиться в будущем.
При предварительной выборке ресурс загружается заранее, до того, как в нем возникает необходимость, чтобы уменьшить время ожидания этого ресурса.
Есть три основных вида префетчинга. Самый популярный и широко используемый — префетчинг ссылок. Но DNS-префетчинг и предварительный рендеринг тоже весьма полезны.
Предварительная выборка ссылок
Link prefetching позволяет браузеру собрать ресурсы, которые, вероятно, понадобятся пользователю в ближайшем будущем. То есть разработчики могут предположить, в каком месте пользователю может захотеться посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кэшируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Когда пользователь запрашивает контент, который хостится по определенному IP-адресу, в DNS осуществляется поиск доменного имени, которому принадлежит адрес.
DNS Prefetching позволяет браузеру заранее провести поиск в DNS по ссылкам, которые есть на странице, просматриваемой пользователем. Таким образом, когда пользователь кликнет на какую-то из этих ссылок, ему не придется ждать поиска в DNS.
9. Используйте Content Delivery Network
Когда пользователь географически находится далеко от сервера, задержка ответа растет. Более того, загрузка запроса также может повлиять на время обслуживания контента.
Скорость загрузки содержимого фронтенда, включая HTML-страницы, таблицы стилей, файлы JavaScript и изображения, может быть оптимизирована при помощи CDN.
Content delivery network (CDN) (англ. «сеть доставки содержимого») — это группа серверов, распределенных по нескольким географическим локациям. На этих серверах хранятся кэшированные версии контента, которые можно быстро отправить пользователю.
CDN перенаправляет запросы пользователя на ближайший сервер.
Есть еще особый вид CDN — сеть доставки изображений. Это отличный вариант оптимизации картинок. С помощью этой сети можно добиться уменьшения размера файлов на 40-80%. С учетом того, что больше половины веса страницы обычно приходится на изображения, интеграция CDN для картинок даст вам существенный прирост производительности.
Заключение
Золотое правило: 80-90% времени, которое требуется на ответ конечному пользователю, тратится на загрузку таких компонентов фронтенда, как изображения, таблицы стилей, скрипты и т. п.
Поэтому оптимизация загрузки этих данных очень важна для снижения показателя отказов и увеличения количества времени, которое пользователь проводит на сайте.
В этой статье мы разобрали несколько способов оптимизировать загрузку данных фронтенда. Надеюсь, вам они пригодятся.
Перевод статьи «9 Best Practices for Optimizing Frontend Performance».
От редакции Techrocks. Возможно, вам также будет интересна статья «Создаем прелоадеры при помощи CSS».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]