Poor Mobile Performance & Browser Problems

A support topic we receive quite often is that when customers try viewing their site on a mobile device or tablet (most commonly on gallery pages), the page is either very slow to load, transitions are jerky or choppy, or the browser outright crashes.

In almost all cases it's a result of too much data being loaded onto the page and in turn the device simply cannot process/manipulate that amount of data with the resources available to it, and it either bogs down trying to process everything, or the browser runs out of available memory (RAM), and the browser ultimately crashes.

Why does this happen?

This happens because all of the html/css/images/scripts that make up a webpage have to be loaded into the memory of the device so that it can be processed, displayed and interacted with on the page. When the total amount of data of the files that make up the page is too large, or when things like animations or interactions on the page require more memory than what is available the browser stops processing the page, and in many cases the device will actually close the application so that it can free up memory, i.e. the crash.

On Mobile Safari and iOS, there are resource limits in place to try to prevent this from happening (the browser crashing), which restrict how much data can be loaded and manipulated on any given page. Once these limits are hit, the browser is supposed to just stop loading/processing the page, but because oftentimes the browser isn't the only app running, or perhaps there is more than a single tab open in the browser; the device runs out of available memory before the limits are hit on pages with large amounts of images, memory intensive animations or scripts.

So how is this prevented?

In most instances, by reducing the total size of the page. Keep in mind that the average webpage as of Dec '13, is between 1.5 - 2MB total. In almost all cases, the images on a website are the largest contributor to that number. By reducing either the amount of images, or the filesize of images being used, we can reduce the total "Page Weight". The smaller the page, the less likely there is to be problems with performance on mobile devices, and there is also the added benefit of the page loading faster for everyone, not just mobile browsers.

So what are the limits?

The limits differ depending on device, operating system and versions, so there is no clear answer for everyone. There are also many other factors in play that can affect performance as well, such as other apps in use in the background or processes running. Just like on your regular computer, if you open up a bunch of programs all at once, the computer slows down because it has less memory and resources available to complete tasks.

The best way to combat this problem is to follow two simple guidelines to make sure you are optimizing your site the best as possible and providing a great experience for your visitors:

  1. Optimize the images you are using. You should only be using images that have been resized and optimized for the web. This means sizing them appropriately before you upload them i.e. if your images are being shown at 900x600, they should be uploaded at 900x600. Images should be exported using the 'Save for Web' functionality that many image editors provide as well as reducing the 'Quality' setting to a value that is compatible with web browsers. You should make every attempt to get the filesizes as small as possible, optimally around 50kb but never more than 200kb. There is a very common misconception that images need to be saved at 100% quality, this is false, and only applies in a print environment. In most cases, anything higher than 75% provides no visible difference in a web browser, but exponentially contributes to the filesize of the image. There is also no such thing as DPI, PPI or "Resolution" in a web browser, a pixel is a pixel and browsers render images by their pixel dimensions, nothing else. We have help docs and articles on both the support site and documentation site going over how to resize and optimize your images.

  2. Keep the amount of images on any given page to a minimum. Frequently we see clients that have galleries on their site with 50-100+ images in them, this is BAD, for many reasons, and will cause long load times, poor performance and an overall bad experience for your visitors, even on desktops. On average you should have no more than 20-30 images on any given page, especially when it comes to slideshows/galleries. If you want to show more images, that's fine, split them up into multiple slideshows/galleries, don't put them all into one. They are also much easier to be consumed in smaller amounts, i.e. rarely will people sit and click through a gallery of 100 images.

While the figure varies, most reports of browser problems/crashes both from customers and in articles, discussions and support topics across the web, happen when the total page weight exceeds 10MB. You should always try to stay well below this, and ideally as low as absolutely possible. Doing so ensures a great experience for your visitors, regardless of whether they are using a phone, tablet or desktop.