Winning the War on Web Page Speed
Page speed is important, no matter how you look at it, Google uses it in its ranking algorithms and user’s expectation, satisfaction and website abandonment rates are all influenced by it. The article “A faster page is Better” shows what these impacts are in quantifiable terms – check it out if you haven’t already done so.
Web Page Speed is not only how long it takes to download and retrieve the resources for a webpage, but also includes the time it takes to render these in the browser.
Improving Web Page Speed = Resource download time + Rendering time
The contributing components of this equation have a myriad of factors many of which require technical knowledge and know how to resolve. There are some however that a layperson or website administrator can manage and these can have the biggest impact. The post “Page Speed – Let’s Improve It” covers the “what and how” of these.
In conjunction to this a number of platforms now have plugins designed specifically to address numerous influencing factors simplifying the ability to speed up your website and its pages.
So what are these factors?
The look and feel of a website is critical to user appeal and usage. Imagery and graphics have a major role to play in this presentation however can also greatly impact the size of webpage. It’s important to optimise images through compression, image format selection and progressive rendering options which will reduce file size and also aid in the drawing of the page within the browser. Page Speed – Let’s Improve It has some good tools and tips on this topic.
There are numerous online tools available that can minify files which will automatically perform these operations and are worth their weight in gold. They don’t however remove unreferenced css styles or script functions – this is a manual process and still very much a part of the minifying definition – removing unnecessary stuff!
Page Weight and Number of Objects
If we look at the trend over the years, we see that the average number of objects and size of a page have been increasing. Admittedly the data is a couple of years old but I doubt this trend is reversing.
These numbers are significantly higher than many sources recommend. While it may not be practical to achieve a target of 30 objects or less care should be taken to ensure the least possible number is used through the techniques of, combining resources as stated above, removing unreferenced resources or splitting content across multiple pages. An approach I like to take is, if 80% of people expect a page to load in under 3 seconds and 40% will go elsewhere if it takes longer then targeting a page to load within this time frame has some compelling advantages.
Leverage Browser Caching
When a browser visits a webpage all the resources including images, scripts, fonts and stylesheets have to be downloaded. Your browser may cache some or all of this data locally so that if you navigate to the same page it will render a lot quicker due to not having to download the files again. This however relies of the settings of the browser rather than an instruction from your website. Therefore leveraging browser caching is when you send an instruction in the header of each downloaded resource instructing the browser to cache that resource for a specified period of time, effectively controlling the cacheable content from your website.
We all know that compressing a large file into a zip or tar file reduces its file size and this applies the same to the html and css (text content) of a webpage. By enabling the web server to send gzip compressed data you can save 50% or more of the size of the compressed resources reducing the amount of data to be sent.
Render Blocking Resources
Now that you’re armed with this knowledge I’m sure you too can win the war and speed up your website.