{"id":13472,"url":"\/distributions\/13472\/click?bit=1&hash=4a05616fb570ab538ab8c04fa1f08afa00a090b2c2700fcd6146507f1b1658df","title":"\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0441\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}
SEO
Пиксель Тулс

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

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

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

Содержание

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

Inline-изображения и SVG вместо PNG

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

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

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

Inline-SVG

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

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

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

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

<svg width="24" height="24" viewBox="0 0 24 24" class="icon icon-alarm" xmlns="http://www.w3.org/2000/svg"> <path id="icon-alarm" d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z"></path> </svg>

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

.back { background:url("data:image/GIF;base64,R0lGODlhAQAGAIAAANXV1QAAACH5BAAAAAAALAAAAAABAAYAAAIChF8AOw==") 298px 0 repeat-y }

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

В сторонку JavaScript, HTML тоже может

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

Выпадающий список с поиском

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

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

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

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

<input type="text" list="животное" placeholder="Введите название животного" /> <datalist id="animals"> <option>Аллигатор</option> <option>Альботрос</option> </datalist>

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

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

Кнопка «Подробнее»

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

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

<p>Видимая часть текста</p> <details><p>Скрытая часть текста.</p> <summary>Далее <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path d="M28.8 6.2l-12.8 12.8-12.8-12.8-3.2 3.2 16 16.4 16-16.4z"></path> </svg> </summary> </details>

Рабочий шаблон на 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-свойств:

​Шаблон на CodePen

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

​Шаблон на CodePen

Элементы взаимодействия и анимация

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

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

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

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

Какие SEO-инструменты пригодятся?

0
51 комментарий
Написать комментарий...
Владимир

Оптимизируешь такой, оптимизируешь... тут сжал, там асинхроночка, здесь почистил зависимости...  а потом ХЕРАКС — приходит эффективный менеджер-аналитик, который впендюривает кучу трекеров и другого говна в GTM так, что твой сайт начинает лагать даже на мощной девелоперской машине...

Ответить
Развернуть ветку
Valeryi

А теперь идем на caniuse и понимаем, что JS вариант не так уж плох.

Про details/summary - не понятно что вообще там экономить. Две строчки кода?

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

Ответить
Развернуть ветку
William Nash

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

Ответить
Развернуть ветку
19 комментариев
Сергей Давлятов

Спасибо за статью. 

Я бы добавил еще:
1. JS виджеты лучше грузить по клику. Например многие виджет-чаты запускаются хоть и асинхронно, но это все равно попадает в load (бывает сервер чата отвечает долго или вообще может отдать 50Х ответ). Поэтому лучше отверстать иконку чата SVG и запускать JS чата только по клику или вообще после load.
2. Также мало кто об этом говорит, но мобильный трафик уже давно преобладает, а скорость интернета ниже, поэтому лучше изолировать версии. То есть если пользователь заходит на сайт с мобильного устройство, то можно отдать отдельную облегченную версию (не адаптировать и не бустрапить), а именно отдельный CSS и JS конкретно для мобильных устройств (они всегда будут меньше весить).
3. Статичные блоки лучше кешировать на сервере. В некоторых случаях можно даже держать в кеше на сервере готовую страницу, чтобы сразу ее отдать, что сильно уменьшает TTFB.
4. Ну и самое главное, все сторонние JS лучше не использовать асинхронно. Потому что асинхронность хоть и грузит файл JS не останавливая парсинг, но при отработке останавливает его. Поэтому лучше использовать либо пост загрузку, либо defer загрузку.

Мог бы добавить еще много чего, но каждый проект индивидуален и надо смотреть на точки роста. Возможно где-то нужен CDN, где-то отдельно догружать блок на который php (или другой язык программирования) тратит много времени тормозя генерацию страницы на сервере. А иногда вообще бывает тупо загвоздка в большом количестве запросов, если можно, то лучше уменьшать.

Ответить
Развернуть ветку
Дмитрий Александрович
JS виджеты лучше грузить по клику.

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

Ответить
Развернуть ветку
Жаналинов Ильяс

С картами встроенными что делать?

Ответить
Развернуть ветку
Сергей Давлятов

lazy load. Либо загружать через 3-5 секунд после load.

Либо так https://sitehere.ru/optimizaciya-zagruzki-yandeks-karty-na-sajte

Ответить
Развернуть ветку
Елизавета Романченко

Однозначно в закладки. Спасибо за статью!

Ответить
Развернуть ветку
Месье Никита

Экономия на спичках. Это нужно иметь ну ОЧЕНЬ неадекватное количество иконок, чтобы начать на них экономить. Или очень большео количество мелких запрограммированных элементов. 

А на деле, сколько бы вы не оптимизировали свои спички - два ролика с ютуба через фрейм - и страница уже загружает существенно дольше. Поможет вставка не фрейма, а загружать только превьюху в <img>. Ну и сделать их всех скриптов и css (а это 20-50 в современных сайтах) - 2-3 подключаемых файла. 

Ответить
Развернуть ветку
Сергей Поляков

Когда борешься за "каждое очко", то борьба за каждый кб не кажется такой уж плохой. 

Ответить
Развернуть ветку
Али Жакупов

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

Ответить
Развернуть ветку
Evgeny Kantor

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

Ответить
Развернуть ветку
1 комментарий
Сергей Давлятов

Я поставил на отложенную загрузку и проблемы нет. Данные немного не точные, не попадают только те, где пользователь провел 3-5 секунд на сайте. Мне как бы эти данные и не нужны)

