От автора: у вас есть 50 миллисекунд, чтобы произвести первое хорошее впечатление на ваших потенциальных посетителей. Итак, да, пользователям требуется всего 50 миллисекунд, чтобы сформировать мнение о вашем веб-сайте и решить, останутся они или уйдут.
Большинство веб-сайтов не обеспечивают удовлетворительных впечатлений от продукта из-за плохо оптимизированного фронтенда. И чаще всего это связано с неоптимальной загрузкой данных и оптимизацией изображений. В этой статье я рассмотрю девять рекомендаций, которые будут полезны для оптимизации загрузки данных.
1. Уменьшите ресурсы
Минификация ресурсов относится к процессу удаления ненужных, избыточных данных из HTML, CSS и JavaScript, которые не требуется загружать. Она включает в себя удаление комментариев и пробелов, неиспользуемого кода, символов новой строки и т. д.
Минификация HTML, CSS и JavaScript ускоряет время загрузки внешнего интерфейса, поскольку сокращает объем кода, который необходимо запрашивать от сервера.
Воспользуйтесь следующими инструментами для создания оптимизированной версии HTML кода, CSS и JavaScript.
HTML: PageSpeed Insights, HTML Minifier
CSS: cssmin.js, Chrome Dev Tools, YUI Compressor
JavaScript: JSMin, Chrome Dev Tools
2. Уменьшите количество обращений к серверу
В общем, чем больше запросов ваш интерфейс делает на сервер, тем больше времени нужно для его загрузки. Вы можете использовать несколько способов для уменьшения количества запросов к серверу, необходимых для загрузки страницы.
Используйте CSS-спрайты — это один из самых простых способов уменьшить количество обращений к серверу. Вместо того, чтобы загружать на сайт десять отдельных изображений, спрайт загружает один файл изображения, объединенный с использованием коллекции изображений. Вы можете использовать свойства background-image и background-position, чтобы отобразить нужный сегмент изображения. Делая это, вы сокращаете количество требуемых запросов к серверу.
Уменьшите количество сторонних плагинов, которые делают большое количество внешних запросов.
Исправьте неработающие ссылки на несуществующие файлы.
Кроме того, вы также можете посмотреть рендеринг на стороне сервера, чтобы ускорить начальную загрузку приложения. Если при загрузке первой страницы, присутствуют минимальные данные — это существенно повлияет на производительность.
3. Удалите ненужные пользовательские шрифты
Пользовательские шрифты стали очень популярными, поскольку они помогают добавить на сайт индивидуальность. Однако они также приводят к снижению производительности.
Пользовательские шрифты могут быть довольно большого размера, а веб-шрифты, такие как шрифты Google, добавляют HTTP-запросы к внешним ресурсам. Это вредит скорости рендеринга страницы.
Ниже приведены некоторые действия, которые вы можете предпринять при использовании шрифтов на своем веб-сайте:
Преобразование шрифтов в наиболее эффективный формат: загрузка современного формата, такого как WOFF2, может уменьшить размер файла примерно на 30% по сравнению с другими форматами.
Подмножество шрифтов для удаления неиспользуемых символов: комплексные файлы шрифтов содержат символы для многих языков, которые могут никогда не использоваться. Разделив шрифты на подмножества, мы можем удалить ненужные символы из шрифта и оставить только то, что нам нужно для написания контента на сайте.
Предварительно загружайте шрифты, которые явно требуются для страницы.
Использование пары нестандартных шрифтов может не причинить вреда, но их чрезмерное использование может существенно повлиять на время загрузки вашего интерфейса. Поэтому убедитесь, что вы не переоцениваете влияние и потребность в пользовательских шрифтах, которые используются на вашем сайте.
4. Постарайтесь сжать файлы
Объем пропускной способности ограничивает объем данных, доставляемых в заданное время. Чем больше размер файла, тем больше времени требуется для загрузки. Современные веб-сайты часто имеют большие пакеты HTML, CSS и JavaScript.
Сжимая файлы подходящим способом, вы легко можете существенно изменить время загрузки вашего сайта. Ниже приведены два хороших варианта сжатия файлов:
Gzip — самый популярный метод сжатия и распаковки данных, который в настоящее время поддерживается всеми современными браузерами. Gzip сжимает пакеты HTML, CSS и JavaScript на стороне сервера перед отправкой их в браузер, а на стороне клиента он распаковывает файлы и доставляет контент.
Brotli — предлагает лучшую степень сжатия по сравнению с другими доступными в настоящее время методами сжатия. Согласно исследованию CertSimple, Brotli сжимает файлы JavaScript на 14% меньше, чем Gzip, а степень сжатия HTML и CSS на 21% и 17% лучше, чем Gzip.
5. Оптимизируйте изображения
Когда дело доходит до веб-сайтов, изображения являются жизненно важной частью. 93,7% веб-сайтов в Интернете используют хотя бы один формат файлов изображений, поскольку они помогают создать хорошее впечатление.
Однако отрицательная сторона использования изображений заключается в том, что они плохо влияют на время загрузки страницы, если изображения не оптимизированы. Однако есть несколько способов оптимизации изображений:
Используйте WebP или AVIF
Использование новых форматов изображений, таких как WebP и AVIF, дает лучшую производительность, чем старые форматы, такие как JPEG и PNG.
WebP на 26% меньше по сравнению с PNG и на 25–35% меньше по сравнению с JPEG. AVIF на 50% меньше по сравнению с JPEG и на 20% меньше по сравнению с WebP.
Однако обратная сторона — поддержка браузера. WebP недавно получил поддержку в браузерах, поэтому более старые версии могут не поддерживать его. А формат AVIF поддерживается только в Chrome и Opera.
Используйте адаптивные изображения
Еще один способ сократить время доставки изображений и повысить производительность веб-сайта — использовать адаптивные изображения. Более 50% трафика поступает со смартфонов и планшетов. Масштабирование изображения до популярных размеров устройства и их обслуживание с помощью srcset еще больше оптимизируют время загрузки сайта.
Помимо выбора подходящего формата и размеров, есть несколько других способов, чтобы сократить время загрузки внешнего интерфейса за счет оптимизации изображений. Ниже приведены некоторые дополнительные рекомендации, которые вы можете использовать:
Сжатие изображений.
Использование прогрессивных JPEG.
Показывайте изображения меньшего размера пользователям с медленным подключением.
Использование HTTP / 2 вместо HTTP / 1.1.
Использование наборов изображений.
6. Применяйте технологию Lazy Loading
Lazy Loading помогает еще больше сократить время загрузки. При отложенной загрузке веб-страница сначала загружает только необходимый контент, а остальной контент загружается, когда он нужен пользователю.
Например, в результатах поиска изображений Google сначала загружается только небольшой набор изображений. Google загружает изображения-заполнители для скрытого содержимого вместо фактических, что сокращает время загрузки. Фактический контент будет отображаться, если пользователь прокручивает страницу вниз.
Помимо отложенной загрузки заполнителей, есть несколько других параметров, таких как «Собственная отложенная загрузка» и «Эффект размытого изображения», вы можете выбирать тот, который вам подходит.
7. Кеширование
Каждый раз при уникальном посещении все, от HTML до CSS и JavaScript, необходимо загружать отдельно. Это приводит к более медленной загрузке данных.
Лучший способ предотвратить эту проблему — использовать параметры кэширования. При правильной настройке браузеры сохранят файлы в своем локальном кеше и не будут загружать одни и те же ресурсы при последующих посещениях страниц на сервере. Помимо кеша браузера, доступно несколько других опций кеширования для сокращения времени загрузки.
Кэш-сервер — запрос пользователя отправляется на ближайший кеш-сервер из набора кэш-серверов.
Кэш памяти — путем сохранения определенных частей данных в памяти (например, переменных JavaScript) без их перезагрузки для изменения маршрута.
Кэш диска — похож на кеш памяти, за исключением того, что он использует обычное хранилище файлов, обычно обрабатываемое браузером.
8. Включите предварительную выборку
Предварительная выборка ресурсов — это еще один метод повышения производительности, который вы можете использовать для оптимизации загрузки данных веб-страницы.
Как разработчики, вы знаете свое приложение лучше, чем браузер. Таким образом, предварительная выборка использует эту информацию, чтобы подсказывать браузеру, какие ресурсы могут потребоваться в будущем.
В основном существует три типа предварительной выборки. Хотя предварительная выборка ссылок является наиболее популярным и широко используемым методом, предварительная выборка DNS и предварительная отрисовка также являются полезными вариантами.
Предварительная загрузка ссылок
Предварительная выборка ссылок позволяет браузеру собирать ресурсы, которые пользователь может запросить в ближайшем будущем. Таким образом, разработчики могут предположить, что пользователи могут посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кешируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Каждый раз, когда пользователь запрашивает ресурс, размещенный на определенном IP-адресе, выполняется поиск DNS, чтобы найти доменное имя, которому принадлежит IP-адрес.
Предварительная выборка DNS позволяет браузеру выполнять поиск DNS для ссылок на веб-странице в фоновом режиме, в то время как пользователь просматривает текущую страницу, чтобы минимизировать задержку, когда пользователь кликает ссылку с включенной предварительной выборкой DNS.
9. Используйте сеть доставки контента
Когда пользователь находится далеко от сервера географически, задержка увеличивается. Более того, загрузка запроса также может повлиять на время обслуживания контента.
Скорость загрузки внешнего контента, включая HTML-страницы, таблицы стилей, файлы JavaScript и изображения, можно оптимизировать с помощью CDN. Сеть доставки контента (CDN) — это группа серверов, распределенных в нескольких географических точках, которые хранят кэшированную версию контента для быстрой доставки конечному пользователю.
CDN перенаправляет запросы пользователей на ближайший сервер. Существует также определенный тип CDN, называемый CDN изображений, который отлично подходит для оптимизации ваших изображений. С их помощью вы можете сэкономить 40–80% размера файла изображения. Учитывая, что изображения обычно занимают более половины объема страницы, интеграция CDN для изображений может значительно повысить скорость загрузки.
Заключение
Золотое правило производительности : 80–90% времени ответа конечному пользователю тратится на загрузку компонентов внешнего интерфейса, таких как изображения, таблицы стилей, сценарии и т. д.
Следовательно, оптимизация загрузки данных внешнего интерфейса имеет решающее значение для снижения показателей отказов и увеличения времени пребывания посетителей на сайте. В этой статье я обсудила некоторые передовые практики, которые я использую для лучшей загрузки данных внешнего интерфейса. Спасибо за внимание!
Автор: Nethmi Wijesinghe
Источник: machmetrics.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
