martinhellwagner
commented
1 year ago @khalwat
Any idea how we could resolve this issue? 🤔
Closed martinhellwagner closed 1 year ago
martinhellwagner
commented
1 year ago @khalwat
Any idea how we could resolve this issue? 🤔
khalwat
commented
1 year ago I don't know what you're doing wrong, other than you might be passing in the wrong URLs to generate critical CSS from? Here's an example setup:
https://github.com/nystudio107/devmode/blob/develop/buildchain/vite.config.ts#L33
^ which definitely does work.
martinhellwagner
commented
1 year ago @khalwat
That's all correct, I've checked. Is it possible that the input option in rollupOptions options is incorrect? We have Javascript files as input options, which in turn link to the respective CSS files.
khalwat
commented
1 year ago You're going to have to provide more information -- your vite.config.js and also the code you're using to include the Critical CSS in your templates.
I'd suggest looking at the devmode repo above to compare & contrast.
martinhellwagner
commented
1 year ago This is our Vite Config file:
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
// import legacy from '@vitejs/plugin-legacy';
import ViteRestart from 'vite-plugin-restart';
import viteCompression from 'vite-plugin-compression';
import manifestSRI from 'vite-plugin-manifest-sri';
import {visualizer} from 'rollup-plugin-visualizer';
import eslintPlugin from 'vite-plugin-eslint';
import {nodeResolve} from '@rollup/plugin-node-resolve';
import critical from 'rollup-plugin-critical';
import {ViteFaviconsPlugin} from 'vite-plugin-favicon2';
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => ({
base: command === 'serve' ? '' : (mode === 'production' ? 'https://content.karriere.at/dist/' : '/dist/'),
build: {
emptyOutDir: true,
manifest: true,
outDir: path.resolve('../web/dist'),
rollupOptions: {
input: {
app: '../src-vite/js/app.ts',
appk4: '../src-vite/js/app-k4.ts',
appb2c: '../src-vite/js-b2c/app.js'
},
output: {
sourcemap: true,
},
},
},
plugins: [
critical({
criticalUrl: 'https://karriere.at/',
criticalBase: path.resolve('../src-vite'),
criticalPages: [
{ uri: 'gehaltsstudie', template: 'templates/entry/landingpages/gehaltsstudie' },
{ uri: 'gehaltsstudie/danke', template: 'templates/entry/landingpages/gehaltsstudieDanke' },
{ uri: 'lp/events', template: 'templates/entry/landingpages/events' },
{ uri: 'lp/faqs', template: 'templates/entry/landingpages/faqs' },
{ uri: 'lp/lebenslauf', template: 'templates/entry/landingpages/lebenslauf' },
{ uri: 'lp/lebenslauf-anlegen', template: 'templates/entry/landingpages/default' },
{ uri: 'lp/lebenslauf-vorlagen', template: 'templates/entry/landingpages/vorlagen' },
{ uri: 'presse', template: 'templates/entry/pagesB2C/presseHome' },
{ uri: 'presse/downloads', template: 'templates/entry/pagesB2C/presseDownloads' },
{ uri: 'presse/medienecho', template: 'templates/entry/pagesB2C/presseMedienechoOverview' },
{ uri: 'presse/medienecho/homeoffice-auch-nach-der-krise', template: 'templates/entry/medienecho/default' },
{ uri: 'presse/pressemitteilungen', template: 'templates/entry/pagesB2C/presseOverview' },
{ uri: 'presse/pressenews-abonnieren', template: 'templates/entry/pagesB2C/presseSubscription' },
{ uri: 'presse/s/pm', template: 'templates/entry/search/resultsPresse' },
{ uri: 'presse/s/pg', template: 'templates/entry/search/resultsPresseGlobal' },
{ uri: 'presse/s/me', template: 'templates/entry/search/resultsPresseMedienecho' },
{ uri: 'presse/weiterbildung-als-weg-aus-der-krise', template: 'templates/entry/pressemitteilungen/default' }
],
criticalConfig: {
inline: false,
width: 1680,
height: 1050,
penthouse: {
timeout: 3000000,
},
ignore: {
rule: [/o-footer/],
},
rebase: asset => (asset.url.includes('https://content.karriere.at') || asset.url.includes('https://kcdn.at')) ? `${asset.url}` : `https://content.karriere.at${asset.url}`,
},
}),
nodeResolve({
moduleDirectories: [path.resolve('./node_modules'),],
}),
ViteFaviconsPlugin({
logo: './public/images/bitmap/favicon.png',
inject: false,
outputPath: 'favicons-default',
favicons: {
appName: 'karriere.at',
lang: 'de',
background: '#244F43',
theme_color: '#8BC72A',
},
}),
ViteRestart({
reload: [
'../translations/**/*.{php}',
'./templates/**/*.{twig}',
],
}),
vue(),
viteCompression({
filter: /\.(js|mjs|json|css|map)$/i,
}),
manifestSRI(),
visualizer({
filename: path.resolve('../web/dist/assets/stats.html'),
template: 'treemap',
sourcemap: true,
}),
eslintPlugin({
cache: false,
}),
],
publicDir: './public',
resolve: {
alias: {
'@': path.resolve(__dirname, './'),
},
preserveSymlinks: true,
},
css: {
postcss: 'postcss.config.js',
},
// Use this for Laravel Valet
server: {
fs: {
strict: false
},
host: '0.0.0.0',
origin: 'http://localhost:3000',
port: 3000,
strictPort: true,
},
}));The newly included file (and the one whose styles don't seem to get pushed into the Critical CSS files) looks like this:
/**
* Bundle Scripts
*/
// Polyfills
import 'babel-polyfill';
import 'svgxuse';
import objectFitImages from 'object-fit-images';
// CSS Import
import '../css-b2c/app.scss';
// Import Partials
import scripts from './partials/scripts';
import modules from './partials/modules';
const app = {
init() {
scripts.init();
modules.init();
objectFitImages();
},
};
// Init App
app.init();How is this newly include file loaded?
martinhellwagner
commented
1 year ago It is loaded like this in the src-vite/js/app.ts file:
import('../js-b2c/app.js');The src-vite/js/app.ts file is called like this in the default layout template:
{{ craft.vite.script('js/app.ts', false) }}The CSS works on the Frontend, but I have a feeling we're doing something wrong in terms of Critical CSS?
martinhellwagner
commented
1 year ago @khalwat
Any idea how this could be resolved?
khalwat
commented
1 year ago If I had to guess, it's because you're doing a dynamic import with import(), and perhaps when Headless Chrome does the page rendering, it isn't pulling that in.
I'd suggest changing it to a regular ESM import, e.g.:
import '../js-b2c/app.js';@khalwat
Unfortunately, that doesn't change anything. However, it doesn't even work when trying with the working Critical CSS of another project.
It is necessary to have a CSS input file specified, or is it possible that the headless Chrome browses a route on its own and just extracts the above-the-fold CSS into a Critical file?
martinhellwagner
commented
1 year ago Also, what's strange is that I'm getting the following warning, even though I'm using the exact Critical config of another project:
Warning: Missing base path. Consider 'base' option. https://goo.gl/PwvFVbI'm not getting the warning on the other project.
martinhellwagner
commented
1 year ago @khalwat
I managed to find the cause of the error: the templatePath (which was used for the criticalPath variable) wasn't set correctly in the templates.
Thanks for your help! 🙏🏼
Describe the bug
We have the Rollup Critical CSS plugin in our Vite project, and the CSS files get generated by the plugin as they should. However, they contain a rather weird Critical CSS, which still leads to Flashes of Unstyled Content. For example, a run on https://www.karriere.at/lp/faqs leads to the following Critical CSS (all of our URLs generate this Critical CSS code):
What are we doing wrong that the Critical CSS is so general (and the same for all URLs)?
To reproduce
Steps to reproduce the behaviour:
Expected behaviour
The correct Critical CSS is produced.
Versions