Back in Chapter 2, we learned that performance can be described as: “the speed with which your information is obtained by the user, but also how efficiently the user is able to navigate to the information they seek. Performance can apply to a broad range of topics such as bandwidth, file size, number of queries, usability, amongst other things.”
Basically, page performance can be critical to any web page, regardless of its purpose. Need some proof? Studies show that about 47% of visitors expect a page to load in under 2 seconds, and that 57% of visitors will abandon a page that takes longer than 3 seconds to load. That’s a short window to make a big first impression on your audience! To carry that further, in 2006 (yes, 10 years ago!), Amazon reported that a 100-millisecond increase in page speed translated to a 1% increase in its revenue. That’s huge.
Page performance can be measured in two basic ways – technical and perceived. Technical looks more at how fast a page is actually loading and how many bytes are transferred during the process. This includes both loading time and processing time from servers. Perceived performance is exactly how it sounds – the performance of your web page as the user is perceiving it. Does it feel like it’s taking too long to load?
Something important to keep in mind – 80-90% of poor performance of a webpage happens on the front end.
There are hundreds of simple things that can be done to improve the performance of a web page as it is being developed. Lets take a look at a few standard pieces of a webpage and address how they can aid in your page performance.
The first thing you should do when using any image on your webpage is to compress or optimize it for the web. Picking appropriate formats for the type of image is also important. Try and stick to .jpegs for complex graphics or imagery, .png or .svg for smaller graphics such as logos, and .gif only for animation. Using the correct format for each image can help the bowser to ‘digest’ it properly, and save time. Also, using responsive images on your sites, so mobile users see smaller versions, which take less effort and time to load is vital.
An article from Web Designer Depot titled, The Quick Guide To Speeding Up Your Website has some great pointers on how to improve the speed in your CSS. For starters, it states, “the way your CSS is written has a direct effect on how fast a particular device is able to actually display the webpage once the files have been downloaded.” The Mozilla Guide to Writing Efficient CSS also has some great tips and refreshers on proper ways to code CSS. Other tips to improve your css – clean out unused selectors and codes. Use slower rendering properties such as box-shadow or transform sparingly. Lastly, use preprocessors like LESS or SASS if appropriate for your site.
Other sources used: