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

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

Большинство людей не занимаются программированием вручную. Вы, вероятно, используете какую-то систему управления контентом, такую ​​как 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, и мы обновим этот пост этими деталями, когда они появятся.