5 Ways to Optimize Your Website's Mobile Performance

It’s no secret that optimizing your site or web application for phones has become every bit as important (if not more) as optimizing for desktops. Studies since 2017 have shown that nearly half of all visitors on the web come from mobile, and those numbers appear to be on an upward trend.

It goes without saying that we want an excellent user experience (UX) experience for our users no matter what device they’re on ... but mobile users face specific challenges.

Besides the obvious hurdles of mobile UX (which is beyond the scope of our discussion here), chances are high that a mobile user is using cellular service, which often means slower download and upload speeds compared to visitors on Wi-Fi. Google’s PageSpeed score is weighted differently for mobile for that very reason—making mobile optimization critical for both search engine optimization (SEO) and UX.

Luckily, we can break down how to reach peak mobile performance optimization and avoid pitfalls with five simple, discrete avenues of attack.

Avoid Render-Blocking Content

As discussed, page speed is only further emphasized with users on a cellular network. That is why loading your content as quickly as possible is of the utmost importance. Users are generally more tolerant of loading times as long as there is feedback present on the screen that something is loading. You prevent visible content by adding unnecessary render-blocking javascript and CSS before the more important bits.

So what is render-blocking content? Well, it’s any resource that must be loaded before the browser can continue loading the rest of the page. That means, technically, HTML is a render-blocking resource (albeit a critical one). The idea is to determine non-critical render-blocking resources and move them to the footer or bottom of the page, making the site feel faster

There are exceptions to this rule: It’s common for a library like jQuery, for instance, to be loaded early on the page because so many scripts are dependent on it. Or maybe you want the styling for a loading screen to be present before the content. But these are exceptions, not the rule. 

Render-blocking content is often one of the biggest culprits in both desktop and mobile performance, so move what non-critical files you can to the bottom of the page.

Utilize Lazy Loading

You can think of lazy loading as avoiding render blocking for images. Images can be some of the largest assets on your site. Although you can certainly compress images (more on that later), some pages can make use of dozens of images which significantly impacts loading times. So, similar to moving non-critical render-blocking resources to the footer, you can “lazy load” non-critical images on your site.

Lazy loading is offloading the loading of an image until it becomes visible within a user’s viewport. This can be done with a variety of javascript plugins, and some browsers even support it natively, though universal support is still a ways off at the time of writing. 

Lazy loading can be a powerful optimization tool, especially for sites or web applications with large numbers of images.

Optimize Your Server Setup

There comes a point where optimizations on the front end of your site reach diminishing returns. This is when, typically, changes to your site’s back-end, server, or hosting solutions will net the biggest gains in raising your mobile Google PageSpeed score (and similar optimization tests). 

This can be wide-spanning category, but I’ll mention the biggest and most common culprits:

• A Slow DNS Host

  I’m sad to say that not all hosting providers are created equal. Cheaper or less-reputable solutions often provide slow server performance, which can sabotage an otherwise well-optimized site with sluggish response times. Consider upgrading to a better optimized plan or moving to a new host entirely if this becomes an issue for you.

• Not Using a Content Delivery Network (CDN)

  Making use of a content delivery network (CDN) can be a major win for your mobile users. When someone visits your page, they’re often pulling resources directly off the site’s server, which could potentially be somewhere on the other side of the world. CDNs allow assets to be referenced in nearby servers (or “nodes”) where cached resources may be far closer and more quickly accessible, boosting your site’s performance and speed scores.

• Large Numbers of Redirects

  Redirects can be a useful tool for your website (especially if you’ve migrated already-existing content to a new URL), but excessive use of redirects can cause unwieldy chains or—even worse—redirect loops. Although they aren’t solely specific to mobile optimizations, chains and loops can cause slower load times and affect your SEO score. Be sure to make deliberate use of redirects and cut down on chains as you spot them. 

Compress, Compress, Compress!

Like most optimization methods on this list, compression deals with mitigating your load time by working around assets that add waiting time to visitors using a cell network. One of the most common mistakes in web optimization is not compressing your assets. This could include making use of images larger than 500kb, unminified javascript and CSS, or not using GZIP compression on your server. 

Compressing your assets for the web can exponentially speed up your site. It can be as easy as running your images through a service like TinyPNG or getting the minified version of your resources with a site like Minify. And using server gzipping can reduce page weight as much as 70 percent. 

Small changes can have huge ramifications for SEO, so don’t let your pages go uncompressed!

Keep a Cache

Finally, caching is a powerful tool for desktop and mobile performance optimization. There’s a chance that the content on your site doesn’t update frequently. As a result, having the user reload every resource on the page can be unnecessary and time-consuming. 

Caching—either on the browser or server—can increase performance by creating a copied (cached) version of the page instead of loading the page anew each time a user visits a page. Caching can be customized to expire at specific intervals or specified custom events, and the effects are in line with the same kind of resource benefits you’d get using a CDN for your assets.

Website Mobile Performance Optimization: A Win-Win

As phone-based web traffic increases and Google seeks to emphasize mobile-first performance, being on top of optimizations for mobile becomes that much more critical. Be sure to regularly check your performance score on Google PageSpeed Insights, and utilize the methods above to achieve the best scores possible for your brand.