Mobile devices represent a significant, and growing, portion of all Internet traffic (15% according to the latest Mary Meeker Internet Trends report). Clearly, having a mobile site is important, but it also has to be fast and functional in order to deliver the best and most enjoyable user experience possible.
As of the latest Velocity conference, only 3.6% of all page views per month are accelerated and that includes all sites, not just mobile, so there is still a lot of work to do.
So, what are some of the most common performance issues slowing down mobile sites?
- 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.
- 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.
- 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.
- 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 a new image format called WebP that generally has much small file sizes.
- Use server-side redirects to 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 AMPS® can implement server-side redirects without complicated IT changes.
- 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.
SiteSpect AMPS utilizes a number of these performance optimizations to improve your mobile site. With SiteSpect AMPS, you can run A/B and multivariate tests on each site acceleration factor and then use acceleration techniques within your web and mobile site. This allows you to understand how each performance optimization is affecting different browsers and devices. On top of that, AMPS allows you to easily measure the above-mentioned RUM metrics for speed and correlate these metrics with business KPIs. With this information, you can be sure that improvements to site speed performance are affecting conversions, engagement, and the bottom line.