-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reduce render-blocking stylesheets #15
Comments
Some notesOne of the difficult things with our current app is that we require JavaScript to render even the initial view. If we run Puppeteer on this (via Critical or the Prerender plugin), we can extract some critical styles, but there's no inline content there to take advantage of it (e.f App.vue doesn't render any text). We'd need to inline some of this in the initial view in order to move more of our work to be lazy-loaded. I experimented with a few concepts to try helping here. Prerendering new PrerenderSpaPlugin({
// Path to compiled app
staticDir: path.join(__dirname, '../dist'),
// List of endpoints you wish to prerender
routes: ['/'],
renderer: new Renderer({
renderAfterElementExists: '.doodle-header'
})
}), Before: After: (mainly improvements in FMP, but pushed out interactivity) Prerender + Critical-path CSS (inline critical CSS, preload/lazyload rest)const critical = require('critical')
const path = require('path')
critical.generate({
/* The path of the Webpack bundle */
base: path.join(path.resolve(__dirname), 'dist/'),
src: 'index.html',
dest: 'index.html',
inline: true,
extract: true,
/* iPhone 6 dimensions, use whatever you like*/
width: 375,
height: 565,
/* Ensure that bundled JS file is called */
penthouse: {
blockJSRequests: false,
}
}) Addressed the render-blocking stylesheet issues and improved FMP again, but still have issues with interactivity. It'll be easier to look at the impact of these changes once #11 and #8 have landed. |
This is early experimental prerendering support. It still has some rough edges so I'd say we shouldn't merge this in just yet. Related to #15.
Perhaps we..
https://developers.google.com/web/tools/lighthouse/audits/blocking-resources
The text was updated successfully, but these errors were encountered: