Optimising for the web

Web development

Saturday, Nov 11th 2017

Code

Before I make a website live, I make sure it is ready for the World Wide Web, I start by validating all my code. I always validate my code as the process can be used as a debugging tool, which means that if I missed any errors within my code, the validator will tell me what is wrong so I can fix it.

W3C HTML and CSS validation tests results

To validate all my HTML and CSS, I use both W3C Markup Validation Service and the W3C CSS Validation Service. I got warnings on both my HTML and CSS but these can be ignored are they are elements that are unknown to the validator.

Optimisation

To ensure pages load fast, I used the save for web option within Photoshop to optimise my images, as it allows me to lower the image size and quality to make the overall file size is smaller. My technique for optimising images starts with me resizing the image to a smaller size that is needed and for some images, I make them at most, 1.5x smaller than the desired size to further optimise it. Then I decrease the quality of the image to a point where any lower begins to degrade the image, this ensures I can have the smallest file size possible for images, making them take up less space and load faster.

Next, I used Google’s PageSpeed Insights to analyse my website to see how the performance is for both mobile and desktop and score it accordingly out of 100. My overall score was 91 for mobile and 97 for desktop, with a few possible optimisations being recommended.

Network waterfall results for this website

Then I went on the network tab in the developer tools on Google Chrome to record how long my website loads. Once I refreshed the page, the network tab will record how long each file gets delivered, therefore giving me an overall load time. My site takes around 800ms to load and it takes 2 seconds on a 3G connection.

SEO integration

Search Engine Optimisation is one of the most important parts of a website as good SEO means the website is optimised for a search engine which can help you achieve a higher ranking. For my website, each page uses the standard keywords and description meta tags with some extra tags for social media.

The extra tags are for both Twitter and the Open Graph protocol where it makes a website a rich object in a social graph. The Open Graph protocol was developed by Facebook and many sites use it to display your site. A good tool I used to check my meta tags is Rich Link preview where the site would validate the various meta tags to show how different sites would use and display them. The website also gives you feedback on the tags to let you know if you need to make any improvements. The last step is to test the website with both Facebook’s Open Graph debugger and Twitter’s card validator so you can both validate the tags and whitelist the website so they can be used on their platforms.