Comments (3)
- I made this change (preloading our main JS bundles)
WPT: https://www.webpagetest.org/result/180426_KG_ea71fd1dc3493af22460e3cdfb291a41/
LH: https://www.webpagetest.org/lighthouse.php?test=180426_KG_ea71fd1dc3493af22460e3cdfb291a41&run=2
As it turns out, this change made all of our metrics worse :)
I also wanted to experiment what would happen if we just preloaded JS and not Web Fonts:
WPT: https://www.webpagetest.org/result/180426_06_217ca7d23dbdfede60b6fc08c925e23e/
LH: https://www.webpagetest.org/lighthouse.php?test=180426_06_217ca7d23dbdfede60b6fc08c925e23e&run=2
(This is an interesting sanity check of whether Lighthouse's guidance to preload Web Fonts was counter-intuitive)
Similarly, our metrics haven't really improved much from the original.
For now, I'm going to say let's not preload JavaScript
For record-sake, this branch was https://github.com/google/io-demo-app/tree/preload-js
Moving onto 2 - render blocking stylesheet/critical CSS optimization.
from oodle-demo.
Side-note: we may well need to switch away from Lighthouse recommending to preload WOFF files directly over to just the CSS because those WOFF references can change.
from oodle-demo.
- Applied manually curated critical CSS to the main page (I've previously tried to use modules like Critical on it) with inline HTML for the initial "shell". I haven't yet async loaded the current stylesheet but can do that after the first test is done.
https://www.webpagetest.org/result/180426_RJ_a990eab217841df95a95e500ee358b11/
https://www.webpagetest.org/lighthouse.php?test=180426_RJ_a990eab217841df95a95e500ee358b11&run=3
I'm expecting some improvements to FMP/FCP. We'll need to see what impact shipping down the extra critical <head>
content will have on TTI.
A few things to unpack here: At 3.8s we have some content on screen and FMP is half of what it was originally. We need to tweak our inline styles for sure, but that's fixable. TTI is about 300ms slower using this approach.
I'm going to try using the Critical
module again, this time with some of my own hand-curated styles to see if it improves anything at all.
https://www.webpagetest.org/result/180426_4D_dd3cafdd3e4d0175ff1cccbb765eb236/
This version has the inline styles and async loads CSS.
https://www.webpagetest.org/lighthouse.php?test=180426_4D_dd3cafdd3e4d0175ff1cccbb765eb236&run=1
We are now passing the render-blocking stylesheets audit too \o/
.. just as a check. I wonder if bringing that main image back for the skeleton improves FMP. Let's try it out.
https://www.webpagetest.org/result/180426_6H_9084a775c67e419bd412b5a9e14819bb/
Excellent. So with this change, we're able to keep TTI < 5.5s and improved FMP. Let's ship it.
from oodle-demo.
Related Issues (19)
- Mocks
- CSS Optimization
- Web Font optimization HOT 2
- Enable text compression HOT 1
- Reduce render-blocking stylesheets 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
- 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.