02 April 2013 13 comments Web development
First of all, the title is perhaps misleading. Basically, don't put plain
script tags that are not
async in the
download that and proceed down the lines of HTML and download other resources too as it encounters them such as the CSS files.
Here are two perfectly good examples from this morning's routine hunt for news:
Here's what getharvest.com does in their HTML:
Why it gets stuck on connecting to
c761485.r85.cf2.rackcdn.com I just don't know. But it does. The Internet is like that oftentimes. You simply can't connect to otherwise perfectly configured web servers.
Update-whilst-writing-this-text! As I was writing this text I gave getharvest.com a second chance thinking that most likely the squirrels in my internet tubes will be back up and running to
rackcdn.com but then this happened!
script tag in the
but then but in
async attribute on it like this:
Another thing you can do is not use an external resource URL (aka. third-party domain). Instead of using
cdn.superfast.com/file.js you instead use
/file.js. Sure, that fancy CDN might be faster at serving up stuff than your server but looking up a CDN's domain is costing one more DNS lookup which we know can be very expensive for that first-time impression.
I know I'm probably guilty of this new on some of my (now) older projects. For example, if you open aroundtheworldgame.com it won't render anything until it has managed to connect to
dn4avfivo8r6q.cloudfront.net but that's more of an app rather than a web site.
By the way... I wrote some basic code to play around with how this actually works. I decided to put this up in case you want to experiment with it too: https://github.com/peterbe/slowpage