Эти простые советы помогут сократить время загрузки данных через интерфейс
У вас есть 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в CSS для отображения желаемого сегмента изображения. Таким образом вы сокращаете количество требуемых запросов к серверу. - Уменьшите сторонние плагины, которые отправляют большое количество внешних запросов.
- Предотвращение неработающих ссылок на несуществующие файлы.
Кроме того, вы также можете посмотреть рендеринг на стороне сервера, чтобы ускорить начальную загрузку приложения.
Если минимальные данные присутствуют и при загрузке первой страницы, это существенно повлияет на воспринимаемую производительность.
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. Поэтому вам необходимо использовать формат в собственном HTML с элементом <picture> с резервной поддержкой.
Подавайте изображения правильных размеров.
Еще один способ сократить время доставки изображений и повысить производительность веб-сайта - использовать адаптивные изображения. Более 50% трафика приходится на смартфоны и планшеты. Масштабирование изображения до популярных размеров устройства и их обслуживание с использованием srcset еще больше оптимизируют время загрузки внешнего интерфейса.
Помимо выбора подходящего формата и размеров, есть несколько других способов, которыми вы можете следовать, чтобы сократить время загрузки внешнего интерфейса за счет оптимизации изображений. Ниже приведены некоторые дополнительные рекомендации, которые вы можете использовать:
- Сжатие изображений.
- Использование прогрессивных JPEG.
- Показывайте изображения меньшего размера пользователям с медленным подключением.
- Использование HTTP / 2 вместо HTTP / 1.1.
- Использование наборов изображений.
6. Примените отложенную загрузку
Ленивая загрузка помогает еще больше сократить время загрузки внешнего интерфейса. При отложенной загрузке веб-страница сначала загружает только необходимый контент, а оставшийся контент загружает, когда он нужен пользователю.
Например, в результатах поиска изображений Google сначала загружается только небольшой набор изображений. Он загружает изображения-заполнители для скрытого содержимого вместо фактических, что сокращает время загрузки. Фактический контент будет отображаться, если пользователь прокручивает страницу вниз.
Помимо отложенной загрузки заполнителей, есть несколько других параметров, таких как «Собственная отложенная загрузка» и «Эффект размытого изображения», из которых вы можете выбирать.
7. Кеширование
Каждый раз при уникальном посещении все, от HTML до CSS и JavaScript, необходимо загружать отдельно. Это приводит к более медленной загрузке данных.
Лучший способ предотвратить эту проблему - использовать параметры кэширования. При правильной настройке браузеры сохранят файлы в своем локальном кеше и не будут загружать одни и те же ресурсы для последующих посещений страниц с сервера.
Помимо кеша браузера, доступно несколько других опций кеширования для сокращения времени загрузки.
- Кэш-сервер - Пользовательский запрос отправляется на ближайший кеш-сервер из набора кэш-серверов. (например: Сети доставки контента. Подробнее об этом будет сказано в пункте 9)
- Кэш памяти - путем сохранения определенных частей данных в памяти (например, переменных JavaScript) без их перезагрузки для изменения маршрута.
- Кэш диска - аналогичен кешу памяти, за исключением того, что он использует обычное хранилище файлов, которое обычно обрабатывается браузером.
8. Включите предварительную загрузку.
Предварительная выборка ресурсов - это еще один метод повышения производительности, который вы можете использовать для оптимизации загрузки данных внешнего интерфейса.
Как разработчики, вы знаете свое приложение лучше, чем браузер. Таким образом, предварительная выборка использует эту информацию, чтобы подсказывать браузеру, какие ресурсы могут потребоваться в будущем.
Предварительная выборка загружает ресурс в ожидании необходимости сократить время ожидания ресурса. В основном существует три типа предварительной выборки. Хотя предварительная выборка ссылок является наиболее популярным и широко используемым методом, предварительная выборка DNS и предварительная отрисовка также являются полезными вариантами.
Предварительная загрузка ссылок
Предварительная выборка ссылок позволяет браузеру собирать ресурсы, которые пользователь может запросить в ближайшем будущем. Таким образом, разработчики могут предположить, где пользователи могут посетить конкретную веб-страницу.
Однако предварительная выборка ссылок работает только с кешируемыми ресурсами, такими как изображения и JavaScript.
Предварительная выборка DNS
Каждый раз, когда пользователь запрашивает актив, размещенный на определенном IP-адресе, выполняется поиск DNS, чтобы найти доменное имя, которому принадлежит IP-адрес.
Предварительная выборка DNS позволяет браузеру выполнять поиск DNS для ссылок на веб-странице в фоновом режиме, в то время как пользователь просматривает текущую страницу, чтобы минимизировать задержку, когда пользователь щелкает ссылку с включенной предварительной выборкой DNS.
9. Используйте сеть доставки контента.
Когда пользователь находится далеко от сервера географически, задержка увеличивается. Более того, загрузка запроса также может повлиять на время обслуживания контента.
Скорость загрузки внешнего контента, включая HTML-страницы, таблицы стилей, файлы JavaScript и изображения, можно оптимизировать с помощью CDN. Сеть доставки контента (CDN) - это группа серверов, распределенных в нескольких географических точках, которые хранят кэшированную версию контента для быстрой доставки конечному пользователю.
CDN перенаправляет запросы пользователей на ближайший сервер.
Существует также определенный тип CDN, называемый CDN изображений, который отлично подходит для оптимизации ваших изображений. С их помощью вы можете сэкономить 40–80% в размере файла изображения. Учитывая, что изображения обычно занимают более половины веса страницы, интеграция CDN для изображений может значительно повысить скорость загрузки.
Заключение
Золотое правило производительности: 80–90% времени ответа конечного пользователя тратится на загрузку компонентов внешнего интерфейса, таких как изображения, таблицы стилей, скрипты и т. Д.
Следовательно, оптимизация загрузки данных внешнего интерфейса имеет решающее значение для снижения показателей отказов и увеличения времени пребывания посетителей на сайте. В этой статье я обсудил некоторые передовые методы, которые я использую для лучшей загрузки данных через интерфейс. Сообщите мне, что вы используете, в разделе комментариев.
Спасибо за чтение !!
Создавайте лучшие библиотеки компонентов и системы проектирования
Делитесь компонентами между командами и проектами, чтобы ускорить разработку и убедиться, что ваши пользователи видят единообразный дизайн в каждой точке взаимодействия.
Инструменты OSS, такие как Bit, предлагают отличный опыт разработки для создания, совместного использования и внедрения компонентов в разных командах и приложениях. Создайте центр компонентов бесплатно попробуйте →
