Faster, slicker, quicker; the 3 things that we all want websites to be, and yet they don’t always go hand in hand. We all know that slick can mean slow, with elements such as hi-res images and interactive features being real killers for load times (which, in turn, can be a real killer for organic search engine performance). So how are we best to optimise website speed to please both search engines and real time users in 2019?
Video Optimisation
Videos are as popular as ever but can be culprits for slowing down site speed if you don’t play smart when you implement them.
We’d recommend:
- Only adding 1-2 videos per page, don’t expect a page with a lot of video content to ever load quickly. This type of layout will also be more friendly for users, as they will be able to visit different subpages with videos tailored to the content. You can always ensure your onsite navigation is very slick to direct them to further, related videos if needed.
- Embed them instead of hosting – this means you are linking to a third party video hosting service (such as YouTube) instead of hosting the video content directly. This can speed individual pages up considerably, but does have the downside of meaning you rely on YouTube to choose the right thumbnail for your content, as well as limited customisation in terms of Titles and Ratings. B2B customers may also be blocked from using popular video sites such as YouTube at work, which would be a problem if you are trying to sell to a B2B audience.
- Use a high-speed video player that supports quick time loading. This can cut down on how long a video takes to load for users, which in turn enhances their site experience.
Image Optimisation
Images have and will always be the crux point between great design and great site speeds, but as time has gone on, developers have become smarter in how best to create a middle ground to keep both users and search engines happy.
We’d recommend:
- Format your images to use the best format per page and function. You don’t really need to be using PNG files for small, footer images for example, when JPEG would serve the purpose just as well and have a smaller file size. Optimising your image use in this way will also take up less server space.
- Remove unnecessary images. Do you really need all 20 product images, or multiple images to accompany every blog or news piece you write? If you’re just adding them for the sake of something to look at, then it’s worth reviewing your strategy and making sure that the images you’re adding are worthwhile and won’t just mean additional scrolling for your users.
- Use web fonts instead of encoding text in images. There are some beautiful web fonts out there that will look just as good as text you encode in images and save loading time at the same time.
- Compression is key. Compression will remove unnecessary elements to reduce file size without impacting quality, such as geolocation and additional colour profiles.
Code Optimisation
HTML/CSS/Javascript are all culprits for speed issues, especially on older, legacy sites where different code types and formats have been added over the years with no real structure or streamlining.
We’d recommend:
- Combining as many scripts together as possible, which will in turn minimize HTTPS requests
- Use CSS instead of images. CSS is much lighter and will help things load quicker
- Review the redirects on the website; older ones (6 months+) may no longer be needed, and by removing them you are reducing the number of HTTPS requests made to the server.
One thing we would add is to use the page speed tool supplied by Google – if you’re optimising to get top marks in Google, then using their Developers tool is the best way to try and make sure you get high marks in the speed stakes. This looks at FCP (First Contentful Paint) and DCL (DOM Content Loaded) factors, which then in turn give you an Optimisation score and pointers for improving it.