Описание тега critical-css

Critical CSS is a paid tool that optimizes page loading by making sure 'top of the fold' CSS renders before or while the HTML itself appears on the page.
1 ответ

Извлечение только используемых стилей в HTML из таблицы стилей

Я пытаюсь повысить производительность своего сайта, преодолев блокировку рендера css. Кажется, проблема только в одном файле, и это минимизированная таблица стилей начальной загрузки, которую я получаю из CDN. Я пробовал несколько разных подходов, н…
29 сен '17 в 03:11
1 ответ

Записать вывод задачи Gulp на страницу.Masterpage/.aspx

Я использую критический для создания критического пути CSS для моего сайта. У меня есть задание с глотком, настроенное следующим образом: gulp.task('critical-css', function () { critical.generate({ base: 'CriticalCss/', inline: false, src: 'index.ht…
0 ответов

Глоток критического CSS не работает с Laravel

Когда я запускаю команду gulp критический, elixir некоторое время остается загруженным, а затем выдает ошибку в консоли: var elixir = require('laravel-elixir'); var BrowserSync = require('laravel-elixir-browsersync'); var gulp = require('gulp'); var…
0 ответов

Можем ли мы сразу использовать Render-Tree (DOM и CSSOM) для браузера? [улучшить путь критического рендеринга]

Я пытался оптимизировать загрузку своей страницы, и я снова прошел критический путь рендеринга, и это заставило меня задуматься. Есть ли способ отправить сериализованное дерево-макет в браузер и сразу запустить триггер рендеринга вместо передачи HTM…
10 апр '18 в 08:51
2 ответа

Генерация критического CSS для всех.html страниц с Gulp

Итак, есть этот пакет npm, который Google предлагает генерировать критически важный CSS: var critical = require('critical'); gulp.task('critical', function (cb) { critical.generate({ base: 'app/', src: 'index.html', dest: 'css/index.css' }); }); На …
07 фев '18 в 20:01
1 ответ

Относительный путь к файлу не работает в JavaScript

Я пытаюсь заставить страницы загружаться быстрее, включая встроенный CSS для кода выше сгиба. Это работает для страниц, хранящихся в корневом каталоге, но у меня проблема с загрузкой остальной части CSS-файла в конце страниц, которые находятся в под…
04 апр '18 в 11:26
2 ответа

Сбой Criticalcss при первоначальной сборке с веб-пакетом

Поэтому я использую Webpack, чтобы связать мои js и css. Я добавил критический плагин Webpack для вывода внешнего CSS-файла с критическими стилями. Этот файл добавляется в мой (веточка) шаблон. Он работает нормально, если я запускаю Webpack во второ…
02 окт '17 в 12:27
1 ответ

Как динамически загружать файлы с TypoScript

Я хочу загрузить для каждой страницы свой критический файл CSS. Поэтому я сохранил их так: fileadmin/crit1.css для TSFE:id=1 fileadmin/crit2.css для TSFE:id=2 и так далее. Поскольку существует много страниц, я хочу, чтобы TS был полностью динамичным…
19 фев '18 в 01:20
0 ответов

Как минимизировать критическую глубину запроса для начальной навигации?

Я работал над аналогичной проблемой для типа файла woff2 и сделал это успешно. Дело в том, что файл woff2 существует на сервере и может ссылаться на него в: <link rel="preload" href="fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" cr…
1 ответ

Как изолировать критический CSS при использовании приложения Create React

Каков наилучший способ решить проблему блокирования CSS при рендеринге и загружать только критически важные CSS с помощью Create React App, поскольку нет доступа для редактирования файла конфигурации webpack?
1 ответ

Встроенный только критический CSS или все 15 КБ CSS, когда первое представление страницы является наиболее важным?

Мне было интересно, будет ли хорошей идеей разделить мой CSS на две части: встроенную критическую и отложенную внешнюю. Весь мой CSS - 15kb (минимизированный). Критический CSS, который дает мне онлайновый анализатор "Critical Path CSS Generator", со…
0 ответов

Настройте Laravel Mix с критическим разделением CSS на SASS и PostCSS

Я хочу настроить Laravel Mix с mix.sass И PostCss Критическое разбиение CSS. В конце я хочу два файла: app.css и app-crit.css. К сожалению, я могу заставить это работать. Одна из настроек (webpack.mix.js), которую я попробовал: микшировать.js('templ…
07 фев '18 в 13:04
0 ответов

Можно ли использовать GoogleChromeLabs/critters для Laravel Mix 3.0? (критический CSS)

Я хотел бы использовать твари для моего проекта Laravel, однако я не уверен, возможно ли это вообще. В настоящее время я использую Laravel Mix 3.0 с Webpack 3. Я пробовал эти настройки для рабочих настроек Laravel Mix, но не повезло: //extract all i…
19 янв '19 в 13:09
0 ответов

Создание критических CSS на проекте Codeigniter

Этот вопрос скорее теоретический, чем практический. Мне нужно создать критический путь для CSS на сайте. Я прочитал учебник по этому инструменту: https://github.com/addyosmani/critical, и я привожу здесь основной пример: critical.generate({ base: 't…
21 фев '18 в 09:43
0 ответов

Повторяются ли классы в Критическом CSS?

Я пытаюсь понять Критический CSS. Я понимаю, что с помощью Critical CSS инструменты извлекают жизненно важный CSS, который важен для загрузки содержимого в верхней части страницы. Проблема, с которой я борюсь, заключается в следующем: ожидается ли, …
12 авг '17 в 13:43
0 ответов

Wordpress: как установить индивидуальный Критический CSS для каждой страницы?

Я работаю над быстродействием веб-сайта, и теперь я застрял на Критическом CSS выше, чем выше. Используя генераторы criscss, я могу извлечь css для содержимого, превышающего сгиб, для всей страницы, но в бэкэнде WP я могу установить только один общи…
01 июн '19 в 15:09
0 ответов

Папка назначения в моем задании gulp для вывода критического css не работает

У меня есть следующее задание gulp и я запускаю его в папку "Тема" для WordPress: gulp.task('critical-css', function () { return gulp.src('./style.css') .pipe(criticalCss({ out: 'critical.php', // output file name url: 'http://localhost/dimoco/', //…
10 апр '19 в 16:11
0 ответов

Создание критического CSS для всех страниц .html с версией Gulp4

Я использую версию gulp 4, и кто-нибудь, пожалуйста, помогите мне обновить код для создания критического css для последней версии gulp.
28 авг '20 в 10:41
2 ответа

правильный способ установки критического CSS для проекта nextjs и удаления нежелательного CSS

У меня есть настройка проекта NextJS -> https://github.com/stefanre1/nextjs-setup Мне интересно, как правильно удалить нежелательные CSS из Tailwindcss и добавить критические CSS на каждую страницу. Я пытался подписаться на несколько блогов, чтобы д…
0 ответов

Может ли критический CSS быть почти пустым, чтобы ускорить время до FCP

Здесь мы говорим об экстремальных вещах, чтобы улучшить время первой рисовки содержимого. CSS - это ресурс, блокирующий рендеринг, поэтому я хочу полностью исключить время ожидания и загружать CSS после завершения загрузки страницы. Скорее всего, эт…
21 мар '20 в 04:13