Понятие критически важного CSS (Часть 2)

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

Давайте начнем с запуска консоли Node.js и перехода к пути к вашему сайту. Установите интерфейс командной строкой Grunt, введя следующую команду в консоли:

npm install -g grunt-cli

Это введет команду grunt в ваш системный путь, позволяя его запускать из любой директории. Далее, установите менеджер задач Grunt с помощью следующей команды:

npm install grunt --save-dev

После этого установите плагин grunt-critical.

npm install grunt-critical --save-dev

После этого вам нужно создать файл 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, чтобы он заглядывал в файл page.html. После этого он будет обрабатывать CSS для определенной страницы, и рассчитывать критически важный CSS. Далее, он встроит критический CSS и обновит страницу HTML соответствующим образом.

Запустите плагин, введя grunt в консоли.

Если вы перейдете в папку, вы теперь заметите файл под названием result.html, содержащий встроенный критически важный CSS и остальной CSS, загружаемый асинхронно. Теперь ваша страница готова разогнаться!

Чтобы найти необходимый критически важный CSS, внутри этот плагин на самом деле использует PhantomJS, WebKit браузер без заголовков. Это означает, что он способен тихо загружать вашу страницу и тестировать оптимальные критичные таблицы стилей. Этот функционал также обеспечивает плагину гибкость в том, что касается различных размеров экранов. Например, вы можете указать разные размеры экранов, а плагин найдет и встроит критически важный 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 может быть очень слоистым даже в лучшие времена поэтому эта техника так важна для мобильных пользователей.

Использование Critical в рабочей среде

Использование инструмента вроде Critical это отличный способ автоматически извлечь и встроить критически важный CSS без необходимости изменять способ разработки сайтов, но как это воплощается в реальном мире? Чтобы заставить обновленные файлы работать, вы просто развертываете все обычным способом в вашей рабочей среде не нужно ничего изменять. Только помните, что вам придется запускать Grunt каждый раз при создании или изменении файлов CSS.

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

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
       },
       {
        width: 500,
        height: 900
      }]
    },
    files: [
      {src: ['index.html'], dest: 'dist/index.html'},
      {src: ['blog.html'], dest: 'dist/blog.html'}
      {src: ['about.html'], dest: 'dist/about.html'}
      {src: ['contact.html'], dest: 'dist/contact.html'}
    ]
  }
}

Также вы можете запустить задачу по каждому HTML-файлу в определенной папке, используя следующий код:

critical: {
  dist: {
    options: {
      base: './',
      dimensions: [{
        width: 1300,
        height: 900
      },
      {
        width: 500,
        height: 900
      }],
      src: '*.html',
      dest:  'dist/'
    }
  }
}

Приведенные выше примеры кода демонстрируют, как можно этого добиться на вашем сайте.

Тестирование

Как и всегда, тестирование любых новых изменений является крайне важной составляющей. Если вы хотите протестировать свои изменения, есть несколько отличных бесплатных онлайн-инструментов. Опять же, можно вернуться к Google PageSpeed Insights и прогнать URL через этот инструмент. Вы заметите, что ваша страница теперь не содержит блокирующих ресурсов, а рекомендации по улучшению производительности стали зеленым. Отлично. Кроме того, возможно вы знакомы с еще одним отличным инструментом - WebPagetest.

Это бесплатный инструмент, который позволяет тестировать скорость страницы из нескольких точек мира. Кроме информативного аналитического отчета по вашей странице, если вы выберете Visual Comparison (визуальное сравнение), инструмент сравнит две веб-страницы между собой. Это отличный способ сравнить свои результаты до и после обновления критически важного CSS и показать разницу.

Идея в использовании критически важного CSS заключается в том, что наши страницы отрисовываются быстрее, тем самым показывая что-нибудь пользователям как можно скорее. Лучший способ измерить это использовать индекс скорости. Это показатель, используемый WebPagetest, который демонстрирует, насколько быстро содержимое страницы визуально отображается. SpeedIndex измеряет визуальное продвижение загрузки видимой части страницы и рассчитывает общий бал того, насколько быстро отрисовался контент. Попробуйте сравнить свой показатель SpeedIndex до и после внесения изменений в виде встраивания критического CSS. Вы удивитесь, насколько велика будет разница во времени отрисовки.

Погружаемся еще глубже

Как и в случае с большинством техник оптимизации, всегда есть за и против , которые могут повлиять на ваш сайт. Одним из недостатков встраивания критически важного CSS является то, что вы упускаете кэширование CSS в браузере, потому что он встроен в страницу. Если речь идет о динамичных страницах, которые часто изменяются, нам не нужно кэшировать HTML-страницы. Это означает, что CSS, встроенный в HTML, каждый раз загружается заново. Уже немало было сказано про встраивание только критичного CSS и асинхронную загрузку остального некритичного CSS. Мы всегда можем кэшировать такой некритичный CSS. В зависимости от того, на какой стороне баррикад вы находитесь, существует множество аргументов за и против концепции встраивания CSS в , но чтобы получить больше информации, рекомендуем вам почитать статью A counter statement: Putting the CSS in the head (Контраргумент: Внедрение CSS в заголовок) Ганса Кристиана Райнла.

Если вы используете сеть передачи данных (CDN), также стоит помнить, что вы все равно должны подавать некритичный CSS из CDN. Это позволяет вам подавать кэшированные ресурсы непосредственно от границы, обеспечивая более быстрый отклик, вместо того, чтобы направлять все на сервер-источник, чтобы их получить.

Для традиционных веб-страниц техника встраивания CSS работает достаточно хорошо, но она не всегда может быть уместной в зависимости от ситуации. А что, если у вас JavaScript со стороны клиента, который генерирует HTML? Что если вы работаете над одностраничным приложением? Если вы можете вывести столько же критически важного CSS как можно скорее, это также ускорит отрисовку страницы. Важно понимать, как работает критический CSS, и подходит ли это вам.

Несмотря на все эти ограничения, встраивание это все равно хороший и важный инструмент в мире Front-End оптимизации. Вам следует им пользоваться, но постарайтесь не переборщить

Гай Подъярный

Этот подход не идеален

Несмотря на то, что большинство инструментов, необходимых для генерирования и встраивания критически важного CSS, постоянно улучшаются, есть несколько сфер улучшения. Если вы заметили какие-либо ошибки в проекте, поднимите вопрос или отправьте запрос и сделайте свой вклад в развитие проекта на GitHub. Оптимизация процесса визуализации для вашего сайта может иметь большое значение на пути улучшения времени загрузки вашей станицы. Использование этой техники позволяет нам использовать отзывчивый макет без потери его основных преимуществ. Это также отличный способ убедиться, что ваша страница грузится быстро, не задерживая дизайн.

Дополнительные ресурсы

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

Есть и другие плагины, которые могут извлекать критически важный CSS, такие как Penthouse и criticalCSS от Filament Group. Также настойчиво рекомендуем прочитать статью How we make RWD sites load fast as heck (Как мы заставляем сайты RWD загружаться быстрее) от Filament Group, так как она содержит неплохой обзор того, как они используют эту технику для проверки, что их страницы загружаются максимально быстро.

Главный редактор Smashing Magazine, Виталий Фридман, написал статью о том, как Smashing Magazine улучшили производительность своего сайта с помощью этой методики. Если вы хотите узнать больше о процессе визуализации, есть отличный бесплатный курс на сайте Udacity. Сайт Google Developers также содержит неплохой контент, который раскрывает оптимизацию доставки CSS. Патрик Хамман также написал отличную статью о том, как определить критически важный CSS в своем воркшопе Building a Faster Web .