4 способа улучшить производительность сайта

При просмотре веб-страниц пользователи ожидают от сайта максимальную скорость и маневренность. Они хотят, чтобы их пользовательский опыт был удобным и мобильным, чтобы без труда получать нужную информацию.

Почему время загрузки страниц — это важно? 

Сегодня ни один пользователь не воспользуется ресурсом с низкой скоростью загрузки или плохой производительностью.

Согласно исследованию американского провайдера Akamai — около половины пользователей сети ожидают, что сайт загрузится за две секунды или меньше. Если страница не загружается в течение трех секунд — пользователи, как правило, покидают сайт.

64% ​​покупателей, которые недовольны скоростью загрузки страниц в интернет-магазине, переходят к конкурентам.

Так вы лишитесь не только своих текущих посетителей и снизите коэффициент конверсии, но и потеряете трафик от потенциальных клиентов.

Ниже мы рассмотрим несколько способов по оптимизации вашего веб-сайта для достижения максимальной производительности:

Минимизируйте HTTP-запросы

Запросы HTTP (протокол передачи гипертекста) подсчитываются каждый раз, когда браузер получает файл, страницу или изображение с веб-сервера.

Согласно Yahoo, эти запросы обычно занимают около 80% времени загрузки веб-страницы. Браузер также ограничивает запросы между 4-8 одновременными подключениями на домен — это означает, что одновременная загрузка 30+ ресурсов невозможна. Поэтому, чем больше запросов вам нужно загрузить, тем больше потребуется времени для загрузки вашей веб-страницы.

Рассмотрим несколько способов, которые вы можете использовать для уменьшения количества HTTP-запросов, чтобы облегчить работу вашего браузера:

Объедините файлы CSS и JS

Вместо того, чтобы извлекать несколько файлов CSS или Javascript для загрузки — попробуйте объединить их в один файл большего размера. Это может быть непросто, если ваши таблицы стилей и скрипты различны от страницы к странице. Но их объединение в конечном итоге отразится на скорости вашей загрузке.

Используйте только необходимые запросы для загрузки

Если вам нужно загрузить отдельные изображения на рабочий стол или запустить определенный скрипт на мобильном устройстве —  используйте условного оператора. Таким образом, браузеру не потребуется загружать различные сценарии или изображения.

Уменьшите количество изображений

Если вы обнаружите, что на некоторых страницах слишком много изображений — удалите некоторые из них, особенно если размер файлов велик. Это поможет не только уменьшить количество HTTP-запросов изображений, но и улучшить ваш UX.

Используйте CSS-спрайтов

Объедините часто используемые изображения в один лист спрайтов, а также предоставьте к ним доступ с помощью CSS background-image и CSS background-position — это предотвратит попытки вашего браузера получить изображений, которые вы не запрашивали. Таким образом, браузер извлечет только то изображение, которое вы используете несколько раз на странице

Используйте CDN и удалите неиспользуемые скрипты и файлы

CDN — это совокупность веб-серверов, которые распределены в нескольких местах для того, чтобы пользователи быстрее получали контент. Сети CDN обычно используются для статического контента или файлов, которые нужно изменить после загрузки.

Серверы можно выбрать на основе оценки близости сети к пользователям. Вы также можете выбрать сервер с самым быстрым временем отклика или наименьшим количеством сетевых переходов.

Более крупные компании, как правило, владеют собственными CDN, в то время как средний бизнес использует поставщиков CDN, например — EdgeCast.

Небольшие компании могут использовать такие сервисы, как CNDjs. В них есть встроенная библиотека файлов и фреймворков JS и CSS — это поможет вам предотвратить размещение определенных файлов на ваших собственных серверах, что увеличит время их загрузки.  

Если вы обнаружите, что вашему сайту необходим CDN — проверьте, есть ли на нам неиспользуемые скрипты или файлы CSS.

Самый простой способ проверить ваш веб-сайт — это связаться с разработчиком, но вы также можете использовать специальный инструмент UnCSS. С его помощью вы можете удалить неиспользуемые стили и уменьшить размер вашего CSS-файла.

Следите за кэшированием браузера

Кэширование в браузере позволяет загружать ресурсы вашего веб-сайта во временное хранилище. Эти файлы будут храниться локально в вашей системе, что позволит увеличить скорость последующих загрузок страниц.

Согласно исследованию Yahoo, 40-60% ежедневных посетителей сайта заходят с полным кэшем. Поэтому вам необходимо сделать так, чтобы первая страница, которую видят пользователи, загружалась быстро.  

Статические ресурсы хранятся в кэше не менее недели, в то время как сторонние элементы, такие как виджеты или реклама, хранятся только день. CSS, JS, изображения и медиафайлы должны храниться неделю.

Оптимизируйте файлы

В настоящее время изображения занимают 60% от среднего количества байтов, которые загружаются на страницу — 1504 Кб. По сравнению с другими ресурсами страниц, такими как скрипты — 399 Кб, CSS — 45 Кб и видео — 294 Кб, изображения занимают много отправленных HTTP-запросов. Поэтому вам необходимо периодически удалять ненужные изображения: библиотеки значков, неиспользуемые шрифты, цветной фон или градиенты.

После удаления этих элементов проверьте размеры активных изображений.  Если вы обнаружите, что используете тяжелые файлы — оптимизируйте их с помощью специальных сервисов, таких как Compressor.io или Image Optimizer.

Храните все изображения размером менее 150 Кб, шириной не более 1920 пикселей, со средним  уровнем качества 72dpi. 

Рассмотрим, какие расширения файлов вам следует использовать:

• SVG подходит для векторных изображений, когда необходимо сохранить большое количество деталей;
• Для некоторые значков вы можете использовать библиотеки шрифтов, такие как FontAwesome;
• PNG следует использовать для изображений с прозрачным фоном;
• JPG лучше всего подходит для фотографий.

Хотя изображения по-прежнему будут занимать большую часть ваших HTTP-запросов, их оптимизация в конечном итоге уменьшит их размеры и повысит общую производительность вашего сайта.

^{По мотивам статьи: impactbnd.com}