{"id":7302,"title":"$200 \u0442\u044b\u0441\u044f\u0447 \u043d\u0430 \u0441\u0442\u0440\u0430\u0445\u043e\u0432\u043a\u0443 \u0432 \u043f\u043e\u0435\u0437\u0434\u043a\u0430\u0445 \u0438 17 \u0432\u0430\u043b\u044e\u0442 \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0435","url":"\/redirect?component=advertising&id=7302&url=https:\/\/vc.ru\/promo\/295992-korotko-karta-dlya-puteshestvennikov&placeBit=1&hash=116250a21a81e5a548d838f9f86dac8dfd20ac6f36c6c2f8b9a9a56056948502","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 комментариев
Стоимость акций социальной сети Дональда Трампа выросла на 275% за сутки

Бывший президент США Дональд Трамп анонсировал запуск собственной социальной сети Truth Social и сразу запустил её на биржу, где она показывает высокий рост.

С книжной полки на рынок мобильных приложений. История Laoshi.io

Продолжение истории компании Лаоши. С 2011 года мы занимаемся преподаванием китайского языка. За это время делали сеть школ китайского языка и онлайн-школу, создавали платформу для изучения китайского онлайн, издавали учебник и прописи. Сейчас разрабатываем мобильное приложение для англоязычного рынка.

Приложение для изучение китайских слов и иероглифов Laoshi.io
Вопросы налогообложения при инвестировании. Что важно учитывать?

Инвестиции в ценные бумаги и иные финансовые инструменты в последние несколько лет пользуются популярностью не только у профессиональных игроков рынка, но и у частных инвесторов, для которых данный вид деятельности представляет собой некое хобби.

Бизнес-филантропия и благотворительность. Почему это не затраты, а вложения? Рассказываем на примере CloudPayments

Социальная ответственность составляет важную часть ДНК компании CloudPayments. Делимся инсайтами, почему мы поддерживаем НКО, создаем благотворительные проекты и как транслируем принципы филантропии внутри команды.

5 заповедей для бизнеса, которым я не следую

Есть «истины» очевидные всем — «Пушкин, это лучший русский поэт». Хорошо если человек предлагает относительно безобидную альтернативу, «Больше люблю Лермонтова», а если «Ну не знаю, Немиров лучше» или «Мне вообще Пушкин не нравится». За такое и побить могут.

Онлайн-кинотеатр IVI начал съёмки самого правдивого сериала про современный российский наркобизнес
Cтартап по созданию NFT на спортивную тематику Candy Digital привлёк $100 млн при оценке в $1,5 млрд Статьи редакции

В октябре компания запустит платформу для торговли токенами.

NFT от Candy Digital
Цифровая трансформация банков: что это такое?
Автор: Ксения Борбачева
заместитель генерального лиректора Агентства инноваций Москвы
Участвуйте в IPO Softline Group!

С 18 октября открыта книга заявок на участие в IPO глобальной IT-корпорации Softline Group.

«В магазин должны идти не за пивом, а к тебе»: предприниматель открывает пивные магазины для других Статьи редакции

Давид Аракелян начал с торговли в ларьках в 90-е, работал в игорном бизнесе, строил маршруты для вывоза мусора и торговал пивом. Сейчас он открывает для других несколько пивных магазинов в месяц и берёт за каждый 150 тысяч рублей.

Ассортимент одного из магазинов
Spotify разрешил всем авторам загружать видеоподкасты Статьи редакции

Сервис запустил функцию в июле 2020 года, но она была доступна ограниченному числу авторов.

null