by Chris Beard, Web Development Manager
SEO and page speed improvements
We wanted to give a summary of some of the website developments that our team have been working on recently for the Keele website.
This is some of the ongoing work to improve our Search Engine Optimisation and User Experience.
More granular cloaking (hiding) of elements as they load.
The aim of this work is to increase the perceived load time of a page and improve SEO page performance scores.
The site uses the JavaScript library ‘VueJS’ to render a lot of the page layout elements. This can take time to execute on page load, especially when a user first visits the site as they need to download the majority of JavaScript code and then have their browser execute it.
Previously we hid most all elements on the site until the appropriate styling was loaded in the background and then showed it to the user.
We’ve now focussed this at a more granular level so that we only target and hide elements that look particularly messy on the initial page load. We’ve also inserted placeholder elements on the page so that the user can see elements are loading. This makes it so that the user will see the title and body text almost immediately on page load, and will then see additional items (e.g. search box, navigation, interactive elements) once the relevant code has downloaded in the background.
Lazy load images and videos
Lazy load means that images/videos will only load once users have scrolled to them on the page. This reduces the initial page load time.
We already lazy load the templates that account for around 80% of all images. We’ve now rolled this out to more content types, as well as the YouTube embed template.
Image sizes
We’ve re-audited all the core images that are outside of the automatic image compression (that already automatically compress using the webpack framework) and have dropped these into further image optimisation programs (ImageOptim). This will help page speed as users progress through the site and load these various elements e.g. icons and UI elements.
We use the industry standard Google Lighthouse for page speed and SEO audits and cumulatively, the above changes have considerably improved our overall rating.
