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

Разочарованные потребители, потеря конверсии и высокий показатель отказов – это лишь некоторые следствия медленной загрузки вашего сайта. Чтобы понравиться потребителям, победить конкурентов и угодить Google, ваш сайт должен загрузиться менее чем за секунду. 

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

Джоно Алдерсон – цифровой стратег, технолог по маркетингу и разработчик полного цикла с почти двадцатилетним опытом работы в веб-разработке, SEO, аналитике, стратегии брендов и кампаний, лидогенерации, eCRM, CRO и многом другом. В настоящее время Джоно руководит специальными проектами в Yoast. До этого он работал в других уважаемых и отмеченных наградами SEO-агентствах, таких как Distilled, Linkdex и twentysix.

Привет!

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

По данным серии исследований Google и marketdive в 2016 году, задержка более 3 секунд может привести к более чем 50% отказов на вашем сайте. Проникнитесь, 3 секунды – это небольшой срок, но к этому моменту половина вашей аудитории уже ушла. 

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

По исследованиям 2014 года, почти 50% людей ожидает, что сайт загрузится менее, чем за 2 секунды. Мир стал быстрее, веб-сайты стали больше, люди стали более мобильными. В развивающихся странах больше людей используют медленное соединение, плохие сети, а 3G все еще отстой. Сейчас половина вашей аудитории ожидает, что ваши сайты загрузятся менее чем за 2 секунды.  

20% вашей аудитории откажутся от вашей корзины, если они недовольны скоростью сайта. 1 из 5 конверсий не является конверсией, потому что вы разозлили своих пользователей. Это довольно страшно. 

Вот вам реальные цифры:

1. Дом моды GQ, как известно, увеличил скорость своего сайта с 7 секунд до 2 секунд и увеличил органический трафик на 80% за одну ночь.

2. Google искусственно ввел 500 миллисекунд задержки выдачи результатов поиска и они потеряли 20% своих пользователей. Всего полсекунды стоили им 20% аудитории. 

3. Ужасно то, что Amazon экспериментировал с сокращением задержки на 100 миллисекунд на своих страницах, и они потеряли 1% своего дохода. 

Итак, никто из вас не Amazon, ни у кого из вас нет таких объемов трафика как у Google, но важно понимать, что никто не сидит за компьютером, сознательно думая: “меня раздражает эта 100-миллисекундная задержка”. Никто об этом даже не знает. Это настолько молниеносно, что никто специально не говорит, знаете ли, что я пойду на другой сайт, потому что это заняло 200 миллисекунд. Происходит глубокая подсознательная неприязнь к задержкам, и это происходит с каждым сайтом, независимо от того, сколько миллисекунд будет задержка. Это работает для Amazon, GQ и для вашего сайта. 

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

Время = Деньги

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

У Google есть действительно хороший инструмент, который позволяет оценить прибыль сайта. 

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

Все наши сайты – отстой

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

Это совершенно не так. Все сайты – отстой. Это исследование 2018 года, посвященное различным секторам и странам, а также среднему времени до визуальной загрузки через соединение 3G.

Вытаскиваю телефон, загружаю сайт и смотрю сколько секунд… Некоторым сайтам требуется более 10 секунд для загрузки, половина их аудитории ожидает, что загрузка займет 2 секунды. Половина их аудитории уйдет через 3 секунды и т. д. Это реально плохо! Конкуренты обойдут вас, пока вы будете тормозить! 

Скорость = Эффективность

Итак, что мы со всем этим делаем и почему нас это волнует? Потому что в первую очередь Google заботится, и если мы собираемся действовать тактично и осознанно, нам нужно понимать, что делают люди, которые формируют ландшафт опыта и каковы их приоритеты. 

Еще в 2018 году Google заявил, что скорость становится все более важной частью алгоритма органического ранжирования.

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

Google волнует скорость, потому что скорость – это синоним пользовательского опыта. Это большая часть показателя качества. Это целевой фактор ранжирования. 

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

