This post was submitted by a TNS experts. Check out our Contributor page for details about how you can share your ideas on digital marketing, SEO, social media, growth hacking and content marketing with our audience.
Lower your mobile page speed and convert your online shoppers into your happy buyers. Learn here how..
Today, more people access the web from a mobile device than from a desktop one. Unfortunately, we haven’t done a great job of making the web fast for the majority of them.
This has led to a kind of paradox where internet connections are getting better, but mobile page speed mostly hasn’t improved. In some cases, it’s even gotten worse. Data from the HTTP Archive shows no improvement in any of the important mobile speed metrics, tracked over the last 10 years.
At the same time, everyone knows how important speed is. For years, we’ve seen that faster sites have higher conversion rates, lower bounce rates and overall - a better user experience.
That’s why in this article, we’ll cover the most important techniques for optimizing mobile page speed.
But first, two important things to keep in mind about the mobile web.
1. Why is Mobile Speed a Problem?
On mobile, we have a smaller viewport, meaning we have less space to work with. That’s why it’s easy to clutter pages with unnecessary buttons, images and other content.
While this is traditionally a design problem, engineering choices also dictate how much stuff we send to our users’ devices. More on this a bit.
We’re also dealing with less powerful devices. In fact, most people on the web aren’t using the latest iPhones or high-end Android devices. According to Alex Russel:
“The worldwide ASP (average selling price) 18 months ago was ~$300USD, so the average performance in the deployed fleet can be represented by a $300 device from mid-2019. The Moto G7 very much looks the part.”
At the same time, the average mobile page weight has increased almost 10x since 2011.
So, we have less space and less processing power to work with. At the same time, we’re sending more and more resources to client devices. Keep that in mind as we go through all of these optimization techniques.
2. Shipping Fewer Resources
Again, one of the biggest mobile speed issues is the number of resources we ship to browsers.
Here’s what we can do to reduce the number of resources we’re shipping:
First, we shouldn’t be afraid to delete unnecessary elements, including sliders, pop-ups, images and videos. If something doesn’t add to the user experience, it shouldn’t be there.
Tools like Google Optimize let us easily A/B test what’s necessary and what isn’t. For instance, we can set up one page with fewer elements and test how it converts compared to its regular version.
In terms of code, JS is often the biggest problem when it comes to web performance. That’s why we should make sure there are no unused or unnecessary scripts on our site.
Chrome’s DevTools provide a way to see how much CSS or JS on a page was unused. We can find that info in the “Sources” panel under the “Coverage” tab.
The red bar shows how much of the resource remains unused on the page.
Of course, finding this code is the easy part. Refactoring is where things get difficult. However, there’s no substitute for this process - you (or your dev team) need to dig down into the codebase and figure out what can be optimized. Web.dev’s site offers a ton of useful JS optimization guides, which can make this task easier.
Lastly, combining multiple CSS/JS files into just one CSS/JS file also reduces the number of files and, consequently - the number of network requests the browser has to make. This technique is called code concatenation.
3. Shipping Lighter Resources
Now that we’ve removed unnecessary resources, it’s time to make what’s left lighter.
There are a few best practices that can help us here:
- Code compression. Compression makes HTML, CSS and JS files lighter by applying different algorithms to rewrite their binary code and encode the information using fewer bits. A lot of hosting companies do this by default, so it's worth checking with your provider.
- Code minification. Minification removes unnecessary parts from the code like comments, whitespace and line breaks. Popular web development frameworks automatically generate minified files (which usually have “.min” in their name), so again - check whether your site already does this.
- Choosing the correct image type. Images are often the largest elements on a page, so we need to optimize them. For logos, geometric shapes and fine art, SVG is the clear format winner. For most other images, either WebP or JPEG provide a nice balance between quality and file size. However, sites that absolutely need high-quality images (like photography or art sites) should probably stick with PNG, although their speed will take a hit.
- Experiment with image compression levels. Similar to code compression, image compression also makes files lighter. Of course, as we crank up compression levels, the image quality also gets worse. That’s why we need to experiment and find the right balance between speed and image quality. The Squoosh app provides an easy way to do that.
Lazy Loading and Serving Responsive Images
Another thing we can do is help the browser load only the images that visitors are currently viewing. This can hugely reduce initial page load time.
The technique is called image lazy loading (or deferring offscreen images) and it's an absolute must. Its impact on load times can be even bigger than compressing images and changing their type. Lazy loading can also be applied to videos.
We can simply add loading="lazy" to the HTML markup for images that should be lazy loaded.
<img src="image.webp" alt="randomimage" loading="lazy">
Unfortunately, as of mid-2021, this method isn’t supported by all browsers. If we want full coverage, we’ll have to use a tool or write some JS code.
Another big mistake that website owners make is to use one large image for all viewports. At first, that sounds like a good idea since a large image won’t lose quality when shrunk.
If an image is 700px wide it might look good on a 300px display. But all 700px still have to be processed and that’s a massive waste of bandwidth.
One solution here is to use the srcset attribute, which lets us provide different variations of an image. After that, the browser chooses the best one, depending on the viewport.
Some huge websites use this approach, including Airbnb:
All we have to do is run a few tests with DevTools to see how each image looks on different devices. This helps determine what image sizes to provide.
Again, the best part here is that browsers do the heavy lifting of deciding when to serve each image.
4. Helping Browsers Render the Page Faster
So, we’re now shipping fewer lighter resources. We’re also reducing initial page load time with lazy loading and providing different size images depending on the viewport. That’s a pretty good start for our mobile page speed.
It’s time to help browsers visualize the page even faster.
A big problem here (again) are CSS and JS. Both resources are render-blocking because browsers need to stop what they’re doing and process each CSS and JS file they find.
In short, browsers must download, parse and execute these files before continuing with anything else like rendering the page or responding to user interaction.
That’s why we need to be smart about the way we deliver CSS and JS. There are a few techniques that can help us with that:
- The first one is Critical CSS. It involves finding the CSS responsible for above-the-fold content and inlining it in the page’s head tag. Doing that helps browsers prioritize and render above-the-fold content fast, which is crucial for the user experience. We can then load the rest of the CSS asynchronously.
- We can also reduce the unused CSS on a page. Oftentimes, CSS rules are processed, even if they aren’t applied on the current page. For example, if we’re on the home page, we don’t need the CSS that styles blog posts and vice versa. But because the rules are in a global stylesheet, browsers have to deal with them, regardless if they contribute anything to the page. Reducing this unused CSS helps browsers render the page faster by cutting the number of operations they need to perform. Implementing Critical CSS and removing unused CSS can both be automated with NitroPack.
- We can also make JS scripts non-blocking with the async attribute. JS scripts with this attribute load in the background and run when ready. The DOM and other scripts don’t wait for them. This technique is usually applied to the analytics and ad scripts provided by companies like Google and Facebook.
- Lastly, code splitting can be hugely beneficial when dealing with JS. The idea here is to split our JS bundle and only send the code needed for the initial route. This minimizes the amount of script that needs to be processed at one time. Code splitting is a feature in popular bundlers like Webpack and Rollup, so there’s lots of information on how to implement this technique.
5. Test Your Site Regularly and Focus the User Experience
Everything we covered here is pretty much a must if you want fast mobile pages. At the same time, there are lots of other optimization techniques.
Testing your most important pages regularly can help you find other areas for improvement and understand how real people experience your site.
A popular tool for this job is Google’s PageSpeed Insights.
It offers many useful improvement suggestions in the “Opportunities” and “Diagnostics” sections. More importantly, it shows metrics from real users (in the field data report)
Make sure to monitor these real-user metrics closely. They’re the best indicator of how visitors experience your site.
Google Search Console also provides field data (i.e., real-user metrics) in its Core Web Vitals report.
We can use it to track how collections of pages are performing.
These tools don’t have real-user metrics, but they’re still a great addition to our tool kit.
Lastly, Google’s Mobile-Friendliness Tool can help us find loading issues with the mobile version of our site. This tool also shows us how Google “sees” our site, which is huge from an SEO perspective.
6. Make Speed a Priority
Listing tips and tricks is great, but it's rarely enough to drive any meaningful action. In the real world, things are messy and speed optimization often gets pushed to the side.
For most businesses, web performance isn’t nearly as exciting as designing new pages, adding functionalities, or marketing a product. But speed can be the ultimate make-or-break factor for your online success. And you need to treat it accordingly.
If you’re running your site alone, that burden falls on you. Research optimization strategies, talk to experts and look for addons/plugins that can help you automate the process. It won’t be easy, but the benefits can be massive.
On the other hand, if you have a larger team, you need to set everyone on the same page. Speed optimization typically requires engineering work, so, at the very least, the dev team should be closely involved.
To see the real impact of performance, you’ll need to correlate speed to important business metrics like conversion rates. Usually, this means involving the marketing team.
Regardless of your company’s structure, everyone needs to understand why speed is so critical. That's vital to the success of the endeavor.
Test your site, find problem areas and get everyone on board about the importance of performance optimization. Good luck!
Subscribe to weekly updates
You’ll also receive some of our best posts today