{"id":7297,"title":"\u0417\u0430\u043a\u0430\u0442\u0438\u043b\u0438 \u0432\u0435\u0447\u0435\u0440\u0438\u043d\u043a\u0443 vc.ru. \u0420\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e","url":"\/redirect?component=advertising&id=7297&url=https:\/\/vc.ru\/promo\/300923-proveli-vecherinku-vc-ru-i-sdelali-ofis-uyutney-s-pomoshchyu-novogo-servisa-ot-ozon&placeBit=1&hash=1786c9dcf11a3b054c8e53004e27074664313ed4055e24064ede059ebc186db8","isPaidAndBannersEnabled":false}

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

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

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

Скорость загрузки сайта Amazon Google Page Speed Insights
Для сравнения, скорость загрузки сайта Л'Этуаль Google Page Speed Insights

Для того чтобы измерить скорость (время загрузки) сайта можно использовать разные сервисы, например: 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 ещё не значит, что он занимает меньше места на сервере. Браузеру все равно нужно загрузить полное изображение. Поэтому, проверяйте требуемую ширину и высоту изображения, и если нужно уменьшайте до загрузки.

Изображение до (слева) и после (справа) сжатия Compressor.io

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

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

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

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

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

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

Принцип работы CDN 

5. Кэшируйте

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

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

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

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

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

Отображение ссылки на Википедию с использованием турбо-страниц. И отображение ссылки на Л'Этуаль без использования трубо-страницы. Яндекс

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

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

Влияние скорости загрузки сайтов на позицию в Google Backlinko

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

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

{ "author_name": "Эдуард Файзуллин", "author_type": "self", "tags": ["\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435\u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438","\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438","\u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f","speedtest","conversant"], "comments": 12, "likes": 8, "favorites": 38, "is_advertisement": false, "subsite_label": "marketing", "id": 65254, "is_wide": true, "is_ugc": true, "date": "Mon, 22 Apr 2019 14:27:51 +0300", "is_special": false }
0
12 комментариев
Популярные
По порядку
Написать комментарий...

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

2

Согласен, Google не есть истина в последней инстанции в вопросах скорости загрузки, поэтому я привел в пример и другие сервисы. Пройдя по которым можно выявить бОльшую часть проблем. Но для выявления базовых ошибок, будет достаточно и Google Page Speed Insights (быстро, бесплатно, удобно).

2

Очень интересно внедрение формата webp, но есть огромный минус, он не поддерживается Safari. У вас нет информации, может быть поддержку добавят в новых iOS 13 и Mac OSX Catalina?

1

Статья как будто из 2005 года. Основная причина тормозов большинства сайтов сегодня - не картинки и не кэш, а миллионы скриптов, миллионы обращений к посторонним сайтам и огромная нагрузка на браузер, особенно критичная для народных мобил за 5 тыр и народных ноутбуков за 15 тыр.

1

2005 вы слишком утрировали :) По прежнему встречается множество сайтов с подобными ошибками. Ради интереса, загляните на Яндекс.Маркет, не в ТОП-100 интернет-магазинов, а в среднюю категорию. Они не используют множество скриптов и не обращаются к сторонним сайтам. Их проблемы описаны в данной статье.

2

Ничего нового, из статьи в статью, то, что школьникам преподают...

1

Если здесь нет ничего нового для вас - поздравляю, можете не читать дальше. Однако, для многих эта информация будет полезна, потому что эти ошибки встречаются от сайта к сайту. Даже в крупных компаниях, выше пример сайта Л'Этуаль (ТОП-100). И поделитесь, пжлст, ссылками, где школьникам преподают эту информацию.

2

Эдуард, на vc неоднократно выходили статьи подобные этой, чек-листы и прочее. Зачем плодить копии ?

0

Это не копия, так, например в других статьях на VC.ru не писали про технологию gzipped. То есть статья отличается и несёт пользу. Это подтверждается количество сохраненных в закладки у статей, которые пишу. Одна из статей набрала 460 сохранений в закладки. Это подтверждает то, что для людей это интересная и актуальная информация.

