Let's see how the change effects the waterfall :-)
-
-
fks Retweeted fks
responded here:https://twitter.com/FredKSchott/status/1157388801515200512 …
fks added,
fks @FredKSchottReplying to @FredKSchott @mikesherov @slightlylateokay made the change and retested, but results aren't too different: https://www.webpagetest.org/result/190802_SD_d1b7efa3c6bc8340d73bcf33fbde623a/1/details/#waterfall_view_step1 … My new guess is that modulepreload isn't actually loading transitive deps, and that they only load once the client-side router executes and triggers a full import.1 reply 0 retweets 1 like -
So I'd add <link rel=preconnect to the GTM and GA origins. Chrome is scheduling them at lowest priority and it doesn't connect eagerly, preconnect should move it forward I'd also self host fontawesome, and consider loading Google Fonts async if you cope with the font reflow
2 replies 1 retweet 4 likes -
I'd preload GA, not just preconnect
1 reply 0 retweets 0 likes -
But why? Preloading GA means everything else gets a lower priority (particularly on poor connections) Surely the site content is more important than the analytics?
1 reply 0 retweets 0 likes -
Having GA run earlier while other content is being downloaded means it's not contended with other JS that is trying to run after DomContentLoaded.
1 reply 0 retweets 0 likes -
Sorry for the slow reply. Here's the 3G trace on the same hardware: https://www.webpagetest.org/result/190802_7Q_3a7b3a5321251394011376ae4f1798be/ … I have some questions!
1 reply 0 retweets 0 likes -
Replying to @slightlylate @mikesherov and
Looking at the filmstrip, it seems that the big ticket item is the search result: https://www.webpagetest.org/video/compare.php?tests=190802_7Q_3a7b3a5321251394011376ae4f1798be-r:1-c:0 …
1 reply 0 retweets 0 likes -
Replying to @slightlylate @mikesherov and
It *looks* as though that isn't getting fetched until `fetch.js` comes in, which doesn't seem to get requested until relatively late. On the analytics stuff, honestly, I'd move that *below* the critical content.
2 replies 0 retweets 1 like -
that fetch is fired off by code inside of SearchPage.js, so it's waiting for all of it's imports to load (of which fetch.js is one of them) you can see the file's ~8 imports here: https://next.pika.dev/static/js/pages/SearchPage.js …
1 reply 0 retweets 1 like
Yeah, was just digging into that. On a super slow link, you could get some mileage by pushing those deps (PRPL style) or <link rel="preload"> them if you know you'll need 'em for a given UA.
-
-
fks Retweeted Kristofer Baxter
A bit of related follow up here, exploring how this could be automated:https://twitter.com/kristoferbaxter/status/1157370079094460417?s=21 …
fks added,
Kristofer Baxter @kristoferbaxterReplying to @FredKSchott @slightlylateThe document modulepreloads `/static/js/PackageLI.js`, which once satisfied and executes, ends up needing a set of dependencies that are not preloaded. This creates a gap between the preloaded items and necessary network requests to leverage them.3 replies 0 retweets 2 likes -
Good stuff. How dynamic is the server-side? Is this essentially static content? Or can you generate a preload for the data payload in the HTML?
2 replies 0 retweets 0 likes - 4 more replies
New conversation -
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.