Mobile Must-Have: Optimized Performance

WompMobile mobile must have development best practice optimized performance

MobileMustHave

Optimized Performance

Many of these tips for converting a site to mobile also apply to desktop websites and the web in general. However, performance optimization is much more important when developing for mobile because mobile phones typically have less bandwidth and less computing power than their desktop counterparts.  Efficient, responsible design and coding can increase usage of a mobile site considerably.

When designing for mobile, be sure to include only necessary scripts, images and functions; optimize those necessary assets and ensure unnecessary assets are not downloaded; create functions in the least resource-intensive way; and utilize the best distribution methods for these optimized assets.

Cut Down on HTTP Requests

Each time a browser requests a resource the user must wait while the requested item is sent and rendered.  Repeated requests slow load times, resulting in page abandonment, increased bounce rates and fewer conversions.  Limit requests for a faster browsing experience.  Cut down on requests by using a single CSS file and a single JavaScript file per page.   This also necessitates clean, simple coding and helps the developer to be mindful of the most efficient methods.

Use a Content Delivery Network

Using a CDN enables you to serve your site faster and more reliably.  A CDN is a global network of servers that stores the files required for your mobile site.  CDN data centers are geographically redundant and automatically load the content via the fastest (typically closest) data center.  A CDN can successfully serve content even if one or more servers in the CDN are down, giving your users extremely fast and reliable access to the site.

httpblog

Use Cache Headers

Proper caching allows you to take full advantage of a CDN.  Make sure the cache headers are set correctly and make use of the e-tag header. The e-tag header is like a fingerprint that can be used to check if a file has changed.  These fingerprints tell the CDN servers and browsers when to update cached information.  Using cached information is more efficient, faster and saves bandwidth.

Minimize, compile and compress your assets

Shrinking the images, CSS and JavaScript files to be as small as possible before placing them in the CDN will further speed up the site. For CSS file make sure to remove any duplicate rules and only send the rules necessary for the current device. You should also use a regular expression to strip white space, line breaks and tabs from your CSS. You can use a program like Google’s Closure Compiler to compile your JavaScript, this can shrink your JavaScript files by up to 50%, and also make them run faster! All assets (images, CSS and JavaScript) should be compressed with  GZIP before placing them on the CDN. Compressing the files with GZIP should only be done in your development environment, as this is a resource intensive operation. However, once compressed they can be uploaded to the CDN where they can be downloaded up to 50% faster than uncompressed files, decompressing them on the phone is not resource intensive.

Optimize and Adapt Images

Optimizing your images and serving each one in exactly the right size to the right device will speed up your mobile solution and keep images looking their best.  An adaptive solution can use adaptive image resizing to load each image in exactly the size it will display, delivering each device the highest quality it can use without wasting time loading an image that is unnecessarily large.  This creates the best compromise between fast loading and crisp display.

Send only the Essentials

Manage scripts and styles to ensure unneeded desktop scripts and styles are not sent to mobile devices, and vice-versa.  This will cut down on HTTP requests, speeding up browsing, and will maintain the proper experience for both the mobile user and the desktop user.

Keep it Light

chaiwat-ID-100225675Mobile users are goal oriented and respond to intuitive, fast sites that delivery that information quickly.  A mobile user is often on the go and is not looking for fancy gadgets or bells and whistles which may slow down or complicate their search.  Many smartphone owners have plans which limit bandwidth, so using bandwidth efficiently when serving your site is essential.

When creating slideshows, or other dynamic elements, choose CSS transitions over plugins, add-ons and other extra resources the user will have to spend time and bandwidth downloading and rendering. Likewise, for animation effects use CSS transitions rather than JavaScript animations. Use 3D transforms to trigger hardware acceleration for touch-friendly element reactions.

 

Following these optimization guidelines (using the least resource intensive functions; including and requesting only necessary assets; optimizing those assets; and distributing those assets in the most effective way) will enhance the performance of your mobile solution and give your users the fastest, most efficient experience possible.

 

If you liked this read, check out these: