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

male hand holding a smartphone, selective focus

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.

2. Choose an efficient image format

With so many formats available, it can be difficult to know which one is the most efficient. It all depends on the use case, but choosing the correct format can already save some bytes from your page size. Aim to start with WebP, which can be used for photographic and translucent images at 30% more compression than JPEG, without loss of image quality. Then fall back to the following for full browser support:

  • JPEG: Photos with no transparency
  • PNG: Transparent backgrounds
  • SVG: Scalable icons and shapes

Within Google, we’ve employed this approach on the Fighting Piracy site, where the team used the SVG format to create smooth, lightweight animations made from simple shapes. Previous design concepts of this page included GIFs and videos of over 300 kilobytes each, more than twice the recommended size.

However, by enforcing page-weight budgets as part of their growing performance culture, the team was able to reduce image weights tenfold. This required a close technical collaboration between the developer and designer, but the mobile speed improvements were well worth the effort.

3. Compress and resize imagery

Optimizing images can help you achieve the largest byte savings and mobile site performance improvements. Even the most basic optimizations — like compressing images, removing metadata (such as the date and time), and experimenting with quality settings — can help. And now, it’s easier than ever to serve responsive images as developers define multiple sizes of an image and the browser chooses the best fit for the user’s screen size.

Best of all, much of this can be automated to save time and ensure that images are always optimized. For instance, your hundreds or thousands of images could be resized and compressed automatically with a script. This reduces manual work for designers, freeing up their time for more exciting work.

When building an Accelerated Mobile Page (AMP), the custom image tags make many of these same optimizations automatic. The Google AMP Cache also limits the maximum image dimensions to prevent browser memory issues and caches images for faster future loading.

In the case of BMW, the luxury car brand set out to create a high-performance, mobile-first approach while maintaining its beautiful images and videos. Thanks to AMP’s efficient image tags and other speedy features, the new AMP site achieved a load time up to 4X faster with a 50% increase in mobile users. As a bonus, the website combines the speed of AMP with the rich features of Progressive Web App (PWA) technologies to offer a high-quality, app-like experience.

4. Use loading techniques

Compressing and resizing images is the basic approach that every designer and developer should enforce. To go one step further, developers can conditionally serve different versions of the image based on the user’s device, screen size, or even the quality of their network conditions. This enables developers to build a fast-loading site for everyone, regardless of their unique browsing conditions.

Once your images are effectively optimized, make sure they’re delivered at the right moment. When users first land on your page, they want to instantly see all the content within their viewport, often referred to as “above-the-fold” content. With a technique called lazy loading, you can enable your webpage to prioritize loading the first available images in this limited view, while off-screen images are loaded at the moment of need.

German e-commerce company bücher.de only loads images if they enter the area visible to the user. The content in the visible portion of the page is prioritized so it loads instantly. Through this and other page optimizations, they were able to speed up their site by 33% and reduce load time to 3.5 seconds.

When large images take longer to load, it’s useful to implement progressive loading techniques like placeholders, progress indicators, or efficient formats like progressive JPEG. This gives users the feeling that progress is being made and will keep them engaged on the site longer. As Design Advocate Mustafa Kurtuldu says, “The idea is to fill the space and occupy your time.”

Next steps: Make mobile speed a KPI

Optimizing images is a simple and cost-effective way to improve conversion rates on your brand’s site. But to make speed optimization sustainable for the long term, site speed must be a KPI across your organization.

To learn more about your site’s mobile page speed, try the revamped Test My Site tool.

Sources
https://www.thinkwithgoogle.com/intl/en-apac/ad-channel/mobile/mobile-speed-strategy-and-performance/

Get a FREE 1-to-1 SEO Service Consultation

Fill up below and we will get back to you a FREE 1-to-1 SEO Service consultation on how to grow your business in Google!

Latest News

What’s New in SEO & SEM ?

  • All
  • Blog
  • SEO Malaysia
  • Website Design
All
  • All
  • Blog
  • SEO Malaysia
  • Website Design
4 useful suggestions for using SEO into your business

4 useful suggestions for using SEO into your business

SEO is a strategy that includes approaches for optimising websites, blogs, and other web pages in order to get visibility …

What factors contribute to an excellent web page design

What factors contribute to an excellent web page design?

Talking about your firm on your own website is obviously crucial; once consumers go to your website, they certainly want …

Catchall Redirects Are a Bad Practice

SEO: Catchall Redirects Are a Bad Practice

I recently learned a new phrase from a prospective client: “limbo page.” He used the term when describing his company’s …

How to Deal With a Negative Review Attack

How to Deal With a Negative Review Attack

One Sunday, as our church was holding our outdoor patio service, a hummingbird got stuck in the skylight in the …

Google Muzzles ‘Self-serving’ Review Snippets

Google Muzzles ‘Self-serving’ Review Snippets

With a new algorithm, Google is determined to remove “self-serving” reviews from rich snippets in search results. Thankfully for ecommerce …

SEO Tips When URLs Differ for Mobile and Desktop

SEO Tips When URLs Differ for Mobile and Desktop

If you still have a separate mobile ecommerce site, meaning that you have different URLs for mobile and desktop, your …

Young content creator girl is on her laptop sitting on the sofa. Working with photos from home

SEO: That Blob of Text May Not Be Helping

Adding on-site text for search engines and not users could confuse algorithms and may amount to keyword stuffing, according to …

Asian fashion female blogger online influencer holding shopping bags and lots of clothes on clothes rack for recording new fashion video broadcast live video to social network by internet at home.

11 Steps to On-site Video SEO

Once you decide to invest in video, you still need to figure out how to get people to view and …

find-your-audience-on-digital-and-storytell-with-data

Perspectives: Find your audience on digital and storytell with data

With so many fascinating tales to tell, Netflix aims to ignite conversations across Asia that will get consumers excited about …

male hand holding a smartphone, selective focus

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

Editor’s note: A version of this article previously appeared on Think with Google Nordics & Benelux. It addresses the importance …