Встраивание CSS в HTML для скорости страницы

Я пытался оптимизировать скорость своего веб-сайта для Google PageSpeed Insight. Тест скорости жаловался на мои внешние CSS-файлы, поэтому я попытался вложить их в документ HTML, что привело к значительному увеличению скорости передачи сообщений.Встраивание CSS в HTML для скорости страницы

Теперь мои стили CSS не совсем крошечные. Я вложил около 12 Кбайт кода CSS, делая каждую страницу более эффективной на 12 КБ. Поэтому по существу это должно замедлять скорость страницы для всех пользователей, которые просматривают более одной страницы.

Я знаю, что Google рекомендует только создавать «маленькие» таблицы стилей. Я бы не подумал, что 12 КБ будет очень маленьким. Поэтому я действительно не очень доволен этим решением, и я, вероятно, верну свою предыдущую версию.

Есть ли какие-либо рекомендации относительно того, когда устанавливать и когда нет?

Благодаря

источник

2016-02-19 Konstantin

чтобы получить там 100, вам может понадобиться встроить это, я тоже сделал это для 30K-60K IIRC. – YOU

Используете ли вы какие-либо дополнительные таблицы стилей, такие как шрифты Google или любой другой пользовательский внешний лист, который ссылается на фактический URL-адрес? –

Имейте в виду, что если несколько страниц на вашем веб-сайте используют одни и те же стили CSS, это может иметь смысл обслуживать их во внешнем файле, поскольку браузер обычно сохраняет этот файл в кеше и не нуждается в его загрузке снова. Стили стилей эффективно загружают их снова для каждой страницы html. – GavinBrelstaff

Лучший способ использует внешние CSS файлы, но сжимая их, а затем использовать эти сжатую версию. Это значительно уменьшит размер файлов, а также увеличит скорость страницы.

источник

2016-02-19 10:54:06

Спасибо, я думаю, вот что я сделаю. – Konstantin

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

Для получения дополнительной информации ознакомьтесь с документами Pagespeed Insights.

источник

2016-02-19 10:55:20 reinder

Эта тема в настоящее время обсуждается, ребята из Google рекомендуют встраивать над-кратным/критическим CSS в свой HTML, чтобы оптимизировать ваш сайт и иметь быструю начальную краску. Однако это противоречит принципу separation of concerns.

Большая часть вашего CSS остается во внешней сжатой таблице стилей, но некоторые основные большие части вашего макета/заголовки и т. Д. Будут встроены. Вы можете вручную выбрать эти стили или использовать критический генератор CSS like this one

The latest advice from Jake Archibald at Google является встраивать критический CSS, а затем разделить сжатые таблицы стилей в компоненты, которые загружаются, когда сам компонент загружаются в разметке:

<link rel="stylesheet" href="/site-header.css"> 
    <header>…</header> 

    <link rel="stylesheet" href="/article.css"> 
    <main>…</main> 

    <link rel="stylesheet" href="/comment.css"> 
    <section class="comments">…</section>

источник

2016-02-19 11:23:32 Pixelomo

Встраивание CSS в HTML для скорости страницы

ответ

Смежные вопросы