David Walker | 26 June 2012
At least 40% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.
As Phil Stirpe has elevated me to the tech giantness of Tony Stark status I thought I should live up to reputation as the most handsome and brainy instructor at QA. Lets start with a few best practices on web page development.
At least 40% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience. The majority of bottlenecks and performance issues start in the front-end where every asset in the page (i.e. images, stylesheet, script flash, video and the like) take time. Older browsers are limited by the number of files they can request in parallel so page assets matter.
How do I know if there is a problem?
Chrome's developer console as always is your chum in these matters. In its tools is the audit pane.
If you utilise this tool on your website and see how it performs you will get warnings and optimisation suggestions. Many of these may be the need to reduce file size or combine assets.
How do I improve it?
If you want to improve your page consider if you can simplify the richer content while improving your performance and response time.
Combine and minify files:
When you get to release you want the smallest number of script and CSS files possible. This may be a paradigm shift from what you have been told before but things change. Modularity during development is good but by release combine.
There are some great minification tools out there:
Minification takes whitespace, comments and the like out of the script. More advanced implementations can even rename functions and parameter names. You will want to keep a design and deployment version of your files for maintenance after release but do Make this optimisation part of your release phase
Be clever with Images
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors.
In Part 2 we will discuss CDN's and where to put scripts and style sheets.