Многие из нас проводили аудит скорости сайта, или видели аудиты, сделанные другими. Обычно мы используем хорошо известные инструменты, показывающие кучу ошибок, которые в итоге нам необходимо исправить.

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

Другой угол зрения на оптимизацию изображения

Рассмотрим оптимизированные SVG вместо PNG

Я недавно искал где можно забронировать билеты, чтобы посмотреть Frozen 2. Так я попал на одну из страниц, которая использует три изображения SVG для иконок:

Изображения SVG – это векторные изображения, поэтому они хорошо подходят для таких элементов, как иконки. Использование SVG может сэкономить 60% от размера файла.

В данном случае, такие значки имеют по 1,2 КБ каждый, поэтому они довольно малы. Вы можете подумать: «они меньше, чем 5 КБ вместе взятые — необходимо искать более важные проблемы!». Можно пропустить их все через инструмент сжатия SVG Джейка Арчибальда. Этот инструмент сжимает картинки без какой-либо потери качества от ~1240 байт до ~630 байт.

Встроенные изображения

Даже загрузка очень маленького файла изображения может занять много времени из-за задержки между запросом и ответом. Я смоделировал 3G-соединение и увидел следующее:

Сайт не использует HTTP2, поэтому загрузка изображения, даже 1,2 КБ, займет почти 600 мс. После сжатия, изображения имеют всего несколько сотен байт каждое, и изображения SVG фактически состоят из разметки аналогично HTML:

Вывод: проверьте, где возможно использовать SVG вместо PNG. Небольшие встроенные изображения могут увеличить производительность.

Подвинься JavaScript! С этим может справиться HTML

В настоящее время библиотеки JavaScript предлагают готовые решения для работы сайта. Но некоторая функциональность может быть достигнута и без JavaScript. Больше библиотек JS означает больше времени для загрузки. Рассмотрим несколько примеров использования HTML и / или CSS.

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

Выпадающие окна, которые имеют опцию текстового поиска, являются довольно распространенным элементом интерфейса.

Библиотека Select2 основана на JQuery и ссылается на некоторые файлы CSS. Это означает, что даже для простого элемента в интерфейсе, необходимо подгрузить несколько файлов различных размеров:

• JQuery-101kb
• Select2 JavaScript-24kb
• Select2 CSS-3kb

Однако, данная функциональность может быть реализована при использовании HTML, с помощью тега <datalist>:

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

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

У LonelyPlanet есть прекрасный сайт, и я, просматривая страницу об Испании, обратил внимание на кнопку «Подробнее». Как обычно, она была реализована при помощи библиотеки JavaScript.

Тем не менее, в HTML есть пара встроенных тегов, <details> и <summary>, которые позволяют сэкономить время загрузки страницы. Эти теги можно стилизовать различными способами с помощью CSS и воссоздать большинство версий JS.

Вывод: изучите функциональность ваших сайтов и посмотрите, где можно уменьшить зависимость от больших библиотек Javascript и воспользоваться опциями HTML/CSS. Помните, что проблема заключается не только в размере файлов JS, но и в количестве необходимых запросов-ответов. Чрезмерное использование JS – только замедляет индексацию сайта

Сетевые настройки

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

TLS 1.3

TLS (или SSL) – это технология шифрования, которая используется для защиты HTTPS-соединений. Так сложилось, что для настройки этого шифрования требуется два раунда обращений между браузером и сервером — если пользователь находится на расстоянии 50 мс от сервера, то это означает 200 мс для соединения. Имейте в виду, что Google рекомендует стремиться к 200 мс для загрузки HTML.

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

QUIC / HTTP 3

За последние 2-3 года мы видели, как ряд сайтов перешли с HTTP 1.1 на HTTP 2, что является закулисным обновлением, но в то же время, может существенно повлиять на улучшение скорости.

Сразу после этого появилась пара стандартов, известных как QUIC + HTTP / 3, которые еще больше оптимизируют соединение между браузером и сервером, еще больше сокращая количество необходимых циклов. Главное преимущество использования данного протокола — практически мгновенное соединение и минимальная задержка между запросом и ответом.

QUIC + HTTP / 3 только начинают получать поддержку, но если вы являетесь клиентом CloudFlare, то вы можете уже сейчас воспользоваться ними, и в течение ближайших 6 месяцев, когда Chrome и Firefox развернут полную поддержку, ваши пользователи получат прирост скорости.

Вывод: TLS 1.3 теперь очень широко поддерживается и предлагает значительное повышение скорости для новых соединений. QUIC включает в себя преимущества TLS 1.3, а также многое другое. Типичное соединение HTTP2 в настоящее время требует 3 раунда, чтобы соединиться, а QUIC необходим только один!

Пусть CSS сделает больше

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

Повторное использование изображений

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

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

Другой пример – когда один и тот же логотип появляется в разных стилях в разных частях страницы. Часто загружается несколько вариантов, что не обязательно. CSS может перекрасить логотипы различными способами:

Взаимодействие (например, меню и вкладки)

Часто элементы навигации, такие как меню и вкладки, реализованы в JavaScript, но они также могут быть выполнены и в чистом CSS.

Анимации

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

Вывод: используйте CSS для оптимизации файлов, которые вы загружаете на сайт. CSS-анимации могут добавлять символы на страницы и часто требуют меньше ресурсов, чем JavaScript.