Ещё четыре нестандартных способа ускорить загрузку страниц сайта

Том Энтони из DistilledODN специально для MOZ поделился не самыми очевидными способами ускорить загрузку контента.

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

1. Inline-изображения.
2. В сторонку JavaScript, HTML тоже может.
   
3. Сетевые настройки (TLS 1.3, QUIC/HTTP 3).
4. Пусть CSS работает больше.
   
5. Какие SEO-инструменты пригодятся.
   

«Пиксель Тулс» перевели и дополнили эти советы. Давайте изучать!

Для иконок и пиктограмм всегда старайтесь использовать SVG. Векторные изображения могут сэкономить до 60% от размера файла. Почему важны такие мелочи, как подобные иконки?

Это SVG на сайте с продажей билетов. Если смоделировать, например, 3G-соединение и проверить скорость загрузки страницы, увидим следующее:

Сайт не использует HTTP/2, поэтому даже загрузка с сервера изображения размером всего 1,2 кб потребует почти 600 мс (параметр Waiting TTFB) и будет блокировать другие запросы. Отчасти проблему решает кэширование, но мы сражаемся за поисковый трафик, и важна скорость при первом посещении сайта, поэтому обратим внимание на встроенные изображения.

Вообще способов размещения векторных изображений как минимум четыре:

1. Через тег <img>.
2. В качестве фоновой картинки в CSS.
3. Через тег <object>.
4. Непосредственное встраивание (Inline) с помощью тега <svg>.

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

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

Можно заморочиться ещё больше и кодировать маленькие изображения (даже JPG или PNG) в base64 и размещать прямо в HTML-разметке или CSS.

В сети есть несколько доступных конвертеров, выбирайте любой.

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

Распространенный элемент в интерфейсе.

Одна из самых популярных библиотек, позволяющих реализовать такой блок, — Select2, она основана на JQuery и использует CSS, то есть для довольно простого элемента в интерфейсе нужно подгрузить:

• JQuery — 101 Кб.
• Select2 JavaScript – 24 Кб.
• Select2 CSS — 3 Кб.

Но эта функциональность есть в HTML из коробки, и она пригодна для небольших списков. Добавляется с помощью тега <datalist>:

Выглядеть может так:

Рабочий шаблон можете посмотреть и скопировать с CodePen.

Типичный пример реализации с помощью JS — кнопка «Read more», скрывающая часть текста:

В HTML также есть альтернатива, позволяющая сэкономить время загрузки страницы: теги <details> и <summary>. В разметке будет выглядеть так (для стрелочки на кнопке используется Inline-SVG иконка):

Рабочий шаблон на CodePen.

Если хотите углубиться и попробовать сократить количество JS-кода на своих сайтах, вот целый ресурс с альтернативами на чистом HTML и CSS (слайдеры, модальные окна, формы и прочее): http://youmightnotneedjs.com/.

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

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

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

Исторически сложилось так, что обмен данными между браузером и сервером проходит как бы в несколько заходов. Грубо говоря, если пользователь находится на «расстоянии» в 50 мс от сервера, то соединение занимает 200 мс. Помните, что Google рекомендует именно 200 мс в качестве оптимального времени соединения.

TLS 1.3 — последняя версия протокола, которая ускоряет процесс «рукопожатия» в полтора-два раза и вообще гораздо эффективнее предыдущей.

В сети есть несколько инструментов для проверки версии протокола, используемой для домена. Гуглится как [TLS Checker].

За последние два-три года наблюдается переход большинства сайтов с HTTP/1.1 к HTTP/2. Закулисное, казалось бы, обновление, которое существенно влияет на скорость загрузки сайта:

• Несколько запросов теперь отправляются через одно TCP-соединение.
• Размер HTTP-заголовков может сжиматься.
• Приоритизация потоков, что позволяет разработчикам настраивать важность одних потоков относительно других и выстраивать порядок получения данных.
• Server Push — технология, которая может отправить клиенту данные до того, как он их запросил. Например, файлы .CSS и .JS не поочередно, а в одном ответе.

Но и это не предел. Для сокращения числа циклов, то есть мультиплексирования запросов, начинают внедрять HTTP/3, работающий через протокол QUIC, разработанный Google в 2012 году на смену устаревающему TCP.

Поддержка QUIC пока только набирает обороты, но на некоторых серверах (CloudFlare, Verizon Digital Media Services) протокол уже поддерживается. Основное преимущества использование протокола — почти мгновенное соединение и минимальное время задержки между запросом и ответом.

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

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

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

Это легко реализовано с помощью CSS-свойств:

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

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

Что ещё умеет CSS без JS:

• Индикаторы выполнения (Progress bar).
• Выпадающие меню.
• Модальные окна.
• Редактирование текста на странице и прочее.

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

• Проверка времени отклика сервера, размера страницы и скорости загрузки кода для списка URL. Стремиться нужно к показателю менее 900 мс.
• Анализ конкурентов по запросу с возможностью проверить скорость загрузки контента. Старайтесь быть быстрее конкурентов.
• Ещё 12 способов уменьшить скорость загрузки ваших страниц.
  

#перевод #seo #оптимизация