23 заблуждения про скорость загрузки твоего сайта — проверь себя
В этой статье есть инструкция для ускорения сайта. Хитрость, как дешевле ускорить сайт у фрилансера. И 23 развенчанных мифа про скорость сайта. Ты поймешь как ускорить свой сайт без посредников, смс и регистраций.
Погнали.
Миф 1: сайт можно заказать у сына маминой подруги
Задача — сделать сайт. План:
+ составить портрет целевой аудитории;
+ накидать смыслов и заголовков;
+ сделать прототипы;
+ сделать дизайн;
+ очень качественно заверстать;
+ запрограммировать.
Готово. Сайт загружается за 1-3 секунды.
Потрачено до 250 000 рублей.
Но... Мы пойдем другим путём!
И так. Дизайн сделает «сын маминой подруги». 30 тысяч рублей.
Ждешь 3 месяца, понимаешь, что не пошло. Бросаешь идею.
Находишь ещё дизайнера. Заказываешь уже чуть дороже. 50 тысяч. Получаешь дизайн. Отдаёшь верстку на фриланс, чтоб как можно дешевле (какая разница, выглядеть же будет одинаково, на самом деле это большая ошибка).
Заплатишь 100.000 за программирование. Получишь сайт. Найдёшь маркетолога. Он скажет, что надо всё переделать.
Ок. Платишь дизайнеру, верстальщику и программисту + 30% за правки. Получаешь результат. Настраиваешь рекламу на сайт с самым дешевым спецом по контексту (нас ведь жизнь ничему не научила, пока). Сливаем бюджет в 250 000 рублей... Разочаровываемся...
... и уходим вести аккаунт в Instagram.
Миф 2: достаточно одной проверки, в одном сервисе
Многие думают, что проверить скорость сайта достаточно однажды и только в Google PageSpeed. Но это не так.
Если вы измеряете скорость загрузки сайта, то берите усредненный результат 3-10 замеров из нескольких сервисов.
Дело в том, что во время проверки может быть нагрузка на сервере, может дать сбой железо или программа, поэтому значения замеров будут разнится. После 10 проверок вы точно будете понимать среднее значение. Замерьте 3 раза утром, 3 днем и 3 вечером.
20+ сервисов проверки скорости в этой статье:
Миф 3: PageSpeed 100/100 — миссия невыполнима
Сотку сделать невозможно. Так ли это?
Стремиться к 100 можно, но без фанатизма. Если вы пришли в зеленую зону, то всё ок. Выдыхайте. Мы часто фанатеем и делаем 100 на мобиле и десктопе, но это не обязательно повторять.
Миф 4: пришел — ускорил — позабыл
Все хотят один раз ускорить и чтоб навсегда. Это невозможно. Нужно мониторить скорость загрузки каждый день. Мы, делаем это с помощью внутренних инструментов для каждого ускоренного нами сайта.
Как долго ускорение будет работать за 3000₽. За эти деньги вам скачают все картинки с сайта, оптимизируют через TinyPNG или Compressor.io. И закачают обратно уже сжатыми.
Через месяц ускорение исчезнет, потому что контент вы обновите и оптимизировать картинки перед выкладкой не будете.
Еще можно пожать в JPEG 2000 для Safari, JPEG XR для IE9-11 и EDGE, но надо понимать, какому проценту ваших пользователей это принесет прибавку к скорости и ориентироваться на бюджет проекта.
Помните! Одна неправильно загруженная картинка может стоить 10+ секунд скорости загрузки вашего сайта.
Миф 5: ждать сайта загрузки 20+ секунд
«Если нужен мой товар/услуга — подождут, ничего не случится!»
Так ли это?
Как проверить влияет ли скорость загрузки на посетителей вашего сайта? Сколько из них уходит не дождавшись загрузки? Алгоритм такой:
- зайти на отчет Яндекс Метрики «Время на сайте»;
- взять период квартал и поставить столбики для отображения;
- нам интересны первые три столбика от 0 до 29 секунд.
Столбики означают, что такое количество людей были такое время на сайте, а после закрыли ваш сайт.
А как должно быть?
Если реклама настроена хорошо и сайт быстрый, то первый столбик будет самый низкий. Второй тоже.
С 10-й по 29-ю секунду показатель отказов может быть и самым высоким, если ваш сайт загружен полностью за три секунды, а информация изложена кратко и ясно. Всё индивидуально.
Миф 6: ускорить сайт — дешево, быстро, качественно
Очень горячая тема. Многие владельцы сайтов думают, что ускорение должно стоить до 5000 рублей. Когда они видят цену 30.000 и более, то с большим возмущением уходят искать дешевле.
Как это делают фрилансеры дешевле:
- прописывают кеширование навсегда через htaccess;
- включают сжатие gzip;
- сжимают картинки обычным онлайн-сервисом, или приложением.
Если вставить такой код в файл htaccess, то сайт станет быстрее:
Этот htaccess будет работать только там, где раздача статики производится через Apache.
Так что, если вы хотите сэкономить, то берите этот кусок кода, берите фрилансера, ставьте ему задачу поставить этот код так, чтобы сайт не сломался и вы сможете заплатить ему еще меньше.
Как делать ускорение правильно:
- сделать профилирование кода;
- найти узкие места и исправить их;
проверить настройки сервера и окружение, при необходимости их оптимизировать;
- найти и исправить проблемы во фронтенде, скорее всего, сверстать всё заново;
- при необходимости подключить CDN и правильно его настроить;
- после каждого этапа должно быть множество замеров через разные сервисы и сам браузер;
- мониторить изменения скорости и при необходимости включаться в процесс работы над сайтом.
У нас, в loading.express, час работы стоит 2.000 рублей. На полноценное ускорение проекта уходит от 7 до 40 часов. Всё зависит от количества работ. Это мы оцениваем заранее.
Миф 7: свои программисты ближе к делу
У вас есть команда разработчиков. Они создали ваш сайт и развивают его по вашим ТЗ-хотелкам.
В один ужасный день, вы узнаёте, что страница вашего сайта загружается 24+ секунд. Пишете вашим ребятам, что это немыслимо и что надо срочно с этим работать.
Прошло пол года... Скорость сайта на прежнем уровне. Затраты на хостинг выросли. Конверсия упала.
Вы смирились с 20+ секундами загрузки сайта, потому что продажи есть и значит «всё всех устраивает».
Почему вы не получите хороший результат от своих ребят.
Ускорение сайта — это узкая специализация, которая требует опыта работы на высоконагруженных системах. Знание современных языков программирования.
Надо пройти множество экспериментов с кодом. Иметь желание делать очень современные и быстрые сайты. Это про вашего программиста?
В 90% случаев ответ — нет. И это не значит, что ваши разработчики какие-то плохие. Нет. Что умеем, то имеем.
Разрабатывать сайты и ускорять их — разные направления. Те, кто умеет ускорять, умеют делать быстрые сайты с нуля.
Миф 8: мой сайт уникален и его не ускорить
Заказчик:
— «Нам важно, чтобы на фоне проигрывалось это 40 мегабайтное видео. Качество максимальное, не жать, не затенять.»
Исполнитель:
— «Но скорость загрузки вашего сайта будет больше 50 секунд.»
Заказчик:
— «Ну, что поделаешь. Людям важно смотреть это видео, оно сделает нам продажи.»
Занавес...
Любое видео можно сжать до приемлемых размеров и загружаться оно будет молниеносно.
4 важных параметра для эффективного сжатия видео на фон:
- формат WEBm
- длительность видео не дольше 20 секунд
- на видео делаем сетку, затемняющую картинку, чтобы не было видно небольшой пикселяберности
- качественно жмем сервисами или программами для работы с видео. Важно правильно подобрать настройки параметров кодека, чтобы потери качества были минимальными и вес файла оставался в пределах разумного
Если вы сделаете это, то ваше видео будет украшать сайт и дарить WOW-эффект, а не замедлять сайт и повышать отказы.
Миф 9: я плачу за хостинг $1000 и мой сайт обязан быть быстрым
Есть отдельные типы бизнесов, которые оплачивают счета за хостинг больше $200/месяц и замечают, что их сайт все равно тормозит.
Берут тариф еще дороже и чувствуют, что немного ускорилось.
Обычному сайту достаточно иметь хостинг не дороже $100/месяц. Если все правильно настроено, то будет летать.
На нашей практике, сервер за $49 выдерживал больше 5 млн уникальных посетителей в сутки. И это был не статичный лендинг, а современный портал с огромным количеством функционала.
Чтобы проверить хостинг и бекенд вашего сайта, вы должны знать скорость ответа сервера. Хотя бы от и до. Можно зайти на этот сервис и поставить на мониторинг бесплатно.
Важно (для продвинутых). Проверки происходят из одной точки в Германии, однако время на соединение в итоговой оценке не учитывается, только время ожидания ответа. Если вы видите цифру в желтой или тем более в красной зоне, то нужно заниматься бекендом и сервером.
Миф 10: вёрстка сайту не помеха
Владельцы сайтов часто думают, что можно сделать сайт раз и навсегда. Это не так.
Всё из-за вёрстки. Есть правила и стандарты, которые постоянно обновляются и оптимизируются.
Если вы раз в год не переделывете вёрстку (называется рефакторинг), то каждый год ваш сайт становится хуже, относительно конкурентов и стандартов CSS/HTML.
Просто планируйте каждый год в бюджете переписать с нуля всю вёрстку и немного бекэнда. Ну или можете приходить и отдельно заказывать ускорение сайта, но знайте, что там и перевёрстка будет и профилирование кода, чтобы найти узкие места и аномалии. Это как стоматолог или ТО для авто.
Профилактика — лечение — повторить.
Вы можете этого не делать, но эффект накопительный. Через 2 года вы заплатите больше.
11. Суслик, в студии!
— Нам нужен человек на контекстную рекламу!
— Зачем? Низкая конверсия?
— Мы не замеряем, но уверены, что можно сделать лучше.
Владельцы бизнеса готовы искать кого угодно в сотрудники, вместо того, чтобы проверить самое важное — скорость загрузки сайта.
Вам может казаться, что крупные бренды за скоростью уж точно следят. Отчасти да. Яндекс, Гугл, Ламода, Вайлдберис. А дальше — как повезёт.
Наши исследования показывают, что очень многие компании изо дня в день теряют сотни тысяч рублей на лидогенерации, имея загрузку сайта больше 20 секунд. Их посетители просто уходят, не дождавшись загрузки страниц!
Примеры таких брендов есть в наших рейтингах, по которым мы писали исследование про банки:
Миф 12: «AMP» (Google) в доме хозяин + «Турбо-страницы» (Яндекс)
AMP и Турбо-страницы — это отличные технологии. Поисковики устали ждать, пока сайты станут быстрыми и сделали всё за вас. Теперь вам не надо думать об ускорении, ведь быстрее, чем Яндекс и Гугл не загрузит никто.
Верно. Но есть один большой нюанс.
Турбо-страницы — только для трафика с Яндекс поисковика.
AMP — только для посетителей из Гугл поисковика и некоторых социальных сетей (например VK). Чтобы пользоваться этими технологиями, вам придется поддерживать 3 версии сайта, вместо одной.
Гораздо дешевле ускорить сайт и поддерживать его скорость на хорошем уровне для всех.
Миф 13: у тебя очень длинный... лендинг — размер имеет значение
Возьмем лендинг с 25 и с 1 экраном. Внимание, вопрос — какой загрузится быстрее? Ответ: одинаково быстро, если всё сделано правильно. Потому что отложенная загрузка и правильная вёрстка делают своё дело.
Какой бы длины не был твой лендинг — его всегда можно загрузить моментально.
Миф 14: качественное фото всему голова
Все хотят супер качественные фото на сайте. И загружают их в полном размере и весе. И думают, что это норма. Нет.
Некоторые сайты содержат фото размером 2000 на 5000, а на сайте это маленькая, круглая аватарка. Каждый посетитель загружает слона, а видит муху.
20 секунд загрузки за сутки отнимает 35 часов жизни у 1500 посетителей (при учете, что человек просматривает всего 5 страниц).
За год это 18 месяцев жизни...
А еще — мегабайты в мобильном пакете.
Миф 15: сначала рисуем версию для ПК
Надо наоборот.
Сначала все рисуют версию для ПК и только в конце вспоминают про мобильную версию. И то не всегда.
В наших исследованиях на VC, мы находили сайты банков и сайты крупнейших порталов туризма (Пегас, например) без адаптивной версии.
Мобильный трафик обогнал десктопный. Безвозвратно. Поэтому сначала создаём мобильную версию сайта, а затем ПК.
Самая высокая скорость должна быть на мобильной версии, потому что ориентир — скорость интернета 3G.
Если сайт будет весить больше 1 мегабайта и иметь больше 50-100 HTTP-запросов, то мобильные посетители будут всё чаще уходить к конкурентам. К тем, кто ускорил свой сайт.
Миф 16: Пейджспид 100/100 можно подделать и поисковики тебя полюбят
Некоторые фрилансеры обманывают. Если клиент хочет пейджспид 100, а платить готов только 3000 рублей, то делают вот что. Отдают для робота гугла скриншот вашего сайта, вместо самого сайта.
Если вам сделали пейджспид 100/100 по цене ниже, чем 10 тысяч рублей, то в 99% случаев это обман.
Технически это делается так:
- определяем бота пейджспид;
- отдаем для него другую версию сайта или заглушку;
- GPSI показывает 100/100.
Как опознать, что вас обманули.
Поменяйте содержимое на первом экране для мобильной версии. Если в Google PageSpeed Insights скриншот останется старым, то нужно более пристально присмотреться к такому «ускорению».
Миф 17: скорость загрузки главный фактор ранжирования SEO
Не доказано! Все исследования говорят об очень слабой корреляции. Зависимости в позитивную сторону практически нет. НО.
Она есть в негативной. В сообществах SEO-специалистов есть немало историй про то, как у страницы не было трафика из Google. Улучшили скорость загрузки и трафик появился!
То есть, медленным страницам не дают посетителей, чтобы люди находили быстрые сайты и могли получить контент. И это очень хорошая концепция.
Миф 18: у меня всё быстро загружается, это у тебя что-то с интернетом
Частое возражение. Дело в инструменте проверки. Если вы проверяете на вашем рабочем ноутбуке, то оценка не будет адекватной из-за систем кеширования. Натуральную оценку можно получить из нескольких внешних систем.
Мы используем четыре: GTmetrix, PageSpeed, LOADING.express, WebPageTest и вам советуем.
Миф 19: пока будете ускорять — сайт будет лежать
Если на сайте есть трафик, то делаем копию и ускоряем.
Осторожно накатываем новую копию на основной домен. Будет совсем небольшой простой, от минуты до 15, в сложных случаях. Но во время работ над ускорением, сайт будет работать.
Миф 20: моя CMS система не ускоряется
Нам говорят:
— У меня Битрикс/ShopScript/WordPress/Joomla, а это медленная система. Ускорить тут ничего нельзя.
Отвечаем:
— Ускорить можно любую CMS, если она на вашем хостинге.
А если доступа к серверу у вас нет, то для вас следующий миф-совет.
Миф 21: скорее ускорьте мою Tilda/Flexbe/Wix
Часто хотят ускорить сайты на конструкторах. Ускорить можно.
Пожать картинки и включить все скрипты в асинхронную загрузку. Всё.
Остальное на стороне владельцев конструкторов. Требуйте от них ускорения.
Миф 22: мы подключаем CDN: для кого, для чего
CDN не ускорит сайт намного — так зачем платить по $20/месяц?
Это верно. Сильно не ускорит. Но каждый элемент ускорения так работает. Включаем сжатие, кеширование, отложенную загрузку и так далее. И каждый кирпичик ускоряет загрузку на свои 10-20%.
CDN — это система доставки контента из ближайшей локации к посетителю. То есть если я из Новосибирска, то файл мне отдает сервер из этого города.
Важно настроить CDN правильно, иначе можно не получить улучшений или замедлить сайт, так как запрос сначала пойдет до ближайшего сервера, а затем пересылается к оригинальному хостингу, отсюда можно получить двойную задержку.
Миф 23: стандартную тему не надо ускорять или моя CMS обо мне позаботилась
Нам часто пишут, что купили стандартную тему у производителя системы управления сайтом. Создатели CMS и темы должны были всё правильно сделать, оптимально, быстро. Но нет. Так это не работает.
Темы создают на потоке для дополнительных продаж. Если каждую ускорять, то стоимость увеличится до 10 раз.
У нас есть пример быстрой темы из коробки, которую достаточно поставить на Вордпресс и будет сразу быстро. Можете оценить тут.
И так.
Скорость сайта — ответственность владельца бизнеса, не производителя CMS-системы.
Подведём итоги:
Скорость загрузки влияет на конверсию сайта. Конверсия влияет на прибыль. Прибыль влияет на скорость развития бизнеса.
Скорость сайта влияет на скорость развития бизнеса.
Вы можете сколько угодно замерять со своего iMac кешированную версию вашего сайта и успокаивать себя, что ваш сайт загружается быстро у всех. А можете стать умнее в этом и обогнать конкурентов с быстрым сайтом.
Выжимка из статьи:
- инвестируйте в создание сайта достаточное количество денег, для его быстродействия;
- Проверяйте скорость сайта от 5 до 10 раз;
- Показатели пейджспид должны быть в зеленой зоне;
- Ускорение за 3000 рублей — временная видимость результата;
- Люди не ждут дольше 10 секунд и уходят. Многие уходят до 9 секунд. Данные есть в вашем отчете метрики уже сейчас;
- Ускорение стоит дорого. Вписывайте в договор о создании сайта пункт про его высокую скорость;
- Ваш штатный программист не должен уметь ускорять сайт, так же как он не должен уметь рисовать в фотошопе;
- Любой сайт с любым контентом, даже с фоновым видео можно ускорить;
- Хостинг имеет значение. Ценой вопрос скорости не решить. Надо настраивать параметры, которые влияют на скорость загрузки сайта отдельно;
- Качество вёрстки сильно влияет на скорость загрузки сайта;
- Конверсия сайта может ломаться на этапе долгой загрузки сайта. Ищите первопричину низкой конверсии в самой первой инстанции;
- «AMP» и «Турбо-страницы» не решают проблему медленных сайтов;
- Длина страницы не влияет на скорость её загрузки;
- Фото может быть качественным и легковесным, а не как у всех;
- Мобильная версия сайта требует особого внимания по скорости загрузки;
- 100/100 PageSpeed можно подделать. Будьте бдительны;
- SEO и скорость не зависят друг от друга, пока скорость ответа сервера меньше 0,8 секунды и полная загрузка меньше 10 секунд;
- Проверяйте скорость загрузки вашего сайта из случайных мест. Магазины техники. Телефон знакомого. Часы. Это даст более точные данные;
- Ускорять сайт можно без перебоев в его работе;
- Ускорить можно любую CMS;
- Конструкторы сайтов ускоряют владельцы конструкторов.
- CDN помогает, но не заменяет ускорение. Подключайте его когда всё настроено на высокую скорость;
- Создатели CMS и тем-дизайнов для них — не думают о скорости загрузки сайтов.
Еще по теме конверсий и ускорения сайтов на VC:
Похожая статья от коллег, спасибо им за то, что пишут на тему ускорения сайтов — 20 лучших заблуждений про ускорение сайта;
дочитал до середины только...
делаю сайты для себя и зарабатываю на них... разогнать гуглспидпейдж 100/100 проблем особых нет. вообще ускорить сайт проблем нет, и пережимать картинки на лету давно ни у кого проблем нет, под все кмс есть плагины. кто делает на ноде или питоне тоже нет с этим проблем. проблема что в топе стоят сайты с такой медленной загрузкой и говнокодом html где текста 300-400 символов. и говно всегда в топе, вообще редко встречаю быстрые оптимизированные сайты в топе. я не жалуюсь, сам в топ 3 был прописан лет 5, стоял колом там. переехал на джанго и допустил несколько ошибок. теперь в жопенях.
так я к чему это... по факту ускорение не даёт ни какой форы. если вы в жопенях органики то заказов не будет
А платный трафик в совсем не делали? Если бы делали, то увидели бы существенную разницу в уровне конверсии.
Кстати, на вашем скриншоте сайт с GPSI 31 из рекламы, там UTM-метка. Вы уверены, что в топе все медленные?)
Этот материал настолько технически безграмотен, что относится в всерьез к нему никакой возможности нет. Один сплошной поток высококачественного юмора.
Автор! Дуржище! кем бы ты там нибыл.
Заклинанием
"секунды секунды загрузка!, секунды секунды Lighthouse"
"секунды секунды картинка, секунды секунды три тыщии"
ты никогда не призовешь шамана большой думающей машины, чтобы он смог порешать твои экзистенциальные проблемы с секундами.
И все это по причине того, что ни один человек, который дейтсвительно занимается оптимизациями, не будет это делать из расчета замера времени загрузки сайта. Это считали за моветон в 14 году, а сейчас можно и в казенный дом с желтыми стенами попасть.
Да потому, мой юный друг, что современный сайт, это не продукт у которого есть точка начала загрузки, и точка окончания. Но продукт у которого событие windowload может не наступить никогда, потому что процесс загрузки будет продолжаться ровно столько сколько продолжается сессия пользователя. И это не предел, даже когда посетитель закроет сайт, и даже кликнет чудотворящему кресту в углу браузера, даже тогда нет никаких гарантий, что сайт который он только что открыл, не продолжает работать.
И как только о юный подаван, ты познаешь этот дзен, станет тебе стыдно за слова твои про изображений оптимизацию.
У меня есть бабина с видео, из секретных источников, про одного бородатого тошнотного дядю, который показывал страницу где изображения были по 20МГб и она была в зеленой зоне - прикинь? Ты бы еще с секундомером стоял, а он уже успел бы поужинать.
Так занешь что самое противное? Этот хрыч реально там получил зеленую зону. Не багами, не хаками, не скриншотами, а реальную зеленую зону.
Еще даже и 5% одного изображения не загрузилось на Slow 3g, а он же зеленый. или синий. Пусть будет сине зеленый.
Да так вот, этот сине зеленый ,вообще страх потерял да на святое замахнулся! на фоновое видео к сайту амд ему в печень.
Куда проведение только смотрит? Это чудо юдо показывало как киношку в 1.4Гб можно параллельно смотреть и в зеленой зоне покуривать.
Нужно и тебе познать современную магию, дабы знать что производительность проекта, это не секунды загрузки черт его пойми что там, а отзывчивость интерфейса. Способность проекта обслужить запрос пользователя так быстро как это возможно. И для этого, никаких оптимизаций изображений, ненужно. И фоновое видео, этому никак не помешает.
Нет ну конечно, если ты завалишь свой канал загрузкой видео, то вся моя мега логика даже пикнуть не сможет, это безусловно так. Только мы же с тобой кажись не в 2010 году живем.
Там консольку открой, вкладустик нетворкинг, посмотри там знаешь такие буковки бывают, low там hight. Изучи эти заклинания они помогут тебе.
По крайней мере ты тоже научишься этому фокусу, с зеленой зоной и гигабайтными картинками.
дальше я транслировать этот поток маразма в свой уже не мог, и промотал до конца.
А ТАМ!!!!!!
"Какой бы длины не был твой тухес — его всегда можно поднять моментально."
Мне мой опыт подсказывает, что уже на полутора метрах я теряю сознание. Кровь она от мозгов отливает и мир вокург - тухес.
Так что Всем тухес поцаны. Я кончил.
Привет Макс! Ты правильно все написал.
Дело в том, что статья НЕ техническая и это НЕ Хабр.
Тут написано НЕ для технических специалистов.
З.Ы. Посмотрел на твою аватарку и пошел побрился.
Приходи ещё!
Интересный у вас инструмент.
Но странно что вы много говорите о юзабилити, а нету базовой вещи, которая прописана уже у пользователей на подкорке, а именно кликабельный логотип. Я хочу допустим несколько проверок запустить на разных вкладках, пытаюсь найти логотип или что-то подобное чтобы сразу же оказаться на главной, а его нет :)
А что вы предлагаете для ускорения сайтов на Wordpress? У вас плагин какой-то свой есть?
Спасибо за обратную связь про логотип и несколько проверок.
Подумаем, как реализовать это юзабельно. Задача делать несколько проверок за раз? Или просто кликнуть на лого надо иметь возможность?
Для Wordpress есть темы, есть плагины, есть много сайтов на ВП в портфолио.
Но если не ВП, то самописку можно.