Google PageSpeed Insights : и снова здравствуйте!

Было уже. Раз и два

Тут что-то зашёл снова и приуныл: 52/100.

Виновники по подсказкам – сторонние ресурсы. Причём самого же гугла: шрифт, который я подгружаю и ютюб, который вообще живёт во фрейме и не факт, что юзер его запустит.

Фонт блокирует отображение содержимого, написаного им, пока не прогрузится сам, а ютюб подгружает js код какого-то дикого объёма. Всё это фигачится с разных узлов и тормозит мои страницы.

Надо решать.

font-display : swap

В 2019-ом с фонтом всё оказалось просто. Гугл добавил поддержку конструкции font-display:swap в свой css загрузки шрифта. Инструкция говорит браузеру не дожидаться загрузки шрифта, а отображать текст, следующим по списку шрифтом. Типа некогда ждать, пиши, чем есть, потом перепишем. 😉

Всё, что требуется – это добавить ключ &display=swap при описании шрифта. В моём styles.css это так:

@import url('https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap&subset=cyrillic');

Если теперь открыть этот .css, то увидим инструкцию
font-display:swap. PageSpeed её тоже увидит.

Да, обращение по прежнему идёт на сторонний сайт, но тащить шрифты к себе, делать под них обёртку и вот это вот всё показалось нецелесообразным.

Блокировка страницы из-за YouTube фрейма

Здесь уже приходится делать подъём с переворотом. ;(

Суть рекомендаций в сети: в div блоке отображаем миниатюру нужного видоса, а при клике по нему javascript’ом подменяем картинку фреймом с YouTube-роликом.

Тогда при загрузке страницы не происходит дикий лаг в ожидании прогрузки ютюбовского JS. Он будет грузиться только по требованию юзера, желающего смотреть видос.

Проблема здесь в том, что современные браузеры игнорируют ключ autoplay=1 и не стартуют видос при замене pic на frame. Для запуска видоса приходится дважды жамкать на значок play: для замены pic на frame и второй раз для запуска видоса в этом frame. Это конечно понижает опыт общения юзера с сайтом. ;(

У себя кастомизировал вот этот рецепт

Пока остановился. Всякие метрики и адзисы тоже жрут, но отказаться от них (пока?) не готов.

Полезные ссылки

Минимайзер и бьютификатор всего: html, css, js –
FREEFORMATTER.COM

Упаковщик .png и .jpg файлов – https://tinypng.com

0 0 голоса
Рейтинг статьи

Автор

denglad

IT-каменщик. Во всём по-немногу

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x