И как с органической точки зрения, Google пытается вознаградить пользователей хорошим опытом. Насколько быстро вы получаете опыт, – это огромная составляющая. У вас может не быть “красивого” пользовательского опыта, но он должен быть быстрым. Скорость для Google – это эффективность!

О чем стоит позаботиться

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

Больше всего денег Google тратит на “переваривание интернета”. Каждое большое изображение, которое они загружают, каждый медленный JavaScript, каждый килобайт и каждая миллисекунда – все это, обходится поисковому гиганту в триллионы долларов.

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

Подсказка: Нужна постоянная (пере) разработка сайта!

Я гарантирую, что некоторые из вас думают так: «Я знаю, что мой веб-сайт медленный, мы говорили с нашими разработчиками» или «Генеральные директора режут бюджеты,на обновление» или «Мы потом запустим новый быстрый веб-сайт».

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

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

Что это обозначает? Как начать? Какие есть инструменты? Какие для этого нужны процессы? 

1. Нет такого понятия, как «скорость»

При приближении к оптимизации скорости вам необходимо понять две фундаментальные вещи. Первое – это то, что нет такого понятия, как скорость. 

Я немного объясню, что имею в виду, когда говорю «скорость». 

Как вы измеряете, насколько быстрые веб-страницы? Например, скорость – это “время”. Но что тогда делать с «нагрузкой»? Пустую страницу можно загрузить очень быстро, но смысл?

Тогда может скорость –  это «время для доставки ресурсов»? А что если загружается очень быстро, но для отображения изображения на экране требуется много времени? Насколько это быстро? Какие биты были быстрыми? Какие биты были медленными?

Скорость – это не то, что можно измерить одним числом; нам нужны более точные определения, чтобы понять, как у нас дела. 

Я уверен, что многие из вас смотрели и играли с некоторыми стандартными инструментами, такими как GTmetrix, Kingdoms, Webpagetest, Wiseau и прочие.

Все эти инструменты – отстой. Они упрощают правду, чтобы вы почувствовали, что соответствуете метрикам.

Например «Performance Grade» – это инструмент тестирования скорости веб-страницы от Kingdoms. Вы помещаете свой URL-адрес, и он говорит: «Все в порядке!» и дает вам кучу цифр. 

Первая – это «оценка производительности», которая не содержит скорость вообще. Инструмент ищет доказательства того, что вы использовали или не использовали определенную тактику. Но ведь это не показывает реальную производительность, верно? 

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

Kingdoms также говорит вам: «Вы быстрее, чем 91% веб-сайтов», что было бы неплохо, за исключением того, что это относится к другим людям, которые тестировали свои домашние страницы за последние 30 дней с помощью этого инструмента. Это очень искаженная выборка людей, которые заинтересованы в скорости своего сайта и смотрят только на свою домашнюю страницу. 

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

Что стоит использовать

Google Lighthouse – единственный инструмент, который вы должны использовать:

Он с открытым исходным кодом, доступен в Google Chrome, вы можете запустить его на своих серверах из командной строки. Google Lighthouse гибкий, мощный и дает реальные показатели. 

Он фактически имитирует и тестирует все соединения 3G со всего мира, а также выполняет целый ряд других умных вещей. Что действительно приятно, так это то, что он дает вам разумные метрики, такие как первый контент для отображения и сколько миллисекунд проходит до того, как страница станет интерактивной. Я расскажу об этом чуть позже. 

Это цифры, на которые вы должны смотреть при мониторинге и учитывать в своих отчетах. По сути, эти метрики отражают сколько времени пройдет до загрузки первого контента у пользователей и это конкретика, в отличие от «Вы быстрее, чем 91% веб-сайтов».

Как быстро мы сможем показать что-нибудь интересное?

Первый контент для отображения (first content for paint) – это метрика, показывающая сколько миллисекунд для отображения чего-либо на экране пользователя.

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

У вас может быть более медленный сайт с более быстрым первым контентом для отображения и ваш сайт будет казаться быстрее для пользователей, давать им лучший опыт и Google ранжирует вас выше. Для Google важно ощущение скорости, а не цифры как таковые. То есть, скорость – это скорее человеческое восприятие скорости.

Вот вам пример – немного устаревший шаблон сообщения в блоге, который очень сильно перегружен:

Здесь столько всего происходит: мы загружаем огромное изображение над сгибом, у нас есть собственные шрифты, фотография автора статьи, видео, масса скриптов, работающего в формате комментариев, кастомный CSS-код, комментарии ко всем этим вещам…. 

Показать страницу можно и с половиной этих вещей. Итак, мы передали:

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

Нам не нужно большое изображение, нам просто нужен фреймворк в макете, нам не нужно изображение автора, нам не нужно видео. Все эти вещи можно загрузить позже или попросить пользователей пройти вниз по странице. Мы убрали все, что можно  и сайт стал давать первый ответ намного быстрее.

Мы сделали это, чтобы человек почувствовал отклик намного быстрее. Теперь сайт реагирует мгновенно, а затем появляется все необходимое. Урок здесь в том, что результаты проверок на сторонних инструментах на самом деле не имеют значения. Что вам нужно для оптимизации, так это – человеческое восприятие скорости. И здесь мы переходим ко второму правилу: единственное, что имеет значение, – это восприятие скорости.

2. Единственное, что имеет значение – это восприятие скорости

«Сколько времени нужно, чтобы я мог взаимодействовать с этим предметом?», – вот вопрос который вы должны задать себе следующим.

После того, как вы подумали про контент для отображения – времени, когда пользователь получил отклик, нужно продумать про следующий этап – момент взаимодействия.

Вы знаете тот момент, когда страница загружается, и вы начинаете пытаться кликать на объекты или смахивать? Страница вздрагивает, дергается и не совсем отвечает? Когда это закончится? Когда я могу щелкнуть по элементу? Когда я смогу что-то сделать? 

И для этого мы загружаем меньше JavaScript. У нас есть легкий CSS, мы загружаем только то, что нам нужно, чтобы обеспечить минимальное взаимодействие. 

Как быстро обеспечить взаимодействие

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

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

Воспринимаемую скорость сложно определить количественно!

Проблема, которая возникает при оценке воспринимаемой скорости –  как измерить ощущение?

На самом деле есть много загружаемых частей, образующих страницу.  Это ужасающее изображение взято с w3c, и оно показывает как вы определяете работу интернета:

Это все происходит, когда вы загружаете веб-страницу. Все, начиная с того, как вы начинаете выгружать текущую страницу в UV direct, вы смотрите на следующее, сервер начинает запрашивать ответ… Все эти этапы происходят. И некоторые из них быстрее, чем другие, некоторые из них медленнее, некоторые из них зависят от вашего оборудования, а некоторые – от ваших таблиц стилей.

Полный беспорядок. Более того мы сейчас переживаем революцию, когда все больше людей полагаются на фреймворки JavaScript, такие как react или angular, и другие вещи, чтобы полностью изменить то, как работает этот этап обработки. 

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

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

Как добиться быстрой загрузки

Это по понятным причинам пугает. Это большая часть причин, по которым оптимизация скорости действительно не была на переднем крае миров CRO и SEO до самого недавнего времени. Хорошая новость – теперь это все наука. 

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

Теперь ответ на все ваши: «Это может потребовать большого объема работы», «Для этого могут потребоваться некоторые ресурсы разработчика и некоторое время»… 

Вам просто нужно следовать правилам!

Это ресурс Google, где они упростили этот ужасающий беспорядок, связанный со всеми происходящими событиями, на четыре аккуратных этапа:

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

1. Первый – это ваш DNS-поиск и TCP-соединения – бит, в котором ваши серверы общаются с другими серверами через океаны. Вы ничего не можете с этим поделать, потому что это ограничено подводными кабелями и скоростью света. Довольно сложно оптимизировать 🙂

2. Однако на следующем этапе вы начинаете получать контроль над загрузкой. Вы можете влиять на ваш хостинг, серверы, их расположение и конфигурацию. 

3. Вы также можете оптимизировать свои системы управления контентом, плагины, темы, расширения, чтобы сократить время обработки. 

4. И затем вы можете провести оптимизацию HTML, CSS и JavaScript, чтобы процессы рисования и рендеринга казались более мгновенными.

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

Проблема в том, что все сайты разные и никто не начинает с нуля. Итак, вам нужен набор правил, которым нужно следовать, чтобы добиться результата с уже действующим ресурсом. 

Ранее я сказал, что Google вкладывает большие средства в документирование и обучение тому, как все это делается:

Здесь есть обо всем: как уменьшить изображения, выполнять ленивую загрузку (lazy load), как загружать JavaScript и изображения только после того, как люди прокручивают, как оптимизировать первый контент для рисования – вся необходимая информация есть в этой документации. 

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

С чего начать

Сотни страниц документации о вещах, которые могут не относиться к вам? Вам нужно знать, где находятся именно ваши проблемы?

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

Мы используем инструменты Google. Это водопад всего, что загружается на главной странице Yoast.com:

Вы можете видеть, что мы загружаем логотип, некоторые изображения и некоторые шрифты. 

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

Синяя линия здесь – страницы готовы. Только после этого мы загружаем все наши области отслеживания и прочие дополнительные элементы.

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

Не нужно быть разработчиком, чтобы заметить это и понять, что есть какое-то узкое место. В идеальном мире эти картинки должны загрузиться одновременно, а не по очереди. Я поговорил с разработчиком. Оказалось, что способ, которым мы реализовали эти изображения с помощью CSS, заставляет их загружаться последовательно. Мы исправили и теперь все они загружаются одновременно, и все, что происходит после этого, также происходит немного раньше.

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

А это другой инструмент, Kingdom. Он показывает ту же проблему:

Для того, чтобы увидеть проблему, мне пришлось упорядочить по времени загрузки:

Этот крошечный кусок JavaScript, всего 4 килобайта, должен загружаться за миллисекунды, но он загружается за полсекунды, он очень медленный.

Что действительно интересно – он задерживает это:

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

Я сел с разработчиком, и он сказал: «О да, у нас проблема со способом загрузки. Я понимаю, почему грузится медленно». Он переработал элемент, у него ушло около суток, а наш сайт теперь загружается за 0,6 секунды.

Мы сократили скорость загрузки на полсекунды просто исправив крошечный файл. Не перестраивая сайт, не работая со всеми инструментами, просто найдя  бутылочное горлышко.

Так что потенциально секрета нет – вы идете и используете инструменты, чтобы находить узкие места, находить слишком большие или слишком медленные вещи, и вы постепенно и итеративно работаете над их улучшением. 

Итак, что вы можете сделать сегодня

Вы найдете много конкретных тактических вещей, которые вы можете сделать в документации. Но сейчас я выделю некоторые основные моменты:

Удаление пользовательских шрифтов. Любой, кто использует нестандартные шрифты, а это, вероятно, все вы, вероятно, делает это неправильно. Это одно из самых больших и самых простых узких мест, которое можно исправить. Если вы загружаете шрифты из DNN шрифтов Google, то, скорее всего, вы сразу сможете сэкономить несколько сотен миллисекунд. 

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

Также оцените свой хостинг. Ваш веб-сайт представляет собой часть программного обеспечения, работающего на чьем-то оборудовании. Если вы платите меньше 50 долларов в месяц за свой хостинг, то, вероятно, сервис заботится о своем масштабировании, а не вашей скорости. И еще, если ваша хостинговая компания использует изображение животного в качестве логотипа – бегите от них – 100% корреляция с дерьмовым сервисом 🙂

