Optimizing the hell out of your site for PageSpeed

Posted on July 30, 2014  •  3 minutes  • 586 words

Static assets bundling

I wrote a post about static assets combine on jekyll but the idea is similar to other framework. You can even do this on Wordpress via plugin called W3TC IIRC. As for your theme’s images, use CSS sprites to combine it to a single image. There are many tools for this purpose.

This step is critial because number of requests has a very high impact on page load. You would get a few points for PageSpeed already after this step.

Make use of Content Delivery Network (CDN)

CDN deploys your content across multiple, geographically dispersed servers, making your page loads faster from vistors' perspective.

Also, try to load external library from a popular CDN. Chance your visitors already cache jQuery on Google CDN is pretty high. Why not take advantage of this?

CDN is cheap now. Even the free option CloudFlare is pretty good. Use it.

Minify CSS/JS/HTML

This one doesn’t take much time either. CloudFlare can also do it for you if you’re lazy.

Defer, async when possible

Defer and async all the scripts where possible. The rules are simple

• Without defer or async, HTML parsing is paused when js code executes.

• Defer will delay the script execution until HTML parsing is done.

• Async won’t care when the script will be available. The script will be executed as soon as it’s ready. You may not want to use async if you have other scripts depend on that.

If you need to put external scripts (analytics, ads, etc..) on your site, try to find their async version. Most of the popular ads network provide async code snippet for your site.

Put JavaScript which are deferable in the bottom before </body in case your visitors' browsers are not HTML5-compatible.

Optimize images

Yahoo Smush.it is a popular tool for this purpose. There’s a WordPress plugin to make it even easier to use. If you prefer an app for offline use, ImageOptim is good.

Use static site generator

jekyll is good. I have a very good experience with it. If you want a ready-to-use jekyll, take a look at Octopress. There are tons of other options as well. Take a pick.

Reverse proxy

If you’re already using a static site generator and nginx to serve it, I’m not sure if a reverse proxy would help. In my benchmark, varnish has roughly the same performance as nginx when serving static html. However, say you’re using a dynamic language like PHP with WordPress, varnish helps a lot. An old website of mine used to be able to handle 200,000 hit a day on a single $5 droplet on DigitalOcean where peak user online count was around 800, according to Google Analytics. Without varnish, the site was pretty much unresponsive.

I uses varnish to drop cookies on static assets as well as reverse proxy in front of nginx.

Google’s mod pagespeed

Pretty easy to install with apache, a bit more troublesome with nginx. I highly recommend you to install this. It makes your job a whole lot easier.

Conclusion

I did few of those tweaks and get 93/100 on Pagespeed and 99/100 on gtmetrix. Not bad for half an hour of your time huh. If i have more time, I will aim for something closer to 100 on Pagespeed.

There’s one suggestion on PageSpeed I don’t really understand . Until I figure it out, my score is probably stucked here.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load.