Почему высокая скорость загрузки страниц Интернет-магазина дороже бриллианта в 10К?

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

Однако времена меняются: скорость интернета выросла до десятков мегабит в секунду, сайты, хоть и стали тяжелее, все равно научились грузится быстро, а пользователи перестали быть терпеливыми. Поисковые системы вроде Google и Яндекса улучшили и переделали свои алгоритмы и тоже потеряли терпение — так что медленные сайты больше никто не любит, несмотря на ностальгию.

Почему медленные сайты — это плохо?

Во первых, их не любят посетители — просто потому что они медленные. Тут все просто — вы ищете интернет-магазин, находите два подходящих варианта и открываете сразу две страницы. Одна загрузилась за 3 секунды, вторая — за 10. На какой странице вы останетесь?

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

Естественно, поисковые системы улавливают желания пользователей и плохо относятся к сайтам, которые долго грузятся, из-за их низкой конверсии (это когда большинство клиентов закрывают страницу ещё до ее прогружения). А ещё из-за медленной загрузки на мобильных девайсах.

Дело в том, что в 2018 все используют смартфоны. Больше половины клиентов на вашем сайте делают покупки с помощью девайсов на Android или iOS (а может быть даже на Windows Mobile!).

У мобильного интернета есть свои особенности, из-за которых скорость загрузки сайта должна быть идеально оптимизирована — так, например, логично, что мобильный интернет медленнее обычного. Скорость 3G сетей в среднем на 40% ниже скорости вашего домашнего высокоскоростного подключения, то есть логично, что сайт, который открывают с помощью 3G, должен быть оптимизирован как только возможно.

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

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

Не уверены, есть ли у вас проблемы? Проверьте свой сайт с Google Pagespeed Insights — это инструмент, который показывает, все ли хорошо со скоростью загрузки (и что нужно исправить). Если получите меньше 80 баллов — нужно срочно что-то делать. Если 80-90 — в принципе, все хорошо, но можно улучшить ситуацию. Результат в 95-99 — это идеальный результат, к которому большинство никогда не приблизится. Если сайт набирает чуть меньше 100 баллов,можно говорить о том, что такой сайт грузится идеально.

Как выглядит идеальный сайт?

Как мы уже сказали, загрузка должна быть исключительно быстрой.В идеале сайт должен выдать 95-100 баллов в Pagespeed Insights. Вот так это выглядит на примере демо-магазина от компании NeoSeo:

Помните, что мы говорили о важности оптимизации под мобильные устройства? Тут тоже должно быть 95-99 баллов. Идеал выглядит так:

Что делать, чтобы улучшить скорость загрузки?

Всё зависит от двух сторон: стороны клиента и стороны сервера. Обе этих стороны одинаково важны для быстрой загрузки — это значит, что для того, чтобы получить хороший результат, вам нужно заняться как клиентской, так и серверной оптимизацией.

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

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

В общем, работы здесь довольно много. Но ничего невозможного нет — если не верите, взгляните ещё раз на результаты нашего интернет-магазина.

Как мы ускоряем сайты?

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

Когда для работы сайта уже не хватает ресурсов хостинга, мы переносим такие сайты на другие, более быстрые хостинги. VPS/VDS хостинги на быстрых SSD и на более мощных серверах дают отличный прирост в скорости.

Мы следуем рекомендациям от Google Pagespeed Insights для максимальной оптимизации скорости загрузки страниц Интернет-магазина.

Давайте по очереди:

• Уменьшаем размер CSS файла. Чем лучше оптимизирован CSS код (пробелы, комментарии) — тем быстрее загрузка.
• Оптимизируем HTML код. Удаляем все ненужные символы (те же пробелы, комментарии, разрывы строк), уменьшаем размер HTML файлов и ускоряем загрузку.

• Оптимизируем JS. Уменьшение файла JavaScript делается так же, как HTML/CSS, но тут не только убираются ненужные символы, но и применяется обфускация — имена переменных меняются на более короткие, что ускоряет загрузку но никак не влияет на работу.

• Убираем редиректы. Это очень важно для мобильной оптимизации — когда клиент, который использует смартфон, нажимает на ссылку вроде “site.com”, он может сразу перейти на мобильную версию сайта без редиректов, его может перекинуть сразу на мобильную версию (“m.site.com”), а может вообще перекинуть сначала на “www.site.com”, а потом уже на “m.site.com”. Логично, что первый вариант — самый лучший и быстрый, а второй и третий — медленнее и хуже. Мы делаем только так, как в первом примере — можете зайти на demo.neoseo.com.ua с телефона и проверить.

  Всё очень быстро и без редиректов (Google тоже подтверждает).

• Удаляем из верхней части страницы JS и CSS код, который блокирует отображение это части страницы. Это довольно сложный момент, но очень важный: когда содержимое верхней части страницы отображается позже, чем нужно, скорость загрузки сильно падает.

• Используем кеш браузера. Это значит, что некоторые элементы сайта, вроде изображений и CSS/JS файлов, кэшируются (сохраняются) в браузере пользователя. Когда пользователь заходит на сайт во второй и все последующие разы, этот пункт очень ускоряет загрузку.

• Оптимизируем изображения. Картинки обычно весят очень много, поэтому наша задача — сделать их меньше без потери качества. Ненужные картинки удаляем, нужные — перекодируем и уменьшаем их размер.

• Включаем сжатие. Уменьшаем вес данных, которые передаются в браузер пользователя, с помощью gzip сжатия — этот пункт может ускорить сайт в несколько раз, если раньше ваш сайт не использовал gzip.

• Оптимизируем загрузку видимого контента. Делаем так, чтобы в первую очередь грузился важный контент (контент на первом экране, который пользователь видит в первую очередь). Уменьшаем количество данных, которые браузер отображает вверху страницы.

Что нужно сделать прямо сейчас?

В первую очередь необходимо проверить ваш сайт в Google Pagespeed Insights. Если результат меньше 95 — обратиться к людям, которые знают, как это работает и что нужно делать для оптимизации скорости загрузки, например, к нашим специалистам.

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