I spent the evening investigating ways to improve how quickly we load (which might aff

I made this change (preloading our main JS bundles) WPT

Applied manually curated critical CSS to the main page (I've previousl

Improve speed about oodle-demo HOT 3 CLOSED

google commented on April 28, 2024

Improve speed

from oodle-demo.

Comments (3)

addyosmani commented on April 28, 2024

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.

addyosmani commented on April 28, 2024

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.

addyosmani commented on April 28, 2024

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