Тут что-то зашёл снова и приуныл: 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
