It’s not a second
7 seconds away
Just as long as I stay
I’ll be waiting
One week ago I noticed that my site was missing a landing page so I started building one. The next day I had a pretty nice page, responsive, animated and with all the bells and whistles required in 2014. There was a custom font from google, two embedded youtube videos, css3 animation and then, in a moment of glory, I fired up the URL on my 4 years old smartphone:
Oh the horror! There was a mess!
It loaded, eventually, using the slow Parisian “3G”, but it was unusable. Yup, “there’s no hardware acceleration” I said to myself, and with little delay I filled my css with translate3d(0,0,0). Yes, it did help, or maybe “it’s just an illusion”. Not sure. This is the moment you realize that some numbers would be nice to have at hand.
Google PageSpeed Insights
Well, the numbers were: 7.71 seconds to load, 42 requests and ~1MB download size. I did not bothered to look at the speed index…
So I rolled up my sleeves and started with the big stuff, compressing the images:
Kraken was good, but the free version doesn’t resize
jpeg-optimizer only does jpegs
This shaved about 250K. And around 4 seconds to load. Not too shabby, but finding the right amount of compression is a tedious work.
All things compressed, it is time to aggregate all the stuff in the correct order. Numbers again? 37 requests, 650K downloaded in 2.3 seconds. I don’t stop, I never do!
But you can! Because now I am thinking to reach out and grab the 100/100 from all the page performance analyzers that I know of.
That means I will let go of my google font, customize a FontAwesome build, and chose carefully the CDNs for serving the statics. I had a solitary CDNjs that served only the Fastclick script but switched to jsdelivr and in the end, being so small, I’ve inlined it all at the end of the page.
Oh yes, those numbers: 22 requests, 518.8kB and 1.34s load time of wich 280ms is the TTFB (Time To First Byte)
Any fool can know. The point is to understand.