Быстрый сайт — это как?

Быстрый сайт — это когда содержание сайта показывается так быстро, что пользователь не успевает забыть о цели своего визита.

😬

Осторожно, много технических подробностей!

Для этого нужно, чтобы:

1. Сервер ответил на запрос пользователя за 20 мс.
2. Ещё 60 мс на скачивание html и css сайта.
3. Ещё 90 мс на загрузку картинок.
4. И ещё 30 мс на загрузку и выполнение скриптов.

Если сайт загружается за 200 мс, то пользовательский опыт (User Experience) будет определяться исключительно содержанием сайта. А если сайт загружается дольше 3 секунд, то 53% пользователей просто покинут его, согласно исседованию Google, проведённому в 2017 году. И хотя это не самое новое исследования, нет никаких оснований думать, что в 2022 году пользователи будут ждать дольше, чем в 2017.

13 технических фишек, которые ускорят сайт

1. Тонкая настройка сервера. Если после старта сайта исходный код не меняется, то на nodejs можно отключить обращение к жёсткому диску при каждом динамическом import`е.
2. Использовать преимущества протокола HTTP/2. Мультиплексирование позволяет отказаться от общих bundle`ов из стилей и скриптов. У каждой страницы только свои стили и скрипты.
3. HTTP/2 Server Push — всё, что может блокировать загрузку страницы, должно быть отдано сервером вместе с первым запросом.
4. Использование технологий AJAX и SSR в купе с концепцией 2000-х годов “Тонкий клиент”.
5. Использование HTTP кэша public, при сохранении лазейки для сброса кэша после обновлений сайта с технологией Service Worker или с добавлением версий в адреса файлов.
6. Современные форматы изображений WebP, AVIF, JPX, а лучше SVG. Для видео WebM.
7. Загрузка картинок после попадания их в поле зрения с атрибутом loading lazy. В галереях с больши количеством иллюстраций, до взаимодейтсвия, загружать только одну или две картинки, а для остальных использовать атрибут data-src.
8. Отложенная загрузка некоторого css с помощью preload и onload.
9. Media Queries для показа иллюстраций разных размеров, в зависимости от размера экрана на устройстве пользователя.
10. Чистый модульный код HTML, CSS, нативный Javascript. Никаких лишних библиотек.
11. ES6 и нативные шаблонные строки. Literal Templates позволяют отказаться от внешнего шаблонизатора. А nodejs позволяет использовать один Literal Template - шаблон на клиенте и сервере.
12. Сначал запускаем посетителя на сайт, а потом его считаем, никак не наоборот. Системы статистики ставят точность подсчёта во главу угла и, буквально, не пускают посетителя на сайт пока его не посчитают — конечно же это не дело, счётчики должны быть после контента.
13. Ответ сервера должен архивироваться gzip или brotli.

Ну и если всё сделано хорошо, то тест Google Speed будет в зелёной зоне.