Если ваш сайт загружается более трех секунд, ваш посетитель уже ушел!

Может ли скорость вашего сайта так сильно влиять на ваши конверсии и продажи? Даже если ваш сайт загружается не слишком медленно, можно ли его улучшить? ответ: Да.

Время загрузки страницы VS воспринимаемая скорость

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

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

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

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

Отдавайте предпочтение контенту верхней части страницы

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

Каков критический путь рендеринга?

Серия событий, которые должны произойти для визуализации (отображения) начального вида веб-страницы. Например: получить html › получить ресурсы › разобрать › отобразить веб-страницу. Оптимизация этих событий приводит к значительному ускорению веб-страниц.

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

Удалить JavaScript, блокирующий рендеринг

Чтобы JavaScript не блокировал парсер, Google рекомендует использовать атрибут HTML async во внешних скриптах. Например:

<script async src="my.js">

Обратите внимание, что асинхронные сценарии не гарантируют выполнение в указанном порядке и не должны использовать document.write. Сценарии, которые зависят от порядка выполнения или требуют доступа или изменения DOM или CSSOM страницы, возможно, потребуется переписать с учетом этих ограничений.

Оптимизируйте доставку CSS

В соответствии с рекомендацией Google определите и разделите стили для содержимого верхней части страницы (важный CSS) и поместите эти стили непосредственно в раздел заголовка страницы. Затем загрузите остальные файлы CSS в событии загрузки страницы следующим образом.

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Как отложить изображения

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

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

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

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

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

Javascript:

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

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

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

Если вы тестировали свой веб-сайт с помощью таких инструментов, как GTmetrix, Google PageSpeed ​​Tools и PingDom, вы заметите всплеск скорости вашей страницы с двумя вышеуказанными шагами.

В следующей статье я расскажу о некоторых более сложных темах. Быть в курсе!