Том Энтони из 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 способов уменьшить скорость загрузки ваших страниц.
Оптимизируешь такой, оптимизируешь... тут сжал, там асинхроночка, здесь почистил зависимости... а потом ХЕРАКС — приходит эффективный менеджер-аналитик, который впендюривает кучу трекеров и другого говна в GTM так, что твой сайт начинает лагать даже на мощной девелоперской машине...
А теперь идем на caniuse и понимаем, что JS вариант не так уж плох.
Про details/summary - не понятно что вообще там экономить. Две строчки кода?
Про Select2 - тут скорее проблема тех, кто его тянет по каждому поводу. Реализовать минимально необходимый подобный функционал можно гораздо меньшим кодом. Ну и без jQuery, от которого не убегает сейчас только ленивый.
строчка про jQuery немного обидная... почему в данное время я часто стал замечать информацию про избежание данной библиотеки ?
Спасибо за статью.
Я бы добавил еще:
1. JS виджеты лучше грузить по клику. Например многие виджет-чаты запускаются хоть и асинхронно, но это все равно попадает в load (бывает сервер чата отвечает долго или вообще может отдать 50Х ответ). Поэтому лучше отверстать иконку чата SVG и запускать JS чата только по клику или вообще после load.
2. Также мало кто об этом говорит, но мобильный трафик уже давно преобладает, а скорость интернета ниже, поэтому лучше изолировать версии. То есть если пользователь заходит на сайт с мобильного устройство, то можно отдать отдельную облегченную версию (не адаптировать и не бустрапить), а именно отдельный CSS и JS конкретно для мобильных устройств (они всегда будут меньше весить).
3. Статичные блоки лучше кешировать на сервере. В некоторых случаях можно даже держать в кеше на сервере готовую страницу, чтобы сразу ее отдать, что сильно уменьшает TTFB.
4. Ну и самое главное, все сторонние JS лучше не использовать асинхронно. Потому что асинхронность хоть и грузит файл JS не останавливая парсинг, но при отработке останавливает его. Поэтому лучше использовать либо пост загрузку, либо defer загрузку.
Мог бы добавить еще много чего, но каждый проект индивидуален и надо смотреть на точки роста. Возможно где-то нужен CDN, где-то отдельно догружать блок на который php (или другой язык программирования) тратит много времени тормозя генерацию страницы на сервере. А иногда вообще бывает тупо загвоздка в большом количестве запросов, если можно, то лучше уменьшать.
Мы так делаем с подгрузкой ютуб-видео. Блок с плеером накрывается картинкой-превьюшкой, код плеера начинает грузиться по клику на нее. Сразу же минус 1мб к весу страницы.
С картами встроенными что делать?
lazy load. Либо загружать через 3-5 секунд после load.
Либо так https://sitehere.ru/optimizaciya-zagruzki-yandeks-karty-na-sajte
Однозначно в закладки. Спасибо за статью!
Экономия на спичках. Это нужно иметь ну ОЧЕНЬ неадекватное количество иконок, чтобы начать на них экономить. Или очень большео количество мелких запрограммированных элементов.
А на деле, сколько бы вы не оптимизировали свои спички - два ролика с ютуба через фрейм - и страница уже загружает существенно дольше. Поможет вставка не фрейма, а загружать только превьюху в <img>. Ну и сделать их всех скриптов и css (а это 20-50 в современных сайтах) - 2-3 подключаемых файла.
Когда борешься за "каждое очко", то борьба за каждый кб не кажется такой уж плохой.
Скорость загрузки моего сайта сильно тормозит яндекс метрика и что я только не пробовал - результат не особо отличается от предыдущего. При этом метрика обязательно нужна
попробуйте вебвизор отключить. у нас были тормоза из за него, если память не изменяет.
Я поставил на отложенную загрузку и проблемы нет. Данные немного не точные, не попадают только те, где пользователь провел 3-5 секунд на сайте. Мне как бы эти данные и не нужны)
И вы сидите и думаете, что на старом проекте либо переделывать всю верстку или сам проект
Который не факт что будет быстрее^^
По опыту, если вёрстка не сделана по хорошим практикам (а ля с БЭМом), то если это не какое-то сложное приложение, проще будет переписать.
Лучше написали бы что с видео делать на сайте, а не такие килобайты. На современных сайтах в слайдере на главной заказчики видео сейчас ставят, что тянет за собой ютуб и все сопутствующие проблемы со скоростью. Или если использовать mp4 файл то как минимум +10 Мб к загрузке.
Иван, с видео на сайте (особенно на главной) нужно сделать следующее - У Д А Л И Т Ь.
Либо принять, что есть HTML5 с нормальной буферизацией.
Вот вам пример https://sitehere.ru/kak-sdelat-video-fonom-sajta-videostoki
Подскажите, где можно посмотреть готовые шаблоны выпадающих меню при помощи CSS?
Ловите самый простой вариант: https://codepen.io/andornagy/pen/xhiJH
А здесь подборка разных: https://freefrontend.com/css-dropdown-menus/
Реально столько нового узнал как из статьи, так и из комментариев. Тут хотелось спросить, а чем плох Select2 ?
Особенно актуально для мобильного трафика. Плюс если используешь VPN, скорость может совсем упасть. На некоторых сайтах тот же JS используют, как защиту от копирования. Возможно ли совсем отказаться от JS?
Не замечала, чтобы ролики Youtube тормозили загрузку. Столкнулась с замедленной загрузкой при использовании Opera. Есть какие-то рекомендации конкретно по поводу пользования этого браузера?
А как же объяснить, что слишком медленный вайлдберриз всегда на первой странице по любому шмоточному запросу. И вот сидишь ты, ищешь и страдаешь)
Получается, что все браузеры одинаково реагируют на то, как наш сайт ссылается на svg с набором иконок или все же нет?
Отлично, перевел статью и подставил свои рекламные ссылки, красава!! 👍
А есть информация, когда Safari начнет поддерживать webp изображения?