Дополнительные инструменты

Cloudflare – это сеть доставки контента, которую вы размещаете перед своим сайтом. Настройка занимает 20 минут: вы заходите на их сайт, подписываетесь на бесплатный план и указываете адрес своего домена в CloudFlare.

Стоит понимать, что Cloudflare не решает ни одной из основных проблем, но исправляет их таким образом, чтобы ускорить загрузку.

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

Кто не слышал об AMP? AMP – это новый стандарт HTML, которая финансируется Google, Facebook, Mozilla, Amazon…

Это попытка исправить HTML, поскольку мобильный Интернет немного хреновый, а медленные сайты – это плохо. Новый стандарт HTML не позволяет делать плохо, AMP ограничивает ваши возможности в правильную сторону. 

Ваш сайт больше не может быть кричащим и роскошным, аналитика будет ограничена, но все будет работать молниеносно! Ваш ресурс будет обслуживаться из кешей Google, загружаемых мгновенно.  AMP это простой способ создать очень-очень-очень быстрый сайт, не беспокоясь ни о чем из того, о чем я говорил. Он автоматически сжимает изображения и стили.

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

Если вы используете WordPress и хотите поиграть с AMP, то можете установить официальный плагин. Пара кликов автоматически преобразуют ваш сайт на WordPress в сайт AMP: 

Еще одна интересная особенность этого подхода заключается в том, что AMP становится все лучше. По мере того, как они выпускают и добавляют новые функции и новые оптимизации, они просто автоматически исправляет ваши проблемы.

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

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

Еще пара фишек

Вы можете попросить своих разрабов добавить встроенную отложенную загрузку в Chrome. 

После этой маленькой модификации, посетители вашего сайта на браузере Chrome Veon автоматически будут загружать изображения с ленивой загрузкой (lazy load). Изображения начинают отображаться, только если находятся в области просмотра на экране. Так все большие файлы, которые вы бы загрузили позже, никогда не загружается, если они не понадобятся.

Еще один совет – используйте отчет о покрытии в Google Chrome. 

Вы можете открыть инструменты разработчика Chrome, и увидеть как фактически используется ваш JavaScript и CSS. Например, на скриншоте ниже меня смущает вторая строка :

На главной странице мы не используем 89% из наши элементов. Это 20 или 30 килобайт, которые нам не нужно было отправлять пользователю,серверу не нужно управлять, а Google учитывать.

Когда вы посмотрите на все элементы, то  задайтесь вопросом что можно исключить. Например, мы подумали: «Нужно ли нам загружать контактную форму на главной странице?». Конечно, нет – это затраты на хостинг и инфраструктуру, а также затраты на производительность.

Итак, многие примеры, которыми я поделился, – это вещи из процесса, который мы прошли, и я прошел от оптимизации нашего веб-сайта. Мы начали примерно через 1,2 секунды, первый толчок привел нас к отметке 0,6 секунды, а после ряда изменений домашняя страница грузится меньше 400 миллисекунд.

Мы добились таких результатов не потому, что мы особенные или у нас есть волшебная палочка. Я провел много часов, говоря: «Почему это это работает медленно? Почему это изображение такое большое? почему этот фрагмент JavaScript является узким местом для этого фрагмента?». Постепенно устраняя проблемы одну за другой изо дня в день в течение примерно года мы улучшили свои результаты.

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

Опять же, это не о том, что кто-то сознательно думает: «Меня раздражает, что это сайт медленно работает», а о том, что они думают: «пока проверю Facebook» или «посмотрю на другом сайте».

Наконец, если вы хотите стать действительно продвинутым, то вам поможет консоль Google Chrome.

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

На этом все, спасибо за внимание!
Смотрите видеоверсию материала на Youtube!