Как использовать критический CSS для повышения производительности веб-сайта | Chrome World по-русски

Как использовать критический CSS для повышения производительности веб-сайта

pokter Google

Большинство людей не занимаются программированием вручную. Вы, вероятно, используете какую-то систему управления контентом, такую ​​как WordPress. В этом случае у вас есть пара проблем, которые нужно решить

  1. Вы имеете дело с большим количеством страниц
  2. Вы не можете эффективно добавлять разные Critical CSS на каждую страницу
  3. Ваш веб-сайт может загружать множество различных таблиц стилей CSS.

Решения

Вот как мы справляемся с этими проблемами

  1. Вы имеете дело с большим количеством страниц – многие страницы создаются с помощью некоторой формы шаблонов. Сосредоточьтесь на разделении шаблонов на группы и выясните, на каких страницах можно использовать один и тот же Critical CSS.
  2. Невозможно эффективно добавить различный Critical CSS на каждую страницу – компьютеры хорошо справляются с пакетной обработкой. Пусть машины сделают работу за Вас.
  3. На вашем веб-сайте может быть загружено множество различных таблиц стилей CSS – старайтесь не делать этого. Это замедляет работу вашего сайта, а это плохо для бизнеса. Если вы используете рабочий процесс Sass, объедините все эти файлы CSS в один. Тогда у вас есть только один основной файл CSS, из которого вы можете извлечь критический CSS, и только один файл CSS, который нужно переместить в нижнюю часть страницы.

Наш рабочий процесс… Gulp + Penthouse = Kapow!

Мы используем Gulp – набор инструментов JavaScript – для автоматизации множества надоедливых задач, связанных с веб-разработкой. Создание критического CSS снова и снова каждый раз, когда есть изменение стиля, которое влияет на содержимое над сгибом, может, мягко говоря, раздражать. Так что Gulp – идеальный инструмент для автоматизации процесса.

Для создания Critical CSS мы изначально использовали генератор CriticalCSS от Filament Group, и это здорово. Я не историк, но Filament Group, похоже, вышла на сцену одной из первых. Однако репозиторий обновляется нечасто.

Йонас Олссон Аден (помните его, он разработал потрясающий + бесплатный Critical Path CSS Generator) указал нам на Penthouse, созданный им для Critical CSS. Это быстрее, чаще обновляется. Мы перешли на Penthouse, чтобы выполнить тяжелую работу по созданию Critical CSS. В Penthouse есть масса отличной документации с примерами от простой реализации до пакетирования множества страниц за раз.

Эта установка работала как жемчужина для создания множества критических CSS:

  1. Добавьте Penthouse через npm в package.jsonзависимости:

    "dependencies": {
    "penthouse": "^1.4.0"
  }

  2. Добавьте к gulpfile.jsтребованиям следующее:

    var penthouse = require("penthouse");
var fs = require('fs');
var urlList = require('./criticalcss-pagelist.json')

  3. Добавьте следующий вариант в файл gulpfile.js. Мы пишем вывод в виде файлов PHP, обертывающих CSS, так как мы собираемся вставлять критический CSS для каждой страницы в <head>раздел через PHP, но вы можете настроить его в соответствии fs.writeFileSync()со своими потребностями. Ниже приведены все варианты, но вам, конечно, не нужно включать их все.

    
gulp.task('criticalcss',function(){
  urlList.urls.forEach(function(item,i){
    penthouse({
      url: item.link,  
      css: './css/style.min.css',  
      width: 1300,  
      height: 900,  
      keepLargerMediaQueries: false,  
      forceInclude: [ 
        '.keepMeEvenIfNotSeenInDom',
        /^.regexWorksToo/
      ],
      propertiesToRemove: [
        '(.*)transition(.*)',
        'cursor',
        'pointer-events',
        '(-webkit-)?tap-highlight-color',
        '(.*)user-select'
      ],
      userAgent: 'Penthouse Critical Path CSS Generator', 
      puppeteer: {
        getBrowser: undefined, 
      }
    })
    .then(criticalCss => {

      fs.writeFileSync('./'+item.name+'.php'," ");
    })
    .catch(err => {

    })
  })
})

  4. Добавьте список URL-адресов для анализа и список файлов для записи, добавив вариант этого в criticalcss-pagelist.jsonфайл. Это "link"страница, которую нужно проанализировать на наличие критического CSS на основе конфигурации в вашем файле, gulpfile.jsи "name"это имя файла, содержащего верхний критический CSS для вывода для каждой соответствующей страницы. В этом случае мы ссылаемся на локальные страницы, но вы можете использовать живые страницы (хотя это медленнее).

    {
  "urls": [
    {
      "link": "https://local-alexwright.net/",
      "name": "criticalcss/home"
    },
    {
      "link": "https://local-alexwright.net/westlake-plastic-surgery/",
      "name": "criticalcss/portfolio-project"
    },
    {
      "link": "https://local-alexwright.net/free-seo-analysis/",
      "name": "criticalcss/seo-analysis"
    },
    {
      "link": "https://local-alexwright.net/free-seo-analysis-report/",
      "name": "criticalcss/seo-analysis-results"
    }
  ]
}

    Стоит отметить, что при одновременном запуске большого количества страниц в Penthouse может истечь время ожидания. Ознакомьтесь с этим отличным справочником, чтобы получить информацию о пакетной обработке запусков Penthouse, чтобы ваш бедный компьютер не взорвался.

  5. Беги gulp criticalcssи наблюдай, как компьютеры делают то, в чем они хороши – много работы

  6. При необходимости добавьте каждый сгенерированный критический элемент CSS в <head>каждую страницу. Мы находимся в рабочем процессе WordPress, поэтому мы добавляем в header.phpфайл что-то вроде этого

    <?php if( is_front_page() ): get_template_part( 'criticalcss/home' ); 
  elseif( in_category( 13) ): get_template_part( 'criticalcss/portfolio-project' );
  elseif(is_page (382) ): get_template_part( 'criticalcss/seo-analysis' );
  elseif(is_page (384) ): get_template_part( 'criticalcss/seo-analysis-results' );
  else: endif ?>

    Другой вариант сделать это в рабочем процессе WordPress – использовать wp_head()крючок действия вfunctions.php

    add_action( 'wp_head', 'criticalcss');
function criticalcss() { 
 if( is_front_page()) {
    get_template_part( 'criticalcss/home' );
 }
 else if( in_category( 13) ) {
    get_template_part( 'criticalcss/portfolio-project' );
 }...
}

    Хотя это работает отлично, первое решение, состоящее в добавлении условных тегов непосредственно в заголовок, позволяет поднять критические файлы CSS выше в разделе заголовка, что лучше, поскольку браузер быстрее добирается до критических файлов CSS.

  7. Затем мы используем Autoptimize, чтобы, помимо прочего, отложить наш единственный основной style.cssфайл в нижний колонтитул. Другой вариант, или если вы хотите сделать это вручную, вы можете использовать loadCSS Filament Group (который использует Autoptimze). Даже большие и сложные веб-сайты могут получить 95 и выше в Google PageSpeed ​​Insights (попробуйте запустить этот веб-сайт с помощью этого инструмента ).

Вы используете высококлассный рабочий процесс Critical CSS? Или все это вообще не имеет смысла? Вы пьете пиво или кофе? Дайте нам знать об этом в комментариях. И особая огромная благодарность Йонасу Олссону Адену за всю его работу над Penthouse и за то, что он предложил большие изменения в этом посте, в том числе внесение поправок.

Обновление

Обновлен включает новую функциональность Penthouse – спасибо Йонасу Олссону Адену. Он работает над новым способом группировки более крупных серий генерации критического CSS, и мы обновим этот пост этими деталями, когда они появятся.