Медленные сайты раздражают. Они разражают настолько, что люди бросают оформление заказа на полпути. И бизнес получает меньше прибыли.

Google и Amazon посчитали убытки из-за медленно работающих сайтов. Для амазона - замедление загрузки страницы на одну секунду приведет к потере продаж на 1,5 миллиарда за год. Гугл потеряет 8 милионов поисковых запросов в день при замедлении ответа сервиса на четыре десятых секунды.[1] Эти компании оптимизируют свои сайты по полной.

Что делать, если вы не Google и у вас нет огромного штата технических специалистов? Проведите эксперимент. Попробуйте что-то купить на своем сайте. Может быть, вам повезло с разработчиками и они все учли? Ваш сайт летает и вы всем довольны? Прекрасно. Большинство сайтов можно ускорить в 3-4 раза. Если скорость работы вашего сайта вас не устраивает - покажите эту статью тому, кто отвечает за ваш сайт.

Недавно я подбирал себе аудиосистему для компьютера. Мои поиски привели меня на сайт doctorhead.ru. Сайт грузится долго. Переход со страницы на страницу с задержками более секунды. Для коммерческого сайта это недопустимо.

Что тормозит сайт и как это исправить?

Объем загружаемых данных

Восемь мегабайт весит главная страница сайта: 6,5 мегабайт (Мб) - это картинки, 1Мб - яваскрипт, 0,5Мб - стили и еще 0,5Мб - разметка страницы. На телефоне такая страница будет грузиться долго. Постарайтесь сократить объем трафика до 2Мб на страницу, а время загрузки до 2 секунд. Такие параметры рекомендует Google.

4Мб съедают полноэкранные банеры размером 2000x863px, в то время как самое распостранённое разрешение экрана 1366x768px[2]. Все эти картинки загружаются сразу, хотя нужна только одна. Они сменяют друг друга по таймеру. Если уменьшить изображения до 1200px в ширину и сохранить с уровнем качества 8 из 12, то объем полученных файлов будет в четыре раза меньше - 1Мб.

Оптимизировав только малую часть изображений мы на 3 мегабайта сократили объем загружаемых данных.[3]

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

Нужно идеальное качество на маках с retina display?: Не наказывайте остальных пользователей - используйте media query для фоновых изображений. А вместо <img> используйте элемент <picture> с набором картинок под все разрешения.

Виджеты

Виджеты сторонних сайтов замедляют отображение страницы. Виджет группы ВКонтакте добавляет 600 килобайт. И блокирует загрузку страницы на время исполнения своего скрипта. Пустая страница с этим виджетом грузится 600 милисекунд. Сайты-поставщики таких виджетов редко заботятся о скорости вашего сайта. Они предоставляют простой код для установки. Ваш сайт страдает от этого. Ваши клиенты страдают от этого.

Отложим загрузку виджета до полной загрузки нашей страницы. Используем JQuery, потому что он уже присутствет на сайте. Очень простой код:

See the Pen KXQGVv by Alexander Taran (@Alexander-Taran) on CodePen.

Виджет остался на месте, но уже не задерживает нашу страницу на пути к пользователю. Так же поступим и с виджетом Facebook. Он не такой прожорливый - всего 200 килобайт.

На секунду улучшили время загрузки страницы отложив подгрузку двух виджетов на потом.

Все сторонние украшения и счетчики загружайте после страницы.

Задержки при работе с базой данных

Секунду браузер ждет ответа на запрос главной страницы. Это время не должно превышать 0,4 секунды. Google и Yandex учитывают время ответа сервера при ранжировании. Более быстрые сайты - выше в результатах поиска.[4] Используйте кеширование ответов на сервере, чтобы сократить время ответа сервера.

Результаты

Потратив 5 минут на оптимизацию полноэкранных картинок - на 3Мб сократили объем загружаемых данных. Еще 5 минут на отложенную загрузку виджетов социальных сетей. За 10 минут работы мы в два раза увеличили скорость сайта. Это только низко висящие яблоки. И с уже готовыми рекомендациями. На их поиск я тоже потратил время. Стоит приложить больше усилий и можно сократить объем до 1,5Мб и уложиться в 2 секунды на загрузку страницы.

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


  1. Данные об упущенной выгоде были посчитаны в 2012 году. How One Second Could Cost Amazon $1.6 Billion In Sales. ↩︎

  2. Screen Resolution Stats Worldwide ↩︎

  3. Отрезать еще один мегабайт можно отложив создание карусели с баннерами на момент после загрузки страницы. Техническая реализация зависит от используемой системы управления сайтом. ↩︎

  4. Improving Search Rank by Optimizing Your Time to First Byte ↩︎