Кстати, написал новую статью о повышении конверсии за счет улучшения доставки. Такой информации в Рунете нет, почитайте, если интересно: https://vc.ru/marketing/65557

0

"Но множественные переадресации, путают браузер"
REALLY??

1

Я хотел написать понятным языком, без сложных терминов. Изменил на "замедляют работу браузера". Хотя это тоже будет не совсем корректно. Но, думаю, суть вы поняли.

1

Исследование от 2017 года, но гугл свое исследование по этому поводу ежегодно обновляет. И скорость загрузки влияет на многое. Сегодня выпустил статью про исследование скорости загрузки сайтов веб-студий России… Там такое… 70+ мегабайт весит страница сайта студии. Или 30+ секунд загрузка.. Ох. Плюсуйте!

https://vc.ru/marketing/76140-sapozhniki-bez-sapog-analiticheskoe-issledovanie-saytov-veb-studiy-rf

0
Читать все 12 комментариев
МТС дополнила экосистему B2B-продуктов решениями МТТ

ПАО «МТС», ведущая российская компания по предоставлению цифровых, медийных и телекоммуникационных сервисов, дополнила экосистему продуктов для бизнеса новым решением – виртуальной АТС от своей 100% дочерней компании АО «Межрегиональный ТранзитТелеком» (МТТ), федерального провайдера интеллектуальных телеком- и ИТ-решений для бизнеса. Теперь…

Час в неделю — на помощь детям: как 303 учителя со всей России стали онлайн-волонтёрами для школьников

Движение «Педагоги-волонтеры России» учит ребят из детских домов и малоимущих семей. Их репетиторы уже помогли 1 350 детям наверстать знания по школьным предметам. Сейчас платформа ищет новых учителей по всей России. Особенно — математиков и программистов

«Авито Доставка» — покупатель забрал товар, а деньги мне не перевели

Решила продать xBox, после нескольких дней бесплодных попыток в своем городе соблазнилась Авито Доставкой, которую предложил покупатель. До этого отправляла через доставку небольшой товар, все прошло идеально. У покупателя долгая история покупок и отличные отзывы. Что может пойти не так? - подумала я и решительно потащила коробку в пункт приема в…

Предсказать и оптимизировать: плавим сталь с помощью Data Science

Как создавали программу, которая помогает металлургам экономить 3-5 млн долларов в год

Рыночная капитализация Tesla превысила $1 трлн Статьи редакции

На рост акций могли повлиять новости, связанные с компанией.

Кикшеринг станет ещё доступнее, но для крупных игроков места больше нет: интервью с инвесторами кикшеринга «Юрент» Статьи редакции

Андрей Азаров и Михаил Гейшерик рассказали, зачем «Юрент» купил сервис аренды обычных велосипедов, продолжится ли бурный рост кикшеринга и что этому может помешать.

Михаил Гейшерик и Андрей Азаров
Продуктовые метрики: какие они бывают и как ими пользоваться?

Я работаю CPO в компании с десятками тысяч заказов в день. Недавно стал плотно вовлекать коллег в продуктовые процессы. Оказалось, что не все знают, что такое GMV или конверсия, не говоря уже о более узких метриках, например, session duration или page depth. Расскажу поподробнее в этой статье про метрики и комплексы метрик.

Blue Origin Джеффа Безоса запланировала создать собственную космическую станцию «Орбитальный риф» Статьи редакции

Она начнёт работать во второй половине 2020-х годов.

Как дайгоу может помочь наладить систему сбыта в Китай

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

У альфа-банка стоит ограничение на отображение баланса в пуше, его не видно полностью

Скорее всего, Альфа-банк провел свой аналог "Игры в Кальмара", где разыграл суперприз. Их версия отличается от корейской тем, что там не надо никого убивать и проходить испытания. Вы, как обычно, пользуетесь картой и получаете шанс выиграть супер приз! Когда мне пришел этот пуш, я сразу понял, что не зря был вашим клиентом столько лет! Вы…

Apple выпустила macOS Monterey и анонсировала запуск сервиса Fitness+ в России Статьи редакции

Он станет доступен 3 ноября.

null