Как сократить время загрузки сайта и не терять 53% посетителей

Akamai и SOASTA проанализировали данные нескольких миллиардов посещений крупнейших интернет-магазинов и выявили, что 53% посетителей оставляют страницу, на загрузку которой требуется 3 секунды и более. Каждая дополнительная 0,1 секунды (100 миллисекунд) увеличивает отказы ещё на 7%.

Из этого следует, что сайты должны загружаться менее чем за 3 секунды. В идеале, время первой отрисовки контента 2 секунды и менее, с последующим подгружением остального контента. Вы можете возразить, что это невозможно для интернет-магазина, так как тут много контента и изображений. Но главная страница крупнейшего в мире интернет-магазина Amazon содержит 110 товаров с фотографиями (а также баннеры, изображения, иконки, логотип и текст). При этом первая отрисовка контента происходит за 1,8 секунды.

Для того чтобы измерить скорость (время загрузки) сайта можно использовать разные сервисы, например: GTMetrix, Pingdom или Google Page Speed Insights. Последний сервис от Google является наиболее популярным.

1. Оптимизируйте изображения

Сохраняйте изображения для Веб. В Photoshop вы можете использовать опцию «Сохранить для веб», чтобы существенно сократить размер изображения. Ползунок качества изображения позволяет видеть визуальные компромиссы между размером графического файла и четкостью.

Используйте форматы с более эффективным сжатием. Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.

Используйте сервисы. У вас нет графического редактора? Вам помогутCompressor.io или TinyPNG. Оба инструменты бесплатны и эффективны. Способны сжимать изображения до 80% без заметной потери качества.

Сокращайте фактический размер изображений. Например, необходимый размер изображения на сайте 300x300 пикселей. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать 300x300 пикселей. Не стоит загружать изображение размером 600х600 пикселей и затем подгонять размер картинки с помощью CSS или HTML кода до необходимых 300х300 пикселей. Потому что меньший размер в HTML ещё не значит, что он занимает меньше места на сервере. Браузеру все равно нужно загрузить полное изображение. Поэтому, проверяйте требуемую ширину и высоту изображения, и если нужно уменьшайте до загрузки.

2. Используйте сжатие GZIP

Это метод сжатия, который может значительно ускорить работу сайта, уменьшив размер файла на целых 70% без ухудшения качества изображений или видео. Чтобы узнать поддерживает ли ваш сайт GZIPPED, можно пройти простой тест. Функция сжатия GZIP активируется в настройках сервера. Если это звучит сложно, то просто обратитесь в службу поддержки вашего хостинг-провайдера, они помогут активировать данную функцию.

3. Javascript и таблицы стилей CSS

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

4. Используйте CDN

В России (в связи с протяженностью территории) может происходить задержка прохождения интернет-сигнала. Например, если сайт размещен на сервере в Москве и пользователь заходит на него из Москвы, то время загрузки может быть 2 секунды. А если на этот же сайт заходит пользователь из Владивостока, то время загрузки может доходить до 20 секунд. Использование сети CDN (Content Delivery Network или сеть доставки контента) — позволяет доставлять контент из ближайшего сервера, а не только из оригинального. Тем самым, ускоряется загрузка сайтов на устройство конечного пользователя.

5. Кэшируйте

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

6. Сокращайте количество переадресаций

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

7. Подключите турбо-страницы

Турбо-страницы - эта технология Яндекса, которая позволяет создавать лёгкие версии страниц, которые открываются быстро даже при медленном подключении к интернету. На загрузку таких страниц уходит примерно в 15 раз меньше времени, чем на загрузку оригиналов. Скорость обеспечивается применением вёрстки, оптимизированной для мобильных, а также сетевой инфраструктурой Яндекса: данные, из которых собираются Турбо-страницы, хранятся на серверах компании. В результатах поиска, Новостях, Дзене и других сервисах Яндекса они помечаются специальными значками с ракетой.

Бонус: Скорость загрузки влияет на SEO

Приятный бонус: Backlinko провели большое исследование, в котором проанализировали 1 млн. поисковых результатов в Google и пришли к выводу, что чем быстрее загружается страница - тем выше сайт в результатах поисковой выдачи.

В данной статье рассмотрена лишь 1 точка роста конверсии. Если вы хотите узнать больше, то заходите в блог компании Conversant.me №1 по увеличению конверсии в России.

Автор: Эдуард Файзуллин

#конверсия #conversant #скоростьзагрузки #speedtest #УвеличениеКонверсии