5 Mobile Site Performance Challenges (and How to Fix Them)

As of Q3 2019, mobile devices account for about 52% of all web traffic, but mobile optimization still lags behind web optimization. Site performance has a huge impact on conversion, so there is a lot of opportunity for many businesses to see big gains in their mobile business. So, what are some of the most common performance issues slowing down mobile sites?

1. Making too many HTTP requests.

Connection time and latency are two of the primary factors in mobile site performance and directly related to the number of requests. As the number of HTTP requests made for different components (images, scripts, stylesheets, etc.) increases, so does the time it takes for the website to load on a mobile device.

2. Images are large and not optimized for the screen size of the visitor device.

Larger images generally mean larger file sizes. As a result, the mobile browser will take more time to display images properly. Images should be served based on the visitor’s device type, and should be appropriately sized to that device’s screen size. Compression of images is naturally important to both the web and mobile, especially when a mobile device is using a 3G or 4G cellular connection.

3. Redirects take up valuable loading time.

According to Google’s guidelines, developers should avoid redirects in order to reduce latency. (See: “Making too many HTTP requests”). Redirects that utilize JavaScript are especially costly, as the mobile page will first have to render on the visitor’s browser, and then redirect to the new page and load within the browser all over again.

4. External JavaScript inhibits performance.

Third-Party JavaScript will slow down your site. According to Search Engine Watch, external JavaScript — which any tag-based optimization tool depends on — is even heavier than images or videos on your mobile site. In other words, nothing will slow down your mobile more than adding in content-changing JS tags. Patrick Meenan, software engineer at Google, says: “Scripts are usually a (bigger) issue because of the time it takes to actually execute the script in addition to the download size, while images really only matter because of the download size. With mobile devices for example, it can take several seconds to run a script even after it has been downloaded.”

5. Loading the entire page takes time and creates a poor user experience.

Loading the whole page of a mobile site can consume a significant amount of extra time and increase the number of requests that make the overall user experience poor. For example, if you have an image gallery on the lower section of a page and a smartphone visitor will not immediately see the gallery on their device, it will still cause everything else on the page to load more slowly as a result of the whole page loading at the same time.

There are a number of best practices for mobile optimization to address each of these five challenges and ensure your mobile site is loading as quickly as possible. The end goal should be to load the mobile version of a page in one second, as that is when visitors begin to lose attention to your site. To get started, measure your mobile site performance, and then jump into the list of suggestions below to reduce mobile response times as close to one second as possible.

Removing HTTP requests.

This is crucial for mobile web performance, but how do you remove these requests without removing features and functionality? Image spriting is one example that removes individual HTTP requests as a result of concatenating images into one image. You can do the same thing with stylesheets and JavaScript files but research from Google suggests that modern browsers perform better without concatenation of CSS and JS. Another approach is inlining small images, CSS, or JS into the HTML page. Regardless of which approach you take, we recommend A/B testing these optimizations, as they will have different impacts on different pages, browsers, and devices. Then segment by device and look at the impact of A/B testing by device and browser types on your optimizations to really focus on specific performance improvements for core segments of your audience.

Reduce image size by compressing images.

…And ensure you are using the optimal web format. Some common formats that generally produce small image sizes are JPG, PNG, and in certain cases, GIF. In addition, mobile versions of the Chrome and Firefox browsers support WebP, that generally has much smaller file sizes.

Use server-side redirects.

This will make page changes more efficient for the end-user. This may require changes to your URL structure and should be discussed with internal IT personnel before any changes are made. Note that SiteSpect splits URLs on the request, avoiding redirects altogether.

Minimize the amount of extraneous JavaScript and third-party scripts.

Ensure that any JavaScript content is loaded asynchronously so that the browser will not be blocked from processing other static content. Also, if you have JavaScript that only applies to the desktop version of your site on your mobile pages, be sure to remove it. And, if your excess JavaScript content is from your tag-based A/B testing tool, note that SiteSpect allows A/B testing and optimization without adding any JavaScript tags.

Load content…

… that the user will see “above the fold” right away. Lazy-load any additional content until needed. For example, for an image gallery, you may be able to load the current, previous, and next images only and then lazy-load remaining images to optimize performance. In addition, there are many cases where you can use CSS3 instead of images.

Take into account these best practices as you optimize your mobile site, and more importantly, A/B test each change to obtain a data-driven understanding of what works for your visitors. Real User Monitoring (RUM) metrics will allow you to measure crucial time-based information such as the amount of time a visitor stays on your mobile page. Finally, make sure that your optimization efforts aren’t actually undermining site performance. A performance-first approach to mobile optimization will ensure that you truly optimize your user experience, no matter the device.

As the industry moves to a greater percentage of mobile type devices, it is more important than ever to deliver an optimized experience to the user when A/B testing. If you have an experience that is implemented in such a way that it introduces significant lag or performance issues, the results of the A/B test that you deliver to your users can be tainted or invalid; e.g the user reacts to the delivery of the experience rather than the experience itself. Wouldn’t it be helpful to see the impact of an experience of change to your site in your reporting? Real User Monitoring (RUM) integrated in SiteSpect offers that.

To learn more about SiteSpect, visit our website.