Грег Паркер, технический директор
Разве вы не ненавидите, когда вы переходите на новый сайт, и он загружается вечно? Сегодня мы поговорим о том, как не быть «тем парнем», и я предложу несколько простых шагов, которые помогут вам сэкономить несколько секунд. Если о нем не позаботиться, медленный веб-сайт может негативно сказаться на пользовательском опыте, конверсиях и лояльности к бренду.
Фон
Есть две основные цели при попытке ускорить работу веб-страницы: уменьшить количество запросов и уменьшить общий размер, который браузер должен загрузить. Файлы, которые необходимо загрузить, называются ресурсом (например, изображения, шрифты, код). Каждый файл представляет собой запрос, который необходимо отправить на сервер, а затем загрузить в веб-браузер.
Статистика
40% людей покидают веб-сайт, который загружается более 3 секунд. Это большая статистика с еще большими последствиями для бизнеса: если сайт электронной коммерции зарабатывает 100 000 долларов в день, задержка страницы в 1 секунду может стоить 2,5 миллиона долларов потерянных продаж каждый год.
Ресурс: https://blog.kissmetrics.com/loading-time/
Мобильный фактор
Мобильное использование превзошло использование настольных компьютеров и ноутбуков и не показывает никаких признаков замедления. Как часто ваш мобильный телефон находится на расстоянии вытянутой руки от вас? Если вы смотрите телешоу, и оно переходит в рекламу, как часто вы сразу же достаете телефон и начинаете просмотр? Уровень внимания пользователей на мобильном устройстве значительно ниже, чем на десктопе, поэтому, если вы не можете достаточно быстро донести свой сайт до пользователя, он уйдет куда-то еще.
Простые шаги
Улучшить скорость загрузки вашей страницы можно так же просто, как выполнить следующие шаги. Их реализация не займет много времени, но может сократить время загрузки и общую производительность на несколько секунд, давая затраченное здесь время значительно окупить вложения.
1. Сжимайте и оптимизируйте изображения
Изображения обычно являются самыми большими файлами, которые необходимо загрузить. Оптимизируя и сжимая изображения, можно сэкономить сотни килобайт и более.
Убедитесь, что используется правильный формат изображения. Используйте *.png для прозрачных изображений, логотипов и значков и *.jpg для фотографий. Снижение качества фотографий до 60% — 70% резко уменьшит размер файла, и снижение качества, вероятно, не будет заметно пользователю во время просмотра сайта.
ImageOptim — очень простой в использовании инструмент для Mac OS. Все, что вам нужно, это найти папку с изображениями, перетащить их в приложение, и ImageOptim оптимизирует каждое изображение и сохранит для вас исходную версию.
2. Не скачивайте неиспользуемые стили шрифтов
При использовании службы шрифтов, такой как Typekit или Google Fonts, убедитесь, что неиспользуемые веса не загружаются. Если, например, веб-сайт никогда не использует полужирный шрифт, не заставляйте пользователя загружать полужирный шрифт.
3. Сократить исходный код
Минимизация исходного кода уменьшит общий объем данных, которые необходимо загрузить. Некоторые онлайн-инструменты, которые делают это:
Это основные действия, которые должен уметь делать любой веб-мастер. Их реализация не займет много времени, но может сократить время загрузки на пару секунд и более. Это не кажется большим, но для крупного или малого бизнеса, стремящегося к масштабированию, окупаемость инвестиций может быть огромной.
