Top 5 Ways to Slow Page Load

I've been writing some 15 minute talks for future presentation at the Atlanta PHP user group, I finished this one last night but I don't want to wait to actually be able to give the talk to share the information.  Keep in mind this is a living draft living in my personal wiki so any feedback you give may well end up in the final talk.

Synopsis

15 Minute Talk: As long as your back-end somewhat functions correctly the majority of user frustration over slowness comes from the front-end and transport layer. I'll show a few rules to follow to ensure that the transport and render time take as long as possible.

Talk Outline

I could have showed you how to write bad code and set some horrendous settings in apache and while these would slow down your website dramatically, I think the one place people forget to check when they're diagnosing sluggishness is the front-end. So here's 5 pointers to slow down your front-end

Don't Use a CDN

Most big sites use CDNs to offload and speed up loading pages. The way it works is you store static things like CSS, JS, and Images on the CDN and then it serves it from the closest data center to the user. Don't do this and gain load times. Bonus points for generating images, css, and js on the fly on each request.

Mind Your Caching and Compression

Caching is taking a resource that hardly ever changes and allowing the client (or a reverse proxy between your client) to keep a locally copy to serve up on subsequent requests. By all means do not use caching (disable etags and set your expire headers in the past) to ensure that consumers have the slowest experience as your application server has to resend every piece of content you serve.) Bonus props for overwriting a users caching preference with force-revalidate headers.

Position Matters

Make sure your css is at the bottom of the page (near the </body> tag) this will make the browser redraw the page, props if you get the flash of un-styled content. At the same time make sure the JavaScript is all loaded in the header, that way your users have to download it all before their browsers can begin rendering.

Insert extra whitespace into JS (maybe even CSS)

Adding whitespace to JS and CSS will increase the amount of data that has to go over the wire, it'll also take up more memory and cpu cycles on the far end as the code is preprocessed before being interpreted (not so much with compiling engines like Chrome's V8.) While you're at it, make sure you're not allowing content to compress and then transfer to ensure that the transfer takes as long as possible. Bonus props for executing everything before the onLoad event is called.

Minimize AJAX

Make sure all content you load is done in the initial page load and not deferred to an asynchronous call, it'll ensure that your back end has to generate everything and that the browser has to read in larger responses before it can render. Usually this isn't a problem unless you're not caching and have a ton of dynamic content on your landing pages and it takes forever to generate said content. Bonus props if you can load all dynamic content in a field in the head section then add to page via js.

Conclusion

Follow my steps if you want to make sure your page takes a ton of time (seconds equate to a ton of time) to render. However if you want to be efficient keep these things in mind:

• Use a content delivery engine (I recommend Akamai but Amazon's Cloudfront looks good as well.)
• Cache what can be cached, make sure your etags are right, use get parameters (which you can increment) to later invalidate cached js/css.
• Position your css in the head section of your html, position your js (what you can anyway) as close to the bottom for the html as possible.
• Minimize CSS and JS for production.
• Use AJAX to load content that takes a long time to generate, end users love feedback for some reason.
• Always keep in mind, it's not just your back-end that takes time, it becomes easy to focus on the php/python/ruby/java/etc for optimizations but your users will probably not notice the 30 ms you just shaved off they will probably notice the seconds you saved by caching.

Resources

Books

(Both By Steve Souders)

• High Performance Websites
• Even Faster Websites