Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Web Development.

Optimizing the user experience and the HTTP request of your mobile WebApp requires a similar process. The perception of responsiveness of your WebApp plays a fundamental role on the user’s mood, which provides a global level of perceived user experience. In this post you will see how to optimize HTTP requests, thus attacking the problem from multiple sides.

Code Optimization

Code optimization is always the first step of any type of optimization technique, because everything is based upon code–everything is coded in your WebApp. Good code can save bandwidth and reduce the rendering delay, thus improving your app’s readability and its maintainability over time. Optimizing the number of HTTP requests without first optimizing your code is a complete waste of time. Once the HTML, CSS and Javascript code is in check, you can then start the real HTTP optimization process.

The first step in reducing your HTTP requests is to reduce the number of imported elements in your user interface. Be sure to use CSS rules every time instead of bitmap images. For instance, you should use a CSS gradient instead of image files for your layout.

Color Depth Optimization

Another optimization step you can take in your webApp is to optimize the imported (external) resources, since CSS and Javascript should be already optimized at this point of the process. When you can’t use CSS, be sure that your images have had their color depth optimized. This will optimize the image’s weight after the exporting process using the right image format. If it’s a photo, you need to use a good compression ratio in JPG format. If it’s a user interface image, it’s important to check the number of colors used– if you use less than 256 colors you can export it in PNG8, which is usually smaller. Using similar colors will also help keep the color count, and the image weight, low.

Keep in mind that exporting an image using a graphic programs like Adobe Photoshop, Fireworks, or Gimp will also add unwanted metadata that will increase an image’s weight. A workaround for optimization is to use one of the many programs available, like PNGOut, which will make them as slim as possible. Image color depth optimization will reduce the WebApp page loading time and will increase the user experience level.

Use Sprite Images

When inserting a lot of images into your webApp, you should consider using CSS sprites. The word “Sprite” always reminds me the 80’s when people like me played all day long on the Commodore 64 or ZX Spectrum games. Of course with technology, sooner or later an approach that is old will eventually become new again, so web developers have now adopted the idea behind the old Sprite management and imported it into the CSS world. In the following image you can see the CSS sprite techniques used for designing a checkbox in the iWebKit 5 Framework.

The basic concept behind the use of sprite images is to combine multiple images into one image in order to reduce the amount of HTTP requests generated for loading external images in your layout. Once all of the images are inside a single image file you can access a specific zone of that image with the x and y value of the background-position property. The next figure shows how you can swap the two images, changing the y value from 0 to 28px.

Of course a rollover doesn’t exist in a touch based device world. This technique will avoid the typical white flash that occurs every time the browser loads for the rollover image for the first time. Just remember that a sprite technique is perfect for user interface elements and other little details, but it is not a good approach for optimizing the behavior of big and heavy images.

It is important to always keep one eye on the number of imported resources (images, CSS and Javascript), because the more files that you import into your web page, the more rendering and loading latency is taxed on the browser. In the next figure you can see a transfer latency time comparison between single and multiple image files.

The basic concept of using the sprite image is to combine multiple images into one image, thus reducing the amount of HTTP requests generated for external images in your layout.

Downsides of Web Cache

Minimizing the HTTP request will speed up the web page loading time, so it is always a good thing to consider. HTTP Caching is also known as Web Caching, but with a browser such as Apple Safari it is almost unusable because of its specification limits. The following list details some of the main limits of HTTP Caching:

  • Single Resource must be less then 15K (non compressed)
  • Global Cached Resources must be less the 1.5Mb
  • Powering Off the Device will Clear the HTTP Cache
  • Closing the Tab will Clear the HTTP Cache

As you can see, this type of cache is very unreliable from a development point of view because it is cleared too often and it can’t cache the majority of the resources in a modern web page. Even the most compressed Javascript Framework or CSS Stylesheet struggles to go under the 15K, and none of the images used in almost every Web Site or Web Application goes under this limit.

Note that the HTTP/1.1 protocol specifies that a browser can only download two resources in parallel per hostname as showed in the figure above. A workaround for this sort of bottleneck is to spread your external resources over multiple hostnames, but this approach is not an option in the majority of projects, so we will not consider this approach in this post.

Avoid HTTP Redirection

Be sure you avoid any type of HTTP redirects in your web pages. The HTTP redirect is accomplished using the 301 or 302 status code, and in both cases it adds delay to the average page loading time, thus decreasing the level of user experience.

This rule will reduce the loading time and the communications delays between the client side and server side.


Optimizing the performance of your Web Site or Web Application is not a development approach to apply only at the end of your project workflow, but instead it is something that is applied along the entire project workflow. Optimizing the HTTP request is just one step in this important process that is not written in stone, but changes according to the project requirements and context variables involved in the user experience.

Safari Books Online has the content you need

Here are some good CSS3 resources found in Safari Books Online:

Pro iOS Web Design and Development: HTML5, CSS3, and JavaScript with Safari by Andrea Picchi, the author of this post, will help you deliver rich mobile user experiences without compromise by optimizing your sites for WebKit and Safari, the de facto standard for the iPhone, iPad, and iPod touch.
Pro CSS for High Traffic Websites covers the development processes required to smoothly set up an easy-to-maintain CSS framework across a large-volume website and to keep the code reusable and modular. It also looks at the business challenges of keeping branding consistent across a major website and sustaining performance at a premium level through traffic spikes and across all browsers.
Arranged in a quick-lookup format for easy reference, CSS Cookbook, Third Edition has been updated to explain the unique behavior of the latest browsers: Google Chrome, Apple Safari, Microsoft’s IE 8, and Mozilla’s Firefox 3. With topics that range from CSS basics to complex hacks and workarounds, this book is a must-have companion, regardless of your CSS experience.
HTML and CSS are the workhorses of web design, but using them together to build consistent, reliable web pages is difficult if you’re relying on outdated, confusing, and unnecessary HTML hacks and workarounds. With HTML & CSS: The Good Parts, you’ll learn how to work with these tools far more effectively than is standard practice for most web developers. You’ll learn how to connect the underlying theory and design of HTML and CSS to your everyday work habits..
Building rich JavaScript applications that bring the desktop experience to the Web is now possible, thanks to powerful JavaScript engines and the CSS3 and HTML5 specifications. The key is moving state to the client side, but that’s no simple task. JavaScript Web Applications takes you through all the steps necessary to create state-of-the-art JavaScript applications, including structure, templating, frameworks, and communicating with the server.
if you know HTML, CSS, and JavaScript, you already have the tools you need to develop your own iPhone apps. With Building iPhone Apps with HTML, CSS, and JavaScript, you’ll learn how to use these open source web technologies to design and build apps for both the iPhone and iPod Touch, on the platform of your choice — without using Objective-C, Xcode, or Interface Builder.

About the Author

  Andrea Picchi is the author Author of “Pro Web Design and Development” from Apress. He has a background in Psychology (University of Padova) and Computer Science (University of Pisa). He started designing WebApps for the new Apple device in 2007 when the first iPhone was lunched on the market. After the first release of the Apple SDK in 2008, he started developing Native Apps using Objective-C. In recent years Andrea Picchi has been speaking at many important conferences around Europe like IASummit, UXConference and many others. Recently he also started to teach “iOS Web Design and Development” in a course organized by the Computer Science Department of the University of Pisa. Today, as designer his priority is to implement a cognitive approach to touch-screen interface design in iOS enviroment and as developer continue to develop using both the Web model (using html5, css3, javascript) and SDK model (using Cocoa-Touch in Objective-C). Learn more at and follow at him

Tags: Code Optimization, Color Depth, CSS, HTTP, Sprite Image,

Comments are closed.