Comments (1)
Some notes
One 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.
from oodle-demo.
Related Issues (19)
- Mocks
- CSS Optimization
- Web Font optimization HOT 2
- Enable text compression HOT 1
- Uses inefficient cache policy on static assets
- Progressive Web App
- Error: Cannot read property url of undefined
- Preload key requests HOT 1
- Compression/Brotli
- Improve speed HOT 3
- Introduce performance issues HOT 1
- Final updates
- Improve accessibility
- Support for working without JavaScript
- Doodle mini perf-audits
- Implement offline experience
- Design assets HOT 2
- JavaScript optimizations HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oodle-demo.