SEO
Пиксель Тулс
6383

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

Том Энтони из 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-инструменты пригодятся?

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Пиксель Тулс", "author_type": "self", "tags": ["\u043f\u0435\u0440\u0435\u0432\u043e\u0434","\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f","seo"], "comments": 38, "likes": 30, "favorites": 183, "is_advertisement": false, "subsite_label": "seo", "id": 101151, "is_wide": false, "is_ugc": true, "date": "Wed, 15 Jan 2020 10:01:36 +0300", "is_special": false }
Создать объявление на vc.ru
Сервисы
Куда уходят клиенты конструкторов сайтов
Чаще всего мигрируют с Wix на Tilda, клиенты «Платформы LP» переходят на Creatium, а «Битрикс 24» и Tilda обмениваются…
0
{ "id": 101151, "author_id": 313674, "diff_limit": 1000, "urls": {"diff":"\/comments\/101151\/get","add":"\/comments\/101151\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/101151"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199127, "last_count_and_date": null }
38 комментариев
Популярные
По порядку
Написать комментарий...
8

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

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

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

Ответить
2

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

Ответить
5

Потому что проблема, которую решал jquery решена по-другому.

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

Ответить
1

потому что слишком толсто тянуть его целиком из-за пары функций(а чаще всего именно так), которые можно написать на нативном js в почти то же количество строк.

да, если юзать с cdn, то скорее всего у юзера он уже будет загружен, но "тянуть" не всегда допустимо(финсервисы например).

Ответить
1

Кэш — это миф. Быстро протухает, большой разброс версий. А если сторонний ресурс отвалится (что нередкость с ковровыми бомбардировками блокировок Роскомнадзора, скажем), то вообще всё сломается. Минимум половина запросов не попадают в кэш.

Ответить
0

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

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

Ответить
0

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

Ответить
0

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

и когда узнавали, что нужен пару каналов по 100мбит(а то вдруг один провайдер упадет) = уже хорошие затраты на инет для юриков + нужно сервер обслуживать и рейд поставить(а то вдруг жесткий посыпется), нужно ИБП несколько и тп, отказывались и молча шли на hetzner, который при прочих равных стоил в десятки раз дешевле. учитывая, что купленное за шестизнаковые суммы оборудование превратится в тыкву через год-другой.

всё очень относительно даже про РКН.

если речь про ip, то проще взять ip и прокидывать запросы. если про домен - сами виноваты и никто вас не спасёт. CF банили оч давно и это был epic fail, зачем банить cdnjs.com или других - не понимаю. кеш их либ(например, jq) хранится гораздо дольше чем вы думаете и загружать его при заходе на каждый сайт было бы нелепо. кеш, к слову, один из ключевых помощников в highload - memcached, redis, тот же nginx, cf. так что, вы не очень правы с предрассудками и мыслями про РКН.

Ответить
0

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

Ответить
–1

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

Ответить
0

Непонятно. И чем же браузеры заменяют jquery? 

Кажется, вы путаете с фреймворками, которые строят виртуальный dom.

Ответить
1

API браузеров имеет практически те же возможности, что и jQuery с изобретения метода `querySelector`, который работает в браузерах со времен IE9.

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

Ответить
0

Все-таки я думаю, что jquery - это не только супермедленный поиск элемента в DOM.

Ответить
1

А что еще? Интересно прям :)

Ответить
0

Вообще, виджеты (jquery ui). Но если чисто jquery, то создание/удаление элементов, перетасовка их, клонирование, вычисление размеров, манипуляции с классами и стилями, события, перемещение элементов через offset, анимации, фокусы-расфокусы разные.

Ответить
1

Это и есть работа с DOM. Откройте для себя удивительный мир 2020 года и отправьте jquery за правительством наконец

Ответить
0

Работа с DOM, но не только поиск.

Спасибо за совет, только непонятно, к чему, в современных проектах jquery нет

Ответить
0

И правда, а что ещё вам нужно в jQuery?

Ответить
0

а что вам мешает работать с dom в чистом js? на полторы строчки больше кода, на гигабайты меньше грузить вашим юзерам. если у вас от jq только работа с dom, то смысла нет от слова совсем. да, килобайты экономии, но если мы говорим про оптимизацию - это достаточно много.

Ответить
0

Так и я об этом)

jQuery не нужен

Ответить
0

Ниже уже ответили.

Ответить
8

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

Ответить
4

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

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

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

Ответить
2

JS виджеты лучше грузить по клику.

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

Ответить
1

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

Ответить
1

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

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

Ответить
0

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

Ответить
0

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

Ответить
2

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

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

Ответить
0

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

Ответить
1

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

Ответить
0

спасибо, попробую

Ответить
0

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

Ответить
0

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

Ответить
0

Скорость загрузки не влияет на позиции возьмите например авито

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }