Веб-медленно, но есть несколько простых стратегий, чтобы сделать веб-сайты быстрее.
Одним из них является встраивание критического CSS в <head> вашего pages, пока, как именно вы это делаете, если ваш сайт содержит сотни страниц, или еще хуже, сотни различных шаблонов?Вы can’ т сделать это вручную.Дин Юм объясняет простой способ, чтобы сделать это.Если you’ повторно опытный веб-разработчик, вы можете найти в статье очевидны и понятны, но it’ са хороший кусок, чтобы показать вашим клиентам и младших разработчиков наверняка.- Ред .
Доставка быстрый, плавный веб-опыт является важной частью создания веб-сайтов сегодня.Большую часть времени, мы разрабатываем сайты, не понимая, что браузер на самом деле делает под капотом.Как именно браузер оказывать нашим веб-страниц из HTML, CSS и JavaScript, что мы создаем?Как мы можем использовать это знание, чтобы ускорить рендеринг на нашем веб pages
Если я ищу быстро повысить производительность веб-сайта, Google’ с PageSpeed Insights 1 инструмент первое место, я иду.Это может быть очень полезно при попытке к профилю веб-страницу и найти области для улучшения.Вы просто вводите URL страницы, на которой вы хотите проверить, и инструмент дает вам список предложений производительности .
Если вы когда-либо запустить один из ваших собственных веб-сайтов с помощью инструмента PageSpeed Insights, вы, возможно, столкнетесь следующей предложению .
2 Я должен признаться, я впервые увидел это, я был немного смущен.Предложение гласит:
“Ни один из выше-на-кратным содержанием на вашей странице не могла быть оказана, не дожидаясь следующих ресурсов для загрузки.Попробуйте отложить или асинхронно загружать блокирования resources или встроить критические части этих ресурсов непосредственно в HTML “.
К счастью, решение этой проблемы является более простым, чем кажется!Ответ заключается в том, как CSS и JavaScript загружаются в веб-страницы .
Что такое Критическая CSS
Запрос файла CSS может значительно увеличить время, необходимое на веб-страницу, чтобы оказать.Причина в том, что по умолчанию браузер будет задерживать Страница рендеринг, пока он не имеетзавершения загрузки, разбора и выполнения всех CSS файлов, на которые ссылается в <head> вашей страницы.Он делает это, потому что это нужно рассчитать макет страницы .
К сожалению, это означает, что если у нас есть действительно большой файл CSS, и это занимает время, чтобы скачать, наши пользователи будут в конечном итоге ждать, пока Весь file не был загружен до браузере может начать оказывать страницу.К счастью, есть трусливый метод, который позволяет нам оптимизировать доставку нашей CSS и смягчения блокирование.Этот метод известен как оптимизируя критического пути рендеринга . 4
Критический путь рендеринга представляет шаги, которые браузера требуется, чтобы отобразить страницу.Мы хотим, чтобы найти минимальный набор блокировки CSS, или критического | CSS__3, что мы должны сделать страницы появляются пользователю. Критическая resource является любой ресурс, который может блокировать первоначальный рендеринг страницы.Идея заключается в том, что веб-сайт должен получить первый screen’ ы ценность контента (или “ выше в-fold” содержимому) пользователю в течение первых нескольких TCP пакетов ответ.Чтобы дать вам краткое представление о том, как это будет работать на веб-странице, взгляните на изображение ниже .
5 В приведенном выше примере, критическая часть веб-странице только , что пользователь может видеть, когда они сначала загрузить page.Это означает, что нам нужно только загрузить минимальное количество CSS, требуемую для визуализации верхнюю часть страницы во всех контрольных точек.Для остальной части CSS, нам не нужно беспокоиться, как мы можем загрузить его асинхронно .
Как определить, что считается критическим CSS?Определение критической CSS для страницы является довольно сложным и требует, чтобы вы пройти через веб-page’ сек DOM.Далее, мы должны определить список стилей, которые в настоящее время применяются к каждому элементу в поле зрения.Делать это вручную будет утомительный процесс, но есть много больших инструментов, которые будут делать это автоматически .
В этой статье я собираюсь показать вам, как улучшить вашу скорость рендеринга веб-страницы с помощью CSS критической, и показать вам инструменткоторые помогут вам сделать это automatically .
Критическая CSS В Action
Для начала работы с критической CSS для нашей веб-странице, мы должны изменить наш подход к тому, как мы обращаемся с CSS — это означает, расщепление его в двух файлах.В первом файле, мы извлекаем лишь минимальный набор необходимых CSS оказать выше раза содержание, а затем мы встроить его в веб-страницы.Для второго файла, или некритического CSS, мы асинхронно загрузить его так, чтобы не блокировать веб-страницы .
Это может показаться немного странным на первый, но встраивание критического CSS в нашем HTML, мы можем исключить дополнительный круглый поездки в критическом пути.Это позволяет нам поставлять критическую CSS в одном туда-обратно и представить что-то для пользователей как можно скорее .
Для того чтобы понять, что это может выглядеть, как представлено HTML, ниже код дает простой пример .
<!doctype html>
<head>
<style> /* inlined critical CSS */ </style>
<script> loadCSS('non-critical.css'); </script>
</head>
<body>
...body goes here
</body>
</html>
В приведенном выше коде, мы извлечения критической CSS и встраивание его в HTML между style тегов.Далее, мы используем loadCSS(); функцию асинхронно загружать оставшиеся, некритичные CSS.Это важно, потому что мы, по существу, разгружая громоздкий ( Номера | critical__13) CSS и инъекционных его в веб-страницы в фоновом режиме .
Во-первых, это может показаться кошмаром для поддержания.Почему бы вам вручную хотите встроить фрагмент CSS на каждой странице?Существует хорошая новость, хотя — процесс может быть автоматизирован и в данном примере, я собираюсь работать через инструмент под названием Critical 7 .Первоначально созданный Адди Osmani 8 , это пакет Node.js, что позволяет автоматически извлекать и встроенный критического пути CSS в HTML страницах .
Мы собираемся объединить это с Grunt __32 | | 9__17 , задача второе место наличие автоматически обрабатывать CSS.Если вы никогда не использовали Гранта раньше, веб-сайт имеет некоторые очень Подробное documentation __38 | | 10__17 , а также различные советы по настройке вашего проекта.Я также ранее | blogged__17 __44 | | 11__17 об этом удивительном инструменте .
Получение Started
Let’ начнем путем обжига консоль Node.js и навигации в пути вашего сайта.Установите интерфейс командной строки Грунт, введя следующую команду в консоли:
npm install -g grunt-cli Это позволит поставить grunt команды в системном пути, что позволяет запускать излюбой каталог.Затем установите целевую бегун Грунт с помощью следующей команды:
npm install grunt --save-devЗатем установите тяжелую-critical 12 | __7 плагин .
npm install grunt-critical --save-devДалее необходимо создать Gruntfile, содержащий конфигурацию задач для вашего проекта.Шахта выглядит немного как код ниже .
module.exports = function (grunt) {
grunt.initConfig({
critical: {
dist: {
options: {
base: './'
},
// The source file
src: 'page.html',
// The destination file
dest: 'result.html'
}
}
});
// Load the plugins
grunt.loadNpmTasks('grunt-critical');
// Default tasks.
grunt.registerTask('default', ['critical']);
};В приведенном выше коде, я настроен | Critical__13 плагин, чтобы взглянуть на | page.html__15 файла.Это будет затем обработать CSS против данной странице и рассчитать критическую CSS.Далее, он будет встраивать критического CSS и обновить страницу HTML соответственно .
Запуск плагина, набрав grunt в консоли .
13 Если вы перейдете в папку, теперь вы должны заметить файл с именем | result.html__15, содержащий критическую встроен CSS и оставшиеся CSS загружалась в асинхронном режиме.Ваш веб-страницы теперь готов к рок-н-ролл
За кулисами, этот плагин на самом деле использует PhantomJS __43 | 15 , без головы WebKit-браузер, чтобы захватить нужный критический CSS.Это означает, что в состоянии молча загружать веб-страницы и тест для оптимального критического CSS.Эта функция также дает гибкость плагин, когда дело доходит до различных размеров экрана.Например, вы можете предоставить различные размеры экрана и плагин захвата и встроенные критического CSS соответственно .
critical: {
dist: {
options: {
base: './',
dimensions: [{
width: 1300,
height: 900
},
{
width: 500,
height: 900
}]
},
files: [
{src: ['index.html'], dest: 'dist/index.html'}
]
}
}Код выше будет обрабатывать данный файл от нескольких измерениях и встроенный соответствующий критический CSS.Это означает, что вы можете запустить свой сайт в отношении ряда экранных шириной и убедитесь, что ваши пользователи будут иметь тот же опыт во всем.Как мы знаем, мобильные соединения, использующие 3G и 4G может быть слоеное в лучшие времена — вот почему этот метод так важно для пользователей мобильных телефонов .
Использование критических в производстве Environment
Использование инструмент, как важным является отличным способом для автоматического извлечения и встроенные критического CSS без изменения, как вы развивать свои веб-сайты, но как это вписывается в реальном мире?Чтобы поставить вновь обновляются файлы в действии, вы просто развернуть, как обычно — ничего не нужно менятьна производственной среде.Вам нужно только помнить, что вам нужно будет запустить Грунт каждый раз вы строите или вносить изменения в CSS файлов .
Образцы код мы проходят через в этой статье покрыли использование одного файла, но то, что происходит, когда вы должны Процесс критического CSS для …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров