Liquid error: internal
Let's take a look at the network profile waterfall...
LOL WAT IS HAPPENING?!?!14:30 PM - 06 Nov 2019
So what is happening here?
1) HTML is loaded, kicking off...
2) Our CSS stylesheet load, kicking off...
3) The font stylesheet load, kicking off...
4) FINALLY OUR FONTS 🤦♀️
We can shorten the chain by moving the font request to our html:14:30 PM - 06 Nov 2019
Let's run another network profile...
It's admittedly better, but wat still?
1) Our HTML link sets up a connection to fonts.googleapis.com and loads the font stylesheet
2) Our fonts are on a different domain so we need to set up ANOTHER CONNECTION. DNS + connect + SSL!!14:30 PM - 06 Nov 2019
How fix? Preconnect!
Preconnect says, "Hey, I know I need to go to this domain really soon, so can you warm it up, Chris?"14:30 PM - 06 Nov 2019
🎉¡TADA! 🎉
So now the browser will warm up that connection so it's sitting there waiting for the fonts.gstatic.com call. Then it can start loading those fonts immediately.
Without much code at all, we've made our site faster by optimizing for latency! 🎊14:30 PM - 06 Nov 2019
Y'all, if anyone has a better way to annotate images on screenshots (on a Mac) so I don't look like a serial killer anymore, I would very much appreciate the tips. I have a Pixelbook too if it's just way easier there.14:30 PM - 06 Nov 2019
Top comments (1)
I totally removed the
preconnectattribute from my mind... thanks for reminding!