Web Interactivity and Engagement

Page Performance and Optimization

What is Page Performance?

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.

How Do You Achieve Good Page Performance?

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.

So where does one begin to improve the performance and speed of their website? An article from Smashing Magazine, How To Speed Up Your WordPress Website makes a great point on this, “A good way to start speeding up a website is to look at what can be removed. More often than not, a website is slow not because of what it lacks but because of what it already has.” Some good places to look would be your code – do you have unused links to external scripts or files? Old JavaScript functions discarded but not deleted when a better way was discovered? Css selectors not being used? Get rid of them!

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.

Images

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.

CSS

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.

JavaScript

Similar to the CSS tips, some best practices for quick JavaScript rely on how your code is written. As we’ve been taught to code in the Web Design and Online Communications program, JavaScript should be kept in external files, and script links should be placed at the bottom of your pages, so it loads after the html. Another great effect from external files, is they get cached by the browser – leading to faster loading times on subsequent visits. One vital tip is to make sure all vital parts of your page, such as content, basic functionality, and contact information are not relying on your JavaScript code to populate.

Other Misc Tips

You can also use other techniques such as prefetching (a performance optimization tactic in which content that may be accessed by a user is downloaded in advance), lazy loading (a technique for loading content as it is needed rather than all at once), or leverage cashing (changing the request headers of your resources to optimize your cashing strategy). Also, combining multiple files of JavaScript or CSS files and minifying them can speed up your page performance as well. (Just be sure to save a ‘normal’ version of these files for easier modifications later)

What About WordPress Sites?

In addition to all of the tips previously mentioned for images, CSS and JavaScript, there are a few extra tips that pertain to WordPress sites. The first is to identify if there are any plugins installed on your WordPress page that are slowing it down. Another great tip is to clean out your database; WordPress keeps draft versions of your pages and posts in your database, cleaning these out can speed your page performance immediately. Also, turning off pingback and trackbacks to your site under the ‘discussion’ tab in ‘settings’ can help speed up your website.

So Basically…?

What it all comes down to is your host, your code, and your images. Use a good or quality web host. Remove any old or unused code, functions, links, scripts, etc. Optimize your images for use on the web. When you’ve got a lot going on in your CSS or JavaScript files, minify your code.

Other sources used: