Performance and Optimisation

Having a nicely designed, fancy website is all good and well, but if the website performs poorly the website is going to fail and a lot of users will leave without hesitation. The importance of web performance is crucial and a quick look on WPOStats.com will show that minor performance improvements can produce a massive impact. For example, Netflix saw a 43% decrease in their bandwidth bill after turning on GZip (WPOStats, 2008).

Code

When writing the code for my portfolio, I tried to stay short and sweet. I ensured that I didn't end up with bloated code that would impact my performance. I also reduced my HTTP requests to a minimum as the more files the browser needs to load, the longer the loading times (Comack, 2016). Another performance enhancement I made was minifying my CSS. As I am using SASS compiled with Grunt, my CSS is automatically minified. Throughout developing my website, I tested each page using the W3C Markup Validation Service which checks the validity of my markup to ensure there are no errors which could potentially affect the performance.

Optimisation

One of the most impactful performance enhancements that I made to my website was through using the htaccess file. Htaccess is a configuration file used by Apache-based web servers that controls the directory (Kohmin, 2014). This means using the htaccess file, I can make adjustments on how the server handles my website. One of the things Google PageSpeed will advise is to 'Leverage browser caching' and this is done using the htaccess file. Leveraging browser caching will reduce the load on my web server for returning visitors and create a much faster load time for my users my storing my files in the user's cache. Another important performance enhancement I made using the htaccess file in enabling Gzip compression on my server. Gzip compresses my websites files before sending them over the user's browser, reducing sizes of my pages by up to 70% (GTMetrix, no date).

"Gzip compresses your webpages and style sheets before sending them over to the browser. This drastically reduces transfer time since the files are much smaller."
- GTMetrix

I also optimised all of my images to ensure they were at the smallest file size for optimum delivery and at the best possible quality. I used Adobe Photoshop to resize my images to a suitable size and optimise the size and then ran them through an application called ImageOptim which removes bloated metadata and compresses images without destroying the quality.

SEO Integration

In order to integrate good search engine optimisation, I ran through a series of checks. Starting with a really simple yet super effective one, page titles and descriptions. I made sure that each page had a relevant and sufficient page title and a description containing plenty of valuable keywords. All of the performance enhancements mentioned above will also contribute to improved search engine optimisation.

See the results below from Google PageSpeed Insights and WebPageTest to see just how effective these performance enhancements have been to my website.