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
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.
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
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
Mobile 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.
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: