Скорость загрузки сайта — практические советы

Здесь мы рассмотрим некоторую теорию оптимизации скорости сайта:

• Что такое скорость загрузки сайта?
• Как мы её измеряем?
• Почему это важно и о чем тебе нужно подумать?

Чтобы понять, с чего начать, давайте посмотрим на то, как это реализовано в Yoast SEO.

Ниже приведена расшифровка видео от специалистов Yoast SEO:

Поэтому мы рассмотрим некоторые вещи, которые делают в Yoast. Мы собираемся поделиться с вами некоторыми короткими путями реализации.

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

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

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

Везде есть ссылки на всё это и позже мы поделимся ими отдельно.

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

И там есть несколько отличных ресурсов.

Почему важна скорость?

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

И ведь это действительно так.

Hidden Content

Просто есть надежда, что технология работает и что веб сайты быстро реагируют.

И есть целая куча исследований, которые подтверждают, насколько это важно.

Итак, Google в 2016 году опубликовал некоторые статистические данные, в которых говорится, что задержки более 3 секунд могут привести к более чем 40 процентам отказов на вашем сайте.

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

3 секунды это долгий срок для пользователей. Но в нашем мире, может быть, это не так уж страшно?

Так что нам нужно повысить наши ожидания относительно того, как выглядит скорость.

Исследования, проведённые журналом Wired ещё в 2014 году, показывают, что почти половина людей ожидают, что веб сайт загрузится менее чем за 2 секунды.

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

20% пользователей по данным Редвер в 2014 году — это так далеко в прошлом. А ожидания стали только выше.

20% пользователей откажутся от своей корзины, если процесс окажется медленным.

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

• меньше денег или меньше конверсий,
• или меньше продаж,
• или меньше запросов,

В то время как меньше потраченного времени это больше денег, и все выигрывают.

3 известных исследования

Есть 3 действительно известных исследования, проведённых некоторыми крупными компаниями, которые показывают, насколько это эффективно.

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

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

И Amazon классно играет с тем, насколько это эффективно на каждые 100 миллисекунд — это 1 десятая секунды. Когда они вводят искусственную задержку, они теряют 1% своего глобального дохода.

Это какие-то ужасающие цифры, такие как миллисекунды. Разница в миллионах и миллионах долларов дохода в евро для Amazon.

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

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

Итак, вы размещаете свой веб сайт и спрашиваете:

• какова моя текущая скорость,
• каково среднее значение по сравнению с конверсией,

Вы можете сделать некоторую оценку, и она скажет: «Знаешь, что ты немного медлителен. Если бы ты распространил её и стал сопоставим с их ожиданиями, вот сколько ещё денег ты мог бы заработать.»

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

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

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

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

Мой кликер действительно медленно реагирует на этот почти непробиваемый стол.

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

И он появился и находится там при соединении с 3 джи. Это данные Мак Метрикс за 2018 год, которые провели действительно хорошие исследования.

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

То как вам загрузка её сайта, которая занимает 12 секунд?

Помните, что половина ваших пользователей покинула сайт через 3 секунды. И половина из них ожидает, что это будет сделано через 2 секунды. На этот сайт уходит 12 секунд. О’кей справедливо.

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

Люди вовлечены и смотрят вокруг. Так, что, возможно, в другом секторе вы могли бы ожидать большего. Может быть, в технологическом секторе.

Кто должен быть в авангарде этого?

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

Google одержим скоростью сайта

Дело в том, что это не продлится долго, потому что даже если ваши прямые конкуренты и люди, с которыми мы сравниваем, все ещё медлительно и отстают от графика.

Скорее всего, они работают над этим, и у них есть стратегии для улучшения ситуации.

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

Особенно потому, что Google одержим скоростью сайта.

И с точки зрения SEO тут то всё и становится действительно интересным. Скорость — это их фокус номер один на данный момент.

Это всё, о чём они говорят.

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

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

И все исследования показывают, что это так.

В этом нет ничего удивительного, так что они официально делают скорость частью всех своих алгоритмов и всех своих процессов.

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

Скорость и производительность это подмножество пользовательского опыта. Пользовательский опыт, возможно, единственный и самый важный фактор ранжирования.

И если скорость является ключевой частью этого, то возможно, именно на этом нам следует сосредоточиться.

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

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

Также стоит отметить, что скорость для Google очень тесно связана с эффективностью.

Google должен сканировать интернет, им приходится потреблять контент и код. И они должны делать это в невероятных масштабах.

И если эти веб сайты медленные, и если код неуклюжий, большой или сложный, это стоит Google денег. Более быстрые веб сайты обходятся Google дешевле.

Так что это лучше не только для потребителей, но и для Google.

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

От этого выигрывают все

Скорость — это повышение производительности для всех участников.

Это также во многом объясняет, почему Google так сильно инвестирует в такие проекты, как AMP. Который призван коренным образом изменить способ создания веб сайтов.

Чтобы они были намного быстрее и эффективнее.

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

Google заинтересован в Гутенберге

Отчасти именно поэтому они так заинтересованы в Гутенберге. Потому что так структурирован контент на сайтах WordPress.

Запустить гутенберг намного проще, намного быстрее и эффективнее.

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

Будьте впереди конкурентов

Так что если ты хочешь, чтобы твой сайт занимал более высокое место, а твои потребители были счастливее — скорость это определённо то, на что тебе следует обратить внимание.

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

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

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

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

Так что недостаточно даже улучшать и увеличивать свою скорость. Вы должны делать это быстрее и лучше, чем другие сайты в вашем секторе.

Не совершайте эту ошибку

Это большая проблема, так что достаточно теории. Что нам делать, как нам к этому подойти, как нам понять и как нам улучшить ситуацию.

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

Именно здесь все ошибаются.

Они скажут что-то вроде:

«Мы знаем, что наш сайт работает медленно, но у нас есть большой проект по реконструкции сайта. Который стартует в конце следующего года осенью. И у нас есть все эти разработчики команды и агентства, которые смотрят на него.»

Проблема в том, что такого рода проекты продвигаются медленно, они дорогие, они часто заканчиваются.

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

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

То, как вы подходите к этому и то, как вы выигрываете в скорости, это 1000 хитростей.

Вы находите 1000 мелочей сегодня, завтра, на следующей неделе и исправляете их.

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

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

С чего начать?

Это довольно просто, но что это значит:

• с чего вы начинаете,
• какие у вас есть инструменты,
• как вы понимаете, какие моменты расставить по приоритетам.

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

Есть 2 фундаментальные вещи, которые вам нужно понять. 2 истины для идеологии скорости сайта.

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

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

Как вы измеряете скорость чего-либо?

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

Возможно. Но что это значит?

А что, если страница загружается мгновенно, но затем появляется куча рекламы, которая появляется немного позже? В какой момент это делается?

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

Рендеринг этого контента на экране это процесс отличный от того, как быстро реагирует сервер.

• Когда это будет сделано?
• Насколько это быстро?
• Это быстрее или медленнее?
• Это сложно?

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

Например:

• В какой момент эта страница загружена?
• Как ты оцениваешь её скорость?

И это всего лишь несколько примеров.

Вы можете начать чувствовать, что есть сценарии, в которых не так просто сказать: «давай измерим время до завершения».

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

Инструменты измерения

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

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

И в большинстве случаев это не очень здорово, они не отражают реальный мир.

Они не дают вам действенных полезных советов. Потому что они предназначены для того, чтобы дать вам очень упрощённое понимание извне.

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

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

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

Только вот это бесполезно, потому что оценка производительности, которую он тебе даёт, взята из инструмента Google Page Speed.

Который является совершенно другим инструментом.

К которому я сейчас перейду. Который изобилует недостатками и проблемами. Это даёт вам время загрузки, которая в этот конкретный момент времени для введённого вами url адреса.

Для указанной вами конфигурации.

И если идёт дождь или если у вас медленное соединение или если вы запросили страницу, на которой много посетителей.

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

Это абсолютные цифры в мире, которые намного намного более расплывчатые, чем это.

Это даёт вам возможность сравнить его с другими сайтами.

Ты быстрее, чем другие на 91%, за исключением того, что это основано на людях, которые использовали этот инструмент в течение последних 30 дней.

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

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

Это бесполезное число.

2 полезные вещи, которые это даёт вам — это то, каков размер вашего веб сайта в килобайтах и байтах, а также объём данных и информации.

А сколько вещей вы загружаете?

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

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

Так что это не очень помогает понять, где ты находишься и что тебе следует делать дальше.

Это ещё 1 инструмент этот GTmetrix, который также очень популярен.

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

