Если вы сделали всё возможное, а ваш сайт все еще загружается медленно — возможно, вам мешают ограничения HTTP. HTTP — это протокол передачи гипертекста, системы форматирования, с помощью которой написаны веб-страницы.
И интернет сильно изменился с принятия HTTP 1.1 в 1999 году. Увеличилась доля графического контента, передача аудио- и даже видеофайлов стала обыденным процессом, а язык разметки гипертекста — HTML — превратился в язык программирования, на котором написаны даже некоторые компьютерные игры. Но HTTP по-прежнему использует стандарты 90-х. Это приводит к тому, что веб-дизайнеры и программисты вынуждены применять уловки, просто чтобы обойти ограничения и недостатки HTTP.
Проблемы с HTTP 1.1
Главный недостаток HTTP 1.1 — накладные расходы на передачу информации.
При передаче информации в интернете — например, веб-страницы с сервера к браузеру — она разбивается на части. Эти части называются пакетами. И, согласно HTTP 1.1, браузер запрашивает у сервера каждый пакет отдельно.
Но каждый запрос — это тоже пакет, который передается в обратном направлении. То есть около половины пакетов не приносят никакой пользы клиенту. Каждый пакет обрабатывается дважды — сначала клиентом, потом сервером. Соответственно, из-за обратных пакетов, загрузка страницы происходит в два раза медленнее, чем она могла бы происходить.
И в интернете, скорость загрузки страницы — это очень важно. Исследования Amazon, Walmart и других интернет-гигантов доказали, что пользователи предпочитают сайты, которые загружаются меньше, чем за две секунды.
Решение проблемы
Решить эту проблему и продвинуть интернет в новую эпоху пытались еще в начале 2000-х. По разным причинам, мировое сообщество проигнорировало те решения. Но в 2009 году, два инженера Гугла представили новое решение под названием SPDY. В отличие от радикальных решений прошлого, SPDY — только надстройка над старым протоколом. Он обходит некоторые ограничения HTTP 1.1, но по-прежнему опирается на него.
Преимущества SPDY:
- Множественные одновременные запросы на одном соединении
- Браузер сам устанавливает приоритет загрузки элементов сайта
- Сжатие или полное удаление ненужных компонентов HTTP
- Использование push-технологии, которая сводит число пакетов от браузера к серверу к минимуму
SPDY — решение большинства проблем HTTP 1.1. Но, увы, по-прежнему неофициальное и неоптимизированное решение, которое неоднократно подвергалось критике. Например, его динамическая система стриминга информации была абсолютно беззащитна перед атаками по системе «compressed oracle».
С другой стороны, SPDY доказал, что недостатки HTTP 1.1 можно исправить. И этого было достаточно, чтобы снова начать разговоры о новом стандарте.
В итоге, оптимизированная и дополненная версия SPDY стала основой для HTTP 2.0, или, как его называет Гугл, HTTP/2. Критики, например Пол-Хеннинг Камп, выступали против обязательного TLS шифрования и ненужного дублирования функционала TCP в этом протоколе, но в конце концов стандарт был принят и утвержден.
Как начать пользоваться HTTP/2
Простой ответ — никак. Сначала этот стандарт внедряется на хостинге, и только потом вы на него переходите. Но стоит подготовиться к переходу, чтобы в полной мере воспользоваться улучшениями HTTP/2.
Получите SSL сертификат
Самая главная задача. Даже если вы не переходите на HTTP/2. С января 2017 года, Гугл Хром и основанные на проекте Хромиум браузеры считают сайты без SSL сертификатов «небезопасными». Это значит, что 70% пользователей интернета видят вместо HTTP-сайта ярко-красный экран с предупреждениями о возможной краже личной информации и вирусах.
В HTTP/2, SSL или TLS сертификат нужен для соединений сервера с браузером. Незащищенные HTTP/2-соединения возможны только между двумя серверами, и польза от такого решения сомнительна.
Просмотрите спрайты
Спрайт-листы полезны в HTTP 1.1 — сбор десятков изображений в один файл снижает число HTTP-запросов. В то же время, они требуют большей мощности клиентского ПК и очень хитрого программирования на сайте.
HTTP/2 разрешает передавать несколько файлов по одному TCP-соединению, а значит число изображений на сайте ни на что не влияет. Поэтому можно спокойно распределить их в разные файлы, что облегчит работу с сайтом.
Использование спрайт-листов в HTTP/2 по-прежнему даёт некоторые преимущества— например, уменьшает общий размер изображений. Но назвать спрайт-листы обязательной — или даже рекомендованной — техникой при создании сайта больше нельзя.
Вынесите изображения из CSS
Инструкции по созданию сайтов под HTTP 1.1 рекомендуют вставлять часто используемые изображения — например, логотип сайта — в CSS, используя URI. Это увеличивает размер таблицы стилей, но при этом уменьшает число HTTP-запросов. И передача одного большого файла занимает меньше времени, чем обработка десятков запросов.
Благодаря мультиплексированию и другим нововведениям, в HTTP/2 так делать уже не стоит. HTTP-запросы теперь дешевы в обработке, а значит, изображения в CSS только усложняют работу с сайтом.
Распределите CSS и JavaScript
Одна из противоречивых техник оптимизации — это создание единой таблицы стилей для всего сайта. То есть пользователь, загрузивший только главную страницу получает не только CSS, которая используется на ней, но и CSS для всех остальных страниц. Это позволяет отправить эту таблицу в кеш и избежать повторной загрузки. То же самое можно сделать и с JavaScript.
Причина этого в том, что запросы в HTTP 1.1 — хуже ядерной войны, и лучше один раз скормить пользователю пару мегабайт, чем заставлять его ждать обработки запросов для каждого элемента на сайте.
Опять же, запросы в HTTP 2.0 дешевы в обработке. А значит можно спокойно распределить CSS и JavaScript только на нужные страницы, что увеличит скорость загрузки сайта и упростит работу с ним.
Уберите шардинг доменов
Чтобы снизить нагрузку на сервер, некоторые веб-оптимизаторы предпочитают переносить ресурсы сайта на другие домены. Например, сайт example.com использует шард с изображениями i.example.com и шард с аудио a.example.com, чтобы HTTP-запросы на медиафайлы не перегружали основной хост.
Но HTTP-запросы перестали быть проблемой. Так что можно смело выключить шардинг доменов. А если он нужен — включите умный шардинг, который работает только для пользователей с HTTP 1.1.
TL;DR
HTTP/2 ускорит ваш сайт, но придется подождать, пока хостинг-провайдер перейдет на этот протокол. Чтобы подготовиться к переходу:
- Получите SSL или TLS сертификат.
- Уберите ненужные спрайт-листы
- Вынесите медиа из CSS
- Организуйте CSS и JavaScript по страницам, а не в одном файле
- Настройте умный шардинг или полностью перестаньте им пользоваться
Переходить можно сразу после того, как хостинговая компания начнёт поддерживать HTTP/2. Но если вы хотите убедиться, что это принесет вам пользу — узнайте, поддерживают ли HTTP/2 браузеры ваших пользователей.
В Гугл Аналитике видно, через какие браузеры заходят на сайт пользователи. Майкрософт Эдж, Мозилла Файрфокс, а также Гугл Хром и другие браузеры, основанные на проекте Хромиум, поддерживают HTTP/2.
HTTP/2 не поддерживается Эппл Сафари (как мобильным, так и десктопным), а также стандартным браузером Андроид.