Liquid error: internal

Sia Karamalegos

@thegreengreek

Let's take a look at the network profile waterfall...

LOL WAT IS HAPPENING?!?!

14:30 PM - 06 Nov 2019

Sia Karamalegos

@thegreengreek

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

Sia Karamalegos

@thegreengreek

Let's run another network profile...

It's admittedly better, but wat still?

1) Our HTML link sets up a connection tofonts.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

Sia Karamalegos

@thegreengreek

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

Sia Karamalegos

@thegreengreek

🎉¡TADA! 🎉

So now the browser will warm up that connection so it's sitting there waiting for thefonts.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

Sia Karamalegos

@thegreengreek

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