HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Page Speed test result

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#83074 (In Topic #17292)
Avatar

Community saint

In my never-ending quest to get my site to load faster, I decided to run the Google Page Speed test on my home page. These are the recommendations resulting from the test (this is on a v7.1.6 site):


The specific recommendations for combining images into a sprite for the home page are below:

Code

Combine images into CSS sprites

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.
Learn more

Suggestions for this page

The following images served from julianrittercentral.com should be combined into as few images as possible using CSS sprites.
http://DOMAIN/.../block-background.png
http://DOMAIN/.../top.png
http://DOMAIN/.../contract.png
http://DOMAIN/.../exp_con.png
http://DOMAIN/.../expand.png
http://DOMAIN/.../menu_bullet.png
http://DOMAIN/.../menu_bullet_hover.png
http://DOMAIN/.../bottom_left.png
http://DOMAIN/.../bottom_right.png
http://DOMAIN/.../title_gradiant.png
http://DOMAIN/.../title_left.png
http://DOMAIN/.../title_right.png
http://DOMAIN/.../zone_gradiant.png
http://DOMAIN/.../loading.gif
http://DOMAIN/.../festival.png
http://DOMAIN/.../external_link.png
http://DOMAIN/.../poll_l.png
http://DOMAIN/.../poll_m.gif
http://DOMAIN/.../poll_r.png
http://DOMAIN/.../closelabel.gif

I suspect many of these images are used on most pages in ocPortal. Would there be any benefit to following this suggestion to create CSS sprites in the ocPortal distribution.

Interesting to note is that some of the items Chris suggested were of minimum value to optimize (in another topic) all came in as low priority.

Bob
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#83075
Avatar

CSS sprites are a horrendous idea in my opinion.

You essentially remove modularity, have to change HTML to be non-semantic (non-use of image tags for images), make the CSS really complex, and paint yourself into a bit of a corner.

Since all browsers opted to break the standard for the maximum number of connections you can make to a web server, the problem is greatly reduced. Much more files can load in parallel now, on every browser.

SPDY is coming in the form of HTTP2 and that nails the HTTP design flaws for good. That's much better IMO than breaking a lot of engineering guidelines for the sake of a tiny speedup.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#83076
Avatar

Community saint

I think CSS sprites have very limited use for the 'typical' website because of the problems Chris described.

Having said that, you can do some very interesting things with it that you could not practically do otherwise. On my site, for example, I use CSS sprites to make retro-game bitmap fonts available to staff to fancy-up selected snippets of text, like so:


Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#83077
Avatar

Community saint

Once again, I show my blissful ignorance. I certainly agree that I would not want something that makes my site less less standards-compliant (seemingly, no image tags would do this) or more complex (the CSS is already challenging enough). But I am happy that I asked the question and to see that experienced coders agree that it might not be the best idea.

Thanks for explaining this.

Bob
Back to the top
 
Posted
Item has a rating of 5 (Liked by JeanLiked by BobS)  
Rating:
#83082
Avatar

There are a couple of other points I forgot to mention that spring to mind.

PageSpeed (and the Yahoo equivalent) do exaggerate the problem. The browser doesn't download all images referenced in the CSS, it does it only if the image truly would be visible on screen. Browsers are even smart enough to not show stuff that is in the DOM tree but not visible, e.g. <div style="display: none; background: url(…)">, I'm pretty sure the image there would not download.

Regarding modularity, it seems a theoretical thing at first. But it has two practical results…

The first is a maintenance problem. It becomes a pain when you can't work on individual things individually.

The second is actually a practical performance problem. You quite possibly actually want to avoid imagery loading until it's needed. So by having individual imagery in individual images, it only loads on demand. E.g. the expand icon would only load when actually you were on a screen that used it. You would have to make a decision on how to partition your image set, and trying to divide stuff up in clean groupings is usually a lot harder than you'd first think.

The other problem I know of is PNG transparency and palettes. IE6 cannot do PNG transparency for CSS background images, at least not without real restraints and a lot of drama, and non-validatable CSS. So if you want transparency in your sprites, you'd have to use paletted transparency. But if you do that, every image in there needs to be limited to the same set of 256 colours.
That said, hopefully IE6 is dead enough now for us to not have this one. But then, current browser habits of parallel downloading can be relied on if you assume IE6 is dead.

And want to make a change? Time to mess with the sprite file again, go recalculating your sprite image offsets in the CSS, force every client to re-download it. More modularity problems - if you have more than one person working on the design, you've got a resource competition issue in that lots of people need to change the same file, and it's a file you really do not want to be changed often.


It gets my goat a bit when the subtleties get lost in blanket checklist advice, and then some people would see you as 'not doing a tidy job' if anything in the checklist is unfollowed. Happens all too much. Actually I'm not sure I've ever seen the advice I've just written, but I've seen loads of people shouting about how great their use of CSS sprites is ;).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#83090
Avatar

Community saint

Thanks for the excellent explanation, Chris.

It is surprising that these checklists really lose sight of the trade-ffs involved and make such blanket recommendations. It's good that developers like yourself take the time to weigh the advantages and disadvantages to make the most sensible decision for the code you author and maintain.

Bob
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: