Ещё четыре нестандартных способа ускорить загрузку страниц сайта
Том Энтони из DistilledODN специально для MOZ поделился не самыми очевидными способами ускорить загрузку контента.
Изменения, которые рассмотрим, редко встречаются в качестве анализируемых параметров в аудитах, но могут существенно повлиять на скорость сайта. Это важно для поведенческих факторов и ранжирования.
Содержание
«Пиксель Тулс» перевели и дополнили эти советы. Давайте изучать!
Inline-изображения и SVG вместо PNG
Для иконок и пиктограмм всегда старайтесь использовать SVG. Векторные изображения могут сэкономить до 60% от размера файла. Почему важны такие мелочи, как подобные иконки?
Это SVG на сайте с продажей билетов. Если смоделировать, например, 3G-соединение и проверить скорость загрузки страницы, увидим следующее:
Сайт не использует HTTP/2, поэтому даже загрузка с сервера изображения размером всего 1,2 кб потребует почти 600 мс (параметр Waiting TTFB) и будет блокировать другие запросы. Отчасти проблему решает кэширование, но мы сражаемся за поисковый трафик, и важна скорость при первом посещении сайта, поэтому обратим внимание на встроенные изображения.
Inline-SVG
Вообще способов размещения векторных изображений как минимум четыре:
- Через тег <img>.
- В качестве фоновой картинки в CSS.
- Через тег <object>.
- Непосредственное встраивание (Inline) с помощью тега <svg>.
С точки зрения скорости именно последний вариант — самый эффективный и не требует сетевых запросов для каждой картинки (но и не поддерживает кэширования напрямую).
То есть векторное изображение размещается прямо в HTML-коде страницы. Это возможно благодаря тому, что в файле SVG хранится не само изображение, а инструкции к его построению, то есть он может быть отредактирован в текстовом виде и размещён в таком виде:
Можно заморочиться ещё больше и кодировать маленькие изображения (даже JPG или PNG) в base64 и размещать прямо в HTML-разметке или CSS.
В сети есть несколько доступных конвертеров, выбирайте любой.
В сторонку JavaScript, HTML тоже может
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 1.3
TLS (и его предшественник SSL) — протокол, отвечающий за защищённую передачу данных с помощью шифрования.
Исторически сложилось так, что обмен данными между браузером и сервером проходит как бы в несколько заходов. Грубо говоря, если пользователь находится на «расстоянии» в 50 мс от сервера, то соединение занимает 200 мс. Помните, что Google рекомендует именно 200 мс в качестве оптимального времени соединения.
TLS 1.3 — последняя версия протокола, которая ускоряет процесс «рукопожатия» в полтора-два раза и вообще гораздо эффективнее предыдущей.
В сети есть несколько инструментов для проверки версии протокола, используемой для домена. Гуглится как [TLS Checker].
QUIC/HTTP 3
За последние два-три года наблюдается переход большинства сайтов с 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-свойств:
Также нет необходимости подгружать разные файлы для логотипов отличающихся цветов. Используйте один, а свойства задавайте в CSS:
Элементы взаимодействия и анимация
Большинство интерактивных или динамичных элементов в интерфейсе реализуется с помощью JavaScript, но даже подобную анимацию можно сделать на чистом CSS:
Что ещё умеет CSS без JS:
- Индикаторы выполнения (Progress bar).
- Выпадающие меню.
- Модальные окна.
- Редактирование текста на странице и прочее.
Примеров и готовых шаблонов в сети множество. Постарайтесь использовать минимально необходимое количество громоздких JS-библиотек и уменьшайте количество подгружаемых с серверов элементов с помощью реюзабельных картинок и пиктограмм.
Какие SEO-инструменты пригодятся?
- Проверка времени отклика сервера, размера страницы и скорости загрузки кода для списка URL. Стремиться нужно к показателю менее 900 мс.
- Анализ конкурентов по запросу с возможностью проверить скорость загрузки контента. Старайтесь быть быстрее конкурентов.
- Ещё 12 способов уменьшить скорость загрузки ваших страниц.
А теперь идем на caniuse и понимаем, что JS вариант не так уж плох.
Про details/summary - не понятно что вообще там экономить. Две строчки кода?
Про Select2 - тут скорее проблема тех, кто его тянет по каждому поводу. Реализовать минимально необходимый подобный функционал можно гораздо меньшим кодом. Ну и без jQuery, от которого не убегает сейчас только ленивый.
строчка про jQuery немного обидная... почему в данное время я часто стал замечать информацию про избежание данной библиотеки ?
потому что слишком толсто тянуть его целиком из-за пары функций(а чаще всего именно так), которые можно написать на нативном js в почти то же количество строк.
да, если юзать с cdn, то скорее всего у юзера он уже будет загружен, но "тянуть" не всегда допустимо(финсервисы например).
Кэш — это миф. Быстро протухает, большой разброс версий. А если сторонний ресурс отвалится (что нередкость с ковровыми бомбардировками блокировок Роскомнадзора, скажем), то вообще всё сломается. Минимум половина запросов не попадают в кэш.
Если у вас половина запросов не попадают в кеш, то проблема не во вне, уверяю.
Кеш нужен не только для того чтобы новые пользователи не грузили лишнего, а чтобы текущие пользователи при переходе по страницам не грузили все заново.
Вы забыли про контекст, тут SEO обсуждают, то есть заходы на сайт, а не хождение по нему.