This article was
originally published on the SiteSpect site. It has been revised slightly for TechRepublic.

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. 

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 are 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’s 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 Nicholas Zakaz of Yahoo!, redirects consume 40% of the time to load a page. Client-side 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.     As Bryan McQuade of Google’s Page Speed team
    has said, “external JavaScript loaded early in the document (e.g., in
    the <head>) are performance killers, and they are especially
    expensive on mobile due to the higher round trip times associated with
    mobile networks.”
  5. Loading the entire
    page takes time and creates a poor user experience.     Loading the entire
    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 to 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.

  1. Remove 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 JavaScript. Another approach is inlining small images, CSS,
    or JavaScript into the HTML page. Regardless of which approach you take, I
    recommend A/B testing these optimizations, as they will have different
    impact on different pages, browsers, and devices. Then segment by device
    and look at the impact of testing by device and browser types on your
    optimizations to really focus on specific performance improvements for
    core segments of your audience.
  2. 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 smaller
    file sizes. 
  3. 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.
  4. Minimize the amount
    of extraneous JavaScript and third-party scripts     on your site. 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.
  5. 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.

Jeffrey Vocell is the
Product Marketing Manager for SiteSpect, where he’s responsible for strategy and communication of product
messaging. Prior to SiteSpect, Vocell co-founded Trendslide, a mobile business
analytics startup. He holds a B.S. in Business Management and Leadership from
Daniel Webster College.