Как правильно оптимизировать страницу?

Question

[John Johnson]

Подскажите какие вы действия совершаете чтобы страница грузилась быстрее ?По стеку ничего кроме js html css.
Я сейчас не имею ввиду сложные циклы в JS которые тормозят страницу.
Если есть чем добавить список , напишите пожалуйста.

1. Ужать картинки
   
2. Минифицировать JS/CSS
   
3. Минифицировать ХТМЛ-код
   
4. Для изображений можно использовать лейзи лоад либу
   
5. Разбить CSS файлы на основные стили и включить в страницу тегом style, вторичные стили - вынести в файл(ы) соотв.
   
6. Настроить проверку на то, поддерживает ли браузер формат WEBP и если поддерживает - отдавать картинки в этом формате.
   
7. Настроить проверку на то, поддерживает ли браузер формат WEBP и если поддерживает - отдавать картинки в этом формате.Здесь возможно не имеет смысле если используется лейзи лоад
   
8. создать и настроить изображения разного размера для разных экранов
   
   

Comments

[Александр Епихин]

Все верно.
4) Либа не нужна.
5) В страницу включить стили для первого экрана. А остальные подключить так:

6) На PHP это можно сделать так:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false || strpos( $_SERVER['HTTP_USER_AGENT'], ' Chrome/' ) !== false ) {
//
}

7) Всегда имеет смысл. Изображения стоит подгружать по требованию. Слушать событие скрол и перед тем как изображение появится во viewport только тогда стоит подгружать это изображение. Это так же относится и к фоновым изображениям.
Если мобильного трафика много, то как можно меньше js

[Одиночка Айс]

Александр Епихин, тостер забраковал ваш код

[Александр Епихин]

А так? stackoverflow.com

Answer 1

[Даниил Братухин]

+ Cache-Control
+ prefetch/preload
+ Service Worker (доп. бонус – js хранится в скомпилированном виде)
+ сервер поближе к ЦА
+ font-display: swap

Оптимизировать стоит не столько фактическую скорость загрузки страницы, сколько воспринимаемую. Т.е. если страница открывается моментально, но с заглушками, то пользователь всё равно не будет считать страницу загруженной до появления содержимого. Поэтому к первому экрану часто специально не применяют lazyload, например.

А вообще да, пользуйтесь аудитами в Chrome DevTools, очень удобно :)

Comments

[alex-1917]

Оптимизировать стоит не столько фактическую скорость загрузки страницы, сколько воспринимаемую.

студенческий бред.
если в гугл-инсайд будет не зеленая зона, вашу хоум-педж имени васи пупкина никогда и никто не увидит...

[Даниил Братухин]

alex-1917, работа над perceived performance включает в себя оптимизацию фактического времени загрузки страницы. Целью при этом является комфорт человека, а не поискового робота – то, о чём раз за разом пишет Google в рекомендациях по SEO. Не понимаю, откуда такая реакция.