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.
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.
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.
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:
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!
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.
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.