Visualsoft

Core UpdateMobile Optimisation

Page speed really matters to web users, which is why Google has always taken it into account within its desktop search rankings. As from July 2018, it will also be factored into Google's mobile search rankings as part of its 'Speed Update', so it's more important than ever to deliver fast-loading pages on mobile devices.

We've been working closely with Google and a number of leading online retailers to improve the performance of our responsive solutions on smartphones and tablets, and we've achieved some impressive results.

This report details the changes we made to our platform to hit the numbers shown below, and the rationale behind the changes. It also offers guidance on what actions you can take to support the ongoing optimisation of your store.

68%
Reduction of perceptual load times (based on Speed Index metric)
64%
Reduction in homepage weight (which reduces bandwidth costs)
43%
Overall load time improvement on 3G speeds
39%
Improvement in 'first interactive' (when a page is minimally interactive for users)
Numbers shown are average results across test group. Measured via Google's WebPageTest.org

Improvement 1Lazy Loading

We've improved our lazy loading functionality, and in advance of Google's Speed Update, it will become a standard feature on all responsive wireframe stores on our platform.

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).

By 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/tablets in a shorter time frame and they eat up less mobile data too.

Will I notice this change on my store?
Yes - once we make this updated functionality standard on all sites, if you rapidly scroll down your site on a mobile device, or quickly flick through large promo images, you may notice content loading as you view it.

Lazyload Demonstration

Improvement 2Image Optimisation

We've made some updates to reduce file sizes and ensure that the right images are shown to users based on the device they're using.

We've added image compression functionality to your store's admin system to ensure that uploaded files aren't larger than necessary (without compromising quality). We've also built in an Image Reprocessor which you can use to quickly update images uploaded in advance of the rollout. A link to the Reprocessor will be added to your Promo Units admin screen in advance of the Google Speed Update in July.

In addition, we've carried out work to ensure that size-appropriate image files will be served to mobile visitors and retina displays (where retina images are available). We've also updated our Wordpress integration to ensure the images it sends over to stores (where applicable) are optimised.

Will I notice this change on my store?
Apart from the new button on your admin screen, you shouldn't notice anything different as we've already rolled out this improvement. If you do have any issues with the quality of your images, please get in touch.

Image Optimisation Demonstration

Improvement 3Hidden 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. Previously we've hidden desktop-only content when a site is viewed on a smartphone, however by implementing server-side mobile detection, we can now prevent it from even loading.

This means that your site will no longer be attempting to fetch and then hide desktop-only images and/or features, which improves its perceptual speed to users. In addition, we've also removed the Advanced Brand Menu functionality from the mobile version of responsive wireframes. The feature was already partially hidden to allow it to fit within a constrained mobile view, however this negated its user value and unnecessarily increased page weight, so we've opted to remove it completely.

Will I notice this change on my store?
Yes - if your store has an Advanced Brand Menu, the feature will no longer display on mobile devices

Hidden Content Demonstration

Improvement 4Visual Content Priority

Previously, the display priority of elements on a responsive webpage was determined after every element had fully loaded, however we've now updated this so element priority is pre-determined based on page positioning/user requirement.

This improvement means that elements are 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).

Will I notice this change on my store?
No - the changes we've made here are only visible within our platform code.

Visual Content Priority Demonstration

Improvement 5Carousel Control

Rotating carousels - also known as image carousels - are commonly used by online stores, 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, we've added an option within your admin system so you can 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 your store. You can also reduce the number of promo images/slither banners you show on mobile too. You can find these options within the edit screen of applicable Promo Unit Types within your admin.

Will I notice this change on my store?
No, however you now have additional options in your admin as described above.

Carousel Control Demonstration

Improvement 6Leaner JS

Javascript is a programming language that's used to create interactive effects within web browsers, control multimedia, and animate images.

While it's effective, it can also slow a site down, so as part of this body of work, we've re-examined and significantly reduced the javascript included within our responsive wireframes. We'll continue to review this on an ongoing basis.

Will I notice this change on my store?
No - the changes we've made here are only visible within our platform code.

Leaner JS Demonstration

Improvement 7Font 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.

To support this, we've switched from using the TTF web compression format for fonts on our stores to WOFF2 (within applicable browsers), as it offers a much more significant reduction in file size.

You can read more about webfont optimisation on Google's Web Fundamentals guide.

Will I notice this change on my store?
No - the changes we've made here are only visible within our platform code.

Font Compression Demonstration

Actions You Can TakeOngoing Optimisation

The work detailed within this report was delivered in anticipation of Google's 'Speed Update', however optimisation is very much an ongoing exercise. We'll continue to improve performance for online stores on our platform, with a focus on both technical speed and user experience.

There are also actions that you can carry out to support ongoing optimisation:

  • - Avoid displaying carousels on mobile unless necessary
  • - Minimise use of slither banners on mobile where possible
  • - Only use third-party plugins that enhance user experience
  • - Only add scripts to Google Tag Manager that clearly benefit you/your customers

Special thanks to the leading online merchants that participated in the testing phase of this project, as well as Google's Mobile Transformation Team.

Ongoing Optimisation Demonstration

Please note that if your store build pre-dates the launch of our responsive wireframe solutions (released in 2016), or your store has a bespoke layout, you will not receive this core update. If you'd like to ensure that your online store delivers a great experience to mobile shoppers, please call our Business Development Team today on 01642 633 604.