1
Оптимизация изображений
- Отложенная загрузка изображений
- Обрезка до нужных размеров
- Отдельные размеры фото для мобильной версии
- Оптимизация компрессии
- Удаление метаданных
2
Настройка кеширования
- Настройка кеширования статических файлов в браузере
- Кеширование собранных HTML-страниц на сервере
- Service-worker. Позволяет пользоваться сайтом при обрыве интернет-соединения
- CDN (кеширующий прокси-сервер)
3
Сжатие отправляемых данных
G-zip сжатие для HTML, CSS, JS
4
Critical rendering path
- Стили собираются в один файл и минифицируются.
- JavaScript собирается в один файл, минифицируется и переносится в самый низ страницы.
5
Ускорение работы JavaScript
- Сильно нагруженные участки (скролл, движения мыши, циклы) переписываются на чистом JavaScript.
- Passive Event Listeners. Если на скролл навешены обработчики то браузер прокручивает страницу не дожидаясь выполнения кода JavaScript.
6
Подключение шрифтов
- Если шрифты подключены через CDN (google fonts к примеру), то запрос к CDN кешируется и вставляется непосредственно в HTML-код страницы. Полученный CSS обновляется раз в сутки через cron.
- Отключение блокировки отображения шрифтов во время загрузки страницы (пока подключенные шрифты не загружены, текст на сайте не скрывается, а рендерится системными шрифтами)
7
Предварительный “прогрев” соединений к сторонним серверам.
К примеру, если у нас грузятся шрифты из google fonts и видео из youtube, то браузер соединяется с этими серверами еще до того, как встретит в коде подключение шрифтов и видео. Таким образом экономится время на поиск нужного сервера в сети.