Content Optimisation

We use content optimisation as one of the key processes in the way that we improve the way the FGH products deliver content such as Images, HTML & CSS to the customer.

Purpose

Optimising the way that we deliver content such as HTML, CSS & Images to our customers can vastly improve both the load time of our websites, and the experience the customer has as a whole. FGH Products need to respond quickly to requests from customers, as they expect fast and reliable online user experiences from every website.

Benefits

SEO Ranking

Website speed is on the Google PageRank algorithm since 2010. But from 2016, the speed at which mobile pages load has been a major factor in their mobile search rankings. These changes also take into consideration loading times from the user perspective. So, the user’s location and internet speed will affect the results.

Improved User Experience

One of the main reasons to improve the speed of a website is to improve the overall user experience. Google issues aside, many users will still abandon FGH products with poor performance. Currently we put a lot of effort into engaging potential customers through content and imagery, however the real first impression is the website loading time.

Key Aspects

There are several aspects to optimising the content across the FGH product experience, these include HTML, CSS, Images & JavaScript

Images

Image optimisation is mainly about reducing the file size of images as much as possible, without sacrificing quality or size in order to ensure that page load times remain low.

Do

Serve properly sized images, only outputting the maximum image width for retina screens.

Don't

Serve unfit for purpose image sizes, particularly on touch devices. This can include images too small or too large.

Do

Serve images from the FGH content delivery network (CDN), Adobe Scene 7

Don't

Serve images above the size of 250kb, especially in instances where these images are rendered above the fold.

Do

Defer offscreen images with lazy loading where appropriate

Don't

Heavily optimise your gifs before uploading to the CDN

HTML & CSS

Removing bloated HTML and CSS files are key to optimising content across the FGH product experience. CSS especially is a render blocking resource, which means that the browser won't render any content until the CSS has been read.

Do

Remove commented out or uneccesary blocks of code. If they are not needed on the page they should not be read by the browser.

Don't

Use overly complex selectors, deep nesting in this way can make code messy and take longer for the browser to parse.

Do

Ensure that large blocks of code, especially those with images, are not set with a display:none; property.

JavaScript

JavaScript tends to be used across FGH products to trigger visual changes, such as sliders, or to display a dropdown menu. When this script takes too long to run, performance can be severly affected, to this end we need to minimise this impact wherever we can.

Do

Remove any unused javascript libraries as soon as possible. References to these files in your code are still parsed by the browser.

Don't

Import many large, unminified javascript or jQuery libraries as a solution. Notify a member of the ecommerce team who can advise on a solution.