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.
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
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.
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
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 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..|
About the Author