Ответить
Развернуть ветку
2 комментария
Георгий Пришкин

И вы сидите и думаете, что на старом проекте либо переделывать всю верстку или сам проект

Ответить
Развернуть ветку
Павел Андрейчук

Который не факт что будет быстрее^^

Ответить
Развернуть ветку
Gre Li

По опыту, если вёрстка не сделана по хорошим практикам (а ля с БЭМом), то если это не какое-то сложное приложение, проще будет переписать.

Ответить
Развернуть ветку
Иван Иванов

Лучше написали бы что с видео делать на сайте, а не такие килобайты. На современных сайтах в слайдере на главной заказчики  видео сейчас ставят, что тянет за собой ютуб и все сопутствующие проблемы со скоростью. Или если использовать mp4 файл то как минимум +10 Мб к загрузке.

Ответить
Развернуть ветку
Сергей Соколов

Иван, с видео на сайте (особенно на главной) нужно сделать следующее - У Д А Л И Т Ь.

Ответить
Развернуть ветку
1 комментарий
Сергей Давлятов

Либо принять, что есть HTML5 с нормальной буферизацией. 

Вот вам пример https://sitehere.ru/kak-sdelat-video-fonom-sajta-videostoki

Ответить
Развернуть ветку
Alexis Sinn

Подскажите, где можно посмотреть готовые шаблоны выпадающих меню при помощи CSS?

Ответить
Развернуть ветку
Пиксель Тулс
Автор

Ловите самый простой вариант: https://codepen.io/andornagy/pen/xhiJH

А здесь подборка разных: https://freefrontend.com/css-dropdown-menus/

Ответить
Развернуть ветку
Mихаил Масловичев

Реально столько нового узнал как из статьи, так и из комментариев. Тут хотелось спросить, а чем плох Select2 ?

Ответить
Развернуть ветку
Сергей Хохлов

Особенно актуально для мобильного трафика. Плюс если используешь VPN, скорость может совсем упасть. На некоторых сайтах тот же JS используют, как защиту от копирования. Возможно ли совсем отказаться от JS?

Ответить
Развернуть ветку
Natalya Doroshenko

Не замечала, чтобы ролики Youtube тормозили загрузку. Столкнулась с замедленной загрузкой при использовании Opera. Есть какие-то рекомендации конкретно по поводу пользования этого браузера? 

Ответить
Развернуть ветку
Екатерина Чудаева

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

Ответить
Развернуть ветку
марина качалова

Получается, что все браузеры одинаково реагируют на то, как наш сайт ссылается на svg  с набором иконок или все же нет?

Ответить
Развернуть ветку
Паша Черный

Отлично, перевел статью и подставил свои рекламные ссылки, красава!! 👍

Ответить
Развернуть ветку
Тимур Эминович

А есть информация, когда Safari начнет поддерживать webp изображения?

Ответить
Развернуть ветку
Читать все 51 комментарий
null