Но вы определённо должны относиться к ним скептически. И вам определённо не следует строить стратегии и решать, куда инвестировать, основываясь на цифрах и оценках, которые они выставляют.

Так что у этого есть похожие проблемы. Это даёт вам целую кучу ваших плюсов, ваших троек. Но опять же в сравнении.

Мнению с другими людьми, использующими эти инструменты, это не особенно полезно.

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

Вы видите на этом скриншоте, что это говорит о том, что я должен изменить заголовки кэши браузера в моём файле google analytics.

Я не владею google analytics. Это не моё программное обеспечение, я загружаю его на свой веб сайт.

Но у меня нет возможности вносить изменения в этот файл и его поведение при кэшировании.

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

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

Google analytics, которую я очень люблю всем сердцем, является одним из худших нарушителей в этой категории.

Это скриншот отчёта о скорости работы его сайта.

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

Так что если у вас будет 1000 посетителей и 1 из них, который случайно выбран, будет из Австралии с медленным мобильным соединением где-нибудь в глуши.

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

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

Так что же нам делать?

Вот тут то у нас и появляются интересные идеи. Это скриншот инструмента Google Page Insights, который поставляется с той же функцией.

Например, ты набрал 81 балл из 100, но недавно они сделали несколько обновлений, которые вводят один контент для просмотра.

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

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

На разных плитках типов подключения один контент для просмотра действительно полезный показатель.

Он довольно подробно определён google в их технической документации, которую я не буду читать вслух. Но по сути это так.

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

Измерь, сколько миллисекунд пройдёт.

Пройдёт до тех пор, пока не покажется, что он что-то делает.

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

Как долго, если я буду ждать целую вечность, пока на моём мобильном телефоне загрузится спиннер.

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

Этический момент в потоке пользовательского опыта — как быстро мы можем показать что-то интересное.

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

И вы можете видеть, что там много чего происходит. Там много интересного, там много движущихся частей.

И там есть персонализированные учётные записи. Там есть несколько кнопок поделиться.

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

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

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

Нам не нужно большое изображение, нам не нужно все то, что находится ниже сгиба.

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

Мы можем подождать загрузки материала внизу, пока пользователь не прокрутит страницу вниз.

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

Так что некоторые вещи, которые у нас есть, вы можете погуглить по всем этим терминам и там.

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

Так как же нам это сделать?

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

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

Сделать копируй и вставляй сценарии, есть плагины для wordpress для этого. Есть куча всего, мы смотрим на исходное количество переданных байт.

Например сколько килобайт, сколько пикселей, сколько всего, как нам одержимо отбирать это обратно.

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

Мы смотрим на сложность страницы, как нам использовать меньше бит html. Как нам упростить ситуацию?

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

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

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

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

И мы рассматриваем такие вещи как отказ от изменения размера изображения на лету. И попытке сделать это действительно эффективным процессом.

А затем мы сделали целую кучу вещей с цветами, деталями и значками, так что мы сократили количество цветов.

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

• Этот бит предназначен для этого оттенка синего;
• Этот бит предназначен для этого оттенка синего;
• Этот бит это версия фиолетового.

Удалив это, мы сэкономим, может быть 10 килобайт, но мы делаем это на каждой странице, при каждой загрузке страницы для каждого отдельного посетителя.

И это занимает пару миллисекунд, но если мы сделаем ещё 100 вещей такого масштаба, это займёт пару 100 миллисекунд.

А это, если вспомнить разница между тем, откажется пользователь или не откажется, вы выиграете на 1000 изменений.

Так что мы сделали всё это, и мы были действительно счастливы, потому что сайт выглядел и чувствовал себя намного быстрее.

На нём было быстрее взаимодействовать, нам казалось, что он делает что-то интересное гораздо раньше оценки.

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

Главное не в том, чтобы оптимизировать результаты, а просто сделать это быстрее. Потому что вторые правила и второй основной принцип скорости сайта это единственное, что имеет значение.

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

Не имеет значения, если загрузка этого фрагмента заняла немного больше времени, а этого немного меньше. Всё это неважно.

Сайт стал работать быстрее.

И то, что Google пытается понять и оптимизировать на максимально возможном уровне — это улучшить пользовательский опыт.

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

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

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

Это то, для чего нам нужно оптимизировать.

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

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

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

Я забыл, что это была за метрика. Ранее на слайдах google говорил о времени интерактивного взаимодействия, то есть ваш первый блок это время для