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, то браузер з’єднується з цими серверами ще до того, як зустріне в коді підключення шрифтів і відео. Таким чином економиться час на пошук потрібного сервера в мережі.