Даже если сократить размер трафика (шаблоны, картинки, CSS, JS) всех сайтов мира в 2 раза, провайдеры этого скорее всего не заметят: подавляющая часть это видео и голос, сайты даже рядом не стояли.
В тестирование фронтэнда стоит добавить главный инструмент: средства разработчика браузера. Например, в Chrome можно получить полный расклад по ресурсам с полной детализацией (вплоть до отрисовки каждой области экрана). Собственно, Lighthouse уже входит в DevTools.
Галерея выглядит как надо. Подгружающиеся стили отвечают за открывание большой версии фото по клику.
Размер может быть от 10kb до 100kb, если это несколько плагинов.
Здесь дело не только в размере, но в приоритете загрузки CSS — он очень высокий (в отличие от картинок). Кроме того, CSS блокирует рендеринг страницы целиком, если объявлен в head.
Не надо ничего вычленять. Представьте, что у вас на сайте используется фотогалерея (fancybox, lightbox не важно), у нее есть свой CSS (для слоёв и анимаций). Так вот его абсолютно спокойно можно грузить потом, никаких проблем.
Вы здесь путаете расположение CSS в середине кода страницы и то, о чём говорится в статье: отложенной загрузке CSS через JS.
К описанным выше проблемам при правильном применении отношения не имеет.
Правильно, не нужно откладывать весь CSS-код.
Нужно делать с умом: только для тех стилей, которые не критичны для начального состояния страницы. Их подгрузка будет происходить незаметно для пользователя.
Причин много. Например, разработчики, которые не обращают внимание на скорость при разработке. На Macbook Pro по локалке бегает нормально.
Или дизайнеры и менеджеры, которые требуют максимум контента с эффектами и рекламы на страницу.
Использовать Google Pagespeed Insights можно, только, если понимаешь, что он тестирует. Для новичков часто эта оценка становится слишком важной и они пытаются изо всех сил её увеличить.
Например, GPSI вообще не меряет время загрузки страницы (ни start render, ни load), а это важнейшие метрики.
Размер может быть от 10kb до 100kb, если это несколько плагинов.
Здесь дело не только в размере, но в приоритете загрузки CSS — он очень высокий (в отличие от картинок). Кроме того, CSS блокирует рендеринг страницы целиком, если объявлен в head.
К описанным выше проблемам при правильном применении отношения не имеет.
Нужно делать с умом: только для тех стилей, которые не критичны для начального состояния страницы. Их подгрузка будет происходить незаметно для пользователя.
Во-вторых, это не обзязательно приводит к перерисовке страницы.
Или дизайнеры и менеджеры, которые требуют максимум контента с эффектами и рекламы на страницу.
Например, GPSI вообще не меряет время загрузки страницы (ни start render, ни load), а это важнейшие метрики.