4 mobile page speed wins to discuss with your developer, starting with images

4 mobile page speed wins to discuss with your developer, starting with images

February 22, 2019 Off By esential1@

Editor’s note: A version of this article previously appeared on Think with Google Nordics & Benelux. It addresses the importance of mobile design for both global and local brands.

In most marketing organizations, mobile speed for the brand’s website isn’t always at the top of the priority list. In fact, you may believe it’s more in your site developer’s realm than in marketing’s purview. But that’s not necessarily true. Sometimes the beautiful marketing imagery that brings a brand’s site to life can slow down mobile site speed if not managed carefully. And that runs the risk of higher bounce rates and fewer conversions, which translate to missed revenue opportunities.

If you’re looking for mobile page speed wins, start by re-evaluating the images on your site. Here are some more technically-minded tips to work through with your developer — including illustrative examples from within Google and Alphabet. These tips will help your company reap the benefits of image optimization while ultimately creating a faster mobile experience for your users.

1. Prioritize your brand site’s images in order of importance

Before optimizing the images on your site, consider whether they’re all necessary. Sure, that high-res photo looks great, but does it actually help to convey the message you are trying to get across? Can that animated GIF be simplified into a more efficient animation purely in code? Or better yet, can it be removed completely?

Removing unnecessary assets reduces maintenance and complexity. And if an image can be substituted with text or CSS (cascading style sheets used to define styles, shapes, and effects in a few lines of code), then your developers will enjoy the creative challenge and your users will save on download size.

Verily, a site within Alphabet, employed this method. It’s simple and lightweight due to the team’s image reduction techniques. The hero section uses a cleverly animated gradient image that’s only one pixel wide. While the gradient could have been created in code, this posed performance issues that were more costly and visually jarring. The designer and developer worked together to ensure the perfect balance between aesthetics and mobile site performance.

On mobile, this animation is even further simplified to a solid background color, which changes gradually in a coded sequence. The simplicity of these animations allows for a lightweight page without heavy JavaScript frameworks or excessive file sizes. Even when simulating a 3G network, the homepage achieves a near-instant load time and a Lighthouse Performance score of 92. This is just a few milliseconds away from making it into the top percentile of high-performing sites.