Updates from QA Training

Building Better Web Pages – Part 1 Minimise HTTP Requests

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.


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:

CSS Compressors

Javascript Compressors

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.


David-Walker---sq

David Walker

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.