PDA

View Full Version : How to reduce the number of HTTP requests for images?



rgralhoz
6 Jan 2014, 2:11 PM
What is the recommended way to reduce the number of HTTP requests for images on RIA using Ext.js 4?
As per YSlow performance rules (http://developer.yahoo.com/performance/rules.html#num_http), the preferred method is to use 'CSS Sprites (http://css-tricks.com/css-sprites/)', which can be very costly to implement and to maintain, even if using SpriteMe (http://spriteme.org/). Maybe there is already a solution for Ext.Js. I'm using version 4.1.3.

burnnat
7 Jan 2014, 11:28 AM
Good question! I don't have an answer, but I'm interested if anyone else does. It would be nice if there were an easy way to integrate a CSS sprite solution with Sencha Cmd or the SASS theming.

arthurakay
7 Feb 2014, 9:26 AM
As per YSlow performance rules (http://developer.yahoo.com/performance/rules.html#num_http), the preferred method is to use 'CSS Sprites (http://css-tricks.com/css-sprites/)', which can be very costly to implement and to maintain, even if using SpriteMe (http://spriteme.org/).

CSS spriting can rather easily be done using Compass/SASS - see a post I wrote years ago:
- http://www.akawebdesign.com/2011/01/17/building-css-sprites-with-compasssass/

I completely disagree that it's costly to implement and maintain... more often that not this is used for small images (e.g. icons), and those typically don't change too often in application development.

Ultimately there's nothing Sencha needs to offer/add in order to support this in your apps. If you're using Sencha Cmd, just create a step in build.xml to run your custom Compass/SASS script.

-----

Alternatively, you can just use Compass/SASS in conjunction with your existing Sencha theme SASS to create base64 encoded images:
- http://stackoverflow.com/questions/15454014/url-or-base64-encode-strings-in-compass-sass

-----

At the end of the day, be careful WHAT you're spriting together. Don't shove all of your images into a single sprite, as that large request might be more costly than simultaneous smaller requests. YSLOW doesn't offer much advice on that bit...

Also, it might end up being better to use Sencha src.io (https://www.sencha.com/learn/how-to-use-src-sencha-io/) to deliver *optimized* images.

arthurakay
11 Feb 2014, 11:25 AM
For reference, I've blogged about one way to do this:
- http://www.akawebdesign.com/2014/02/11/generating-css-sprites-sass-sencha-cmd/

rgralhoz
18 Feb 2014, 11:46 AM
Thanks, Arthur, I'll take a look at these approaches and get back to this post later. Rds,