Page speed really matters to web users, which is why Google has always taken it into account within its desktop search rankings. As from this month (July 2018), however, it will also be factored into Google’s mobile search rankings as part of its new ‘Speed Update’.
In today’s competitive, ever-changing marketplaces, great online performance is of utmost importance. However, a report recently compiled by digital marketing agency, Visualsoft, found that 87% of the UK’s top online retail brands alone are risking a significant drop in their visibility by neglecting mobile site performance; rating as ‘poor’ in terms of mobile site speed.
As part of the report, Visualsoft has highlighted several changes that businesses should look to implement, in order to improve the performance of responsive solutions on smartphones and tablets, and support the ongoing optimisation of their site.
These simple steps have been proven – through Visualsoft testing – to provide a 68% reduction on perceptual load times, a 64% reduction in homepage weight (which reduces bandwidth costs), a 43% overall load time improvement on 3G speeds and a 39% improvement in ‘first interactive’ (when a page is minimally interactive for users).
Whilst these changes should be implemented as quickly as possible to ensure the Speed Update doesn’t have a negative impact on business, it’s important to remember that site improvements should be actioned on an ongoing basis, in order to boost sales and truly future-proof excellent user experience.
Improvement one: lazy loading
Lazy loading is the practice of only showing ‘below the page fold’ images when a user scrolls to view them, as opposed to fetching and loading everything when a user lands on a page (regardless of whether they’re going to scroll down or not).
Online brands should switch to this format; only loading what a user is definitely going to see, instead of serving everything at once (which is usually premature or completely unnecessary). Pages can be displayed on mobiles and tablets in a shorter timeframe and they eat up less mobile data, too.
Improvement two – image optimisation
Businesses should reduce file sizes and ensure that the right images are shown to users based on the device they’re using. Adding an image compression functionality to a site’s admin system will also ensure that uploaded files aren’t larger than necessary (without compromising quality).
In addition, companies should work to ensure that size-appropriate image files will be served to mobile visitors and retina displays (where retina images are available).
Improvement three – hidden content removal
As space is limited on mobile devices, content is often scaled down on the mobile version of a site when compared to the desktop version. Key to improving speed is to implement server-side mobile detection, which can prevent it from even loading. This means that the site in question will no longer be attempting to fetch and then hide desktop-only images and/or features, which improves its perceptual speed to users.
Improvement four – visual content priority
The display priority of elements on a responsive webpage may currently be determined after every element had fully loaded. However, companies should change element priority, so that it is pre-determined based on page positioning/user requirement.
By doing so, elements will be loaded in the order that they’re needed, as opposed to all elements loading at once and then all hiding until each one is required (similar to actors coming onto a stage only when they’re due to say their line, instead of all scrambling onto the stage in advance of a performance).
Improvement five – carousel control
Rotating carousels – also known as image carousels – are commonly used by online brands, however there is a growing argument that says they’re largely ineffective as customers tend to ignore them.
They can also cause perceptual speed delays on mobile devices as all images must be loaded in regardless of whether a user looks at them or not. In light of this, online businesses should add an option within their admin system, allowing them to choose whether to display homepage promo unit images and/or slither banners as a rotating carousel or as stacked images on the mobile version of the store.
Improvement six – font compression
Typography is an important element of design, however bloated font files can really slow a site down so it’s important to strike a balance between aesthetic and performance.
Online businesses should switch to using WOFF2 web compression format for fonts (within applicable browsers), as it can offers= a significant reduction in file size.