HTML Sprites - silver bullet against small images

Last builds of WEBO Site SpeedUp include amazing client side optimization approach - CSS Sprites for HTML images. Let's review underneath logic and all related techniques.

CSS Sprites - why HTML?

Actually we are speaking about combining images to a larger one which can be positioned with CSS property background-position. It's impossible to convert raw HTML images to CSS Sprite (to be correct - it's possible but leads a lot of restrictions and drawbacks, i.e. we will have to drop a huge part of images' functionality and properties).

So before any actual operations with images in HTML code (like <img src="..." />) we should prepare them. How? We should convert all images to 'fake' ones - transparent stubs which have initial image as a background, and the same width and height.

Converting HTML images to CSS images

Well. To reduce amount of data (we are going to speed up website, not to increase its load speed) we should choose very efficient approaches to insert transparent stubs. And we have 2 choices:

• Insert call to 1x1 transparent GIF image (yeah, bad known spacer.gif which was used a lot several years ago to make table layout). Its size is only 43 bytes (but 1 more HTTP request).
• For modern browsers we can use 82-bytes data:URI chunk (which represents this image - data:image/gif;base64,R...Ow==. A bt more data (with gzip usage - about 100 bytes for 1 HTML document, or nothing). But minus 1 HTTP request (cool!).

To provide the best practices here we can combine both approaches - for IE7 and lower use the first one, for all the other browsers - the second one.

Playing with HTML Sprites

It seems now we have all parts for HTML Sprites logic and can reveal it.

1. First of all - parse initial HTML code to find all images, get their sizes (and skip some large ones).
2. Then create an array of CSS rules based on given HTML images - just background image (plus no-repeat and zero background position), width and height.
3. Then just combine all images in 1 CSS Sprite (using existent CSS Sprites logic over current set of CSS rules).
4. Finally (with a number of CSS classes) replace initial HTML images with stubs with calculated styles.

All this looks very simple. But what are drawbacks?

Troubles and solutions

As far as we need to check size for any image (just to get its dimensions an skip it if it's very large) - we will have a lot of I/O requests with any HTML document. So this can significantly increase server side load time. That's bad. But we can cache calculated dimensions for known images (such dimensions are being changed very rarely) - and skip all future recalculations.

But with every HTML document (with cached calculated dimensions) we have one more expensive CPU operation - CSS background positions calculation (even with completed CSS Sprite we need to get actual positions of given images inside it). But good news here is that we can also cache such calculations (to a set of CSS rules for given HTML image).

Also we must have per-page or per-website modes. Just because you can have thousands of small images through the whole website - but you don't want your visitors to download them all at once.

With all such approaches HTML Sprites technique works both on a high-end servers and weak VDS/shared hosting. And reduces by 20-30% number of HTTP requests for every your web page. That's really amazing. And it's ready to use - just download WEBO Site SpeedUp or update to the latest version.

WEBO Site SpeedUp v1.0.2

New version with HTML Sprites support and more performance.

• Added HTML Sprites. There are now 3 new options: apply HTML Sprites, dimensions limit for them, and 'per-page' mode (you can combine small images for the whole website, or for the currect page only). HTML Sprites combine small HTML images and replace initial images with transparent one. This can greatly reduce total number of objects on your website.
• CSS Sprites refactored. To meet strict resources limit on shared hsoting / VDS core logic for images' placement in CSS Sprites was refactored, and now it consumes much less memory, but a bit more CPU.
• Added option 'Days to store cache files'. Now you can restrict number of files in cache with this option (outdated files will be deleted automatically when new ones are being created).
• Improved unobtrusive JavaScript. Fixed layout bugs in a few cases and reduced DOM tree size.
• Added support for ICO files into CSS Sprites. Now ICO files (as well as JPEG/PNG/BMP/GIF ones) can be combined both to CSS or HTML Sprites.
• Improved JavaScript merging for DLE.
• Social Engine (3.19) added to supported systems.

WEBO Site SpeedUp v1.0.1

We didn't stop with product improvements, and after major 1.0 release continued to make it better. So here is a scheduled 1.0.1 update.

• Greatly improved CSS Sprites. There were added a few complicated cases to CSS Sprites logic, fixes memory consumption (approximately by 20-50%). Also improved CSS properties in case of complicated selectors restoration.
• Added automated request for 7-day trial key. Now you can test Premium Edition for 7 days (for 1 website) after installation, no performance or feature limits.
• Fixed endless redirects on 404 errors. In some cases side caching with wo.static.php lead to recursive redirects. Such situations were fixed.
• Added 'Share results on Twitter' buttons. Now you can post your optimization results directly to Twitter.
• Minor UI fixes.
• Improved static resources caching in case of symlinks usage.
• Improved external resources fetching (i.e. in case of dynamic background images).

Download the latest WEBO Site SpeedUp or update from the product.

WEBO Site SpeedUp 1.0 released!

After 2 months of creating, tuning, and polishing of the new interface, old and new bugs resolving and general compatibility improving we have released version 1.0 of this outstanding application to speed your website up.

Also we have released our new corporate website (formerly web-optimizer.us) to allow wide range of website acceleration products and services - www.webogroup.com.

Here are few words about new features in 1.0 (in comparison to 0.9.7).

• Added option 'Performance -> Restore CSS properties'. It is responsible for correct CSS Sprites creation (parsing CSS rules' tree), but it can be CPU expensive, so it's disabled by default.
• Improved Unobtrusive JavaScript. Added BlogBang? and eBuzzing added.
• Improved external files fetching. There were fixed some bugs with external redirected files (or 404 errors on them).
• Improved paths automatic calculation. Added better support for symlinks in directories.
• Improved JavaScript merging behavior on HTML/JS/CDATA mess (added more rules for pseudo HTML comments).
• Improved HTML minify and fixed its compatibility with System - Cache in Joomla!. Now HTML documents are even less in size!
• Improved .htaccess rules (fixed unstyled websites).
• Minor improvements in UI. Reduced number of files (with CSS Sprites), fixed minor layout bugs.

Get the latest WEBO Site SpeedUp or update it from internal interface.

WEBO Software increases efficiency for the website of charity fund "Happy World"

WEBO Site SpeedUp increased efficiency of Russian charity fund - "Happy World".

WEBO Site SpeedUp is a wholesome product to speed up a website. There can be not enough time to tune hosting environment, sometimes you need any solution out of the box - that's about us. And it's much easier to have only one module to optimize website performance than apply handy changes to CMS or web server.

Children's charity fund "Happy World" (www.hworld.ru) was created in 2005. The foundation raises funds and provides assistance to children with serious illnesses. Only the last year 199 children received the necessary treatment at $2.6 million. Wards fund are children from poor families. They want to get well and together with their peers go to kindergarten, to school. Strong, reliable adult hand help to cope with the seemingly insurmountable problems, - says about fund activity Olga, its coordinator.

Geography of the project is quite broad - it covers the whole Russia territory. For this reason site of a charity fund for the last few years changed 6 hosting providers, which were periodically unable to bear the load. And now the website uses a distributed hosting from Media Temple (virtual hosting on the "clouds") with Joomla! + Apache + MySQL.

Average load on www.hworld.ru is about 20k unique visitors a month. But during the fund-raising campaigns it can increase several times. Once a campaign to raise funds for the treatment of one of our wards began, - says Michael, a fund technical specialist - and there were more than 8 000 unique visitors per day. It was necessary to accelerate the website load time for visitors and fit a dedicated hoster power. Due to the rapid increase in attendance it urgently needed to optimize Joomla! CMS. There was chosen the product for the universal website acceleration to achieve this goal - WEBO Site SpeedUp.

As Michael says, after the installation WEBO Site SpeedUp reduced consumption of GPU (unit of measurement of power consumption which is used in Media Temple). This allowed to fit the provided power and not to overpay for a non-optimized site. There have been indications that the site was being loaded faster. Both the first and returned visits were speeded up with competent caching. Latter is extremely important for the fund - there are a lot of regular visitors, and it is a huge benefit for them - fast website load speed and website stability.

What is the most important thing - in the most tense moments for the host when a child's life hangs in the balance, and is going active raising for medical treatment, we are confident that the site is working as quickly as possible, saving the lives of children - concludes Michael.

Website load speed is connected not only with the robust website performance, but also with the confidence of visitors to the website information. For charity fund the last fact leads the priorities list. And if there is any possibility to increase confidence of visitors to the charity - you need to do it now, do not fish or cut bait. Because the child's life depends on the decision about donation.

High Performance for Contra Costa County

WEBO Site SpeedUp was installed in Halfway to Concord website and significatnly increased its profitability.

Traffic is seasonal based on local election cycles and holidays, but we can document a 20 per cent increase in visits since implementing WEBO Site SpeedUp.

Launched in early 2004, Halfway to Concord (www.halfwaytoconcord.com) is a blog covering news, politics, culture, business and various events for Contra Costa County. The site's hyper local focus has helped it become a leading independent online news source for East Bay of Northern California, USA.

Halfway to Concord has more than 12k unique visitors monthly, most of them return to the website at least once a week. The website core is a WordPress installation on a Bluehost dedicated server. But even this didn't provide sufficient page load time which was more than 5 seconds for every page. And Bill Gram-Reefer, Halfway to Concord founder and editor, decided to improve user experience with speedier loading site to increase readership.

Because of its hyper local focus and audience, Halfway to Concord cannot currently accelerate with CDN usage or any number of particular WordPress hacks. There must be a solution to provide maximum website performance. "We had slow loading pages", says Gram-Reefer. "Many visitors chose to move on before page load."

CDN or other network distribution solutions didn't fit because the website is located very closely to the vast majority of its visitors and server response time is not crucial. But a complete set of performance optimization practices - including file compression to multiple host usage and unobtrusive logic implementation - provided by WEBO Site SpeedUp resolved all issues.

"While experiencing some expected bumps in the road during implementation, WEBO Software tech support was helpful and gracious, eager to help customers instead of berate them for asking questions", Gram-Reefer adds. Through close collaboration, Halfway to Concord was accelerated approximately 2.8 times, especially for return visitors. And they were grateful!

Finally YSlow was improved from 56 to 90. This brought about 20 per cent increase in visits. With a few simple actions automatically handled with WEBO Site SpeedUp, the website became faster and could handle more advertisement and visitors.

Only a full range of website load speed optimization methods can help such local websites or small blogs to provide new levels of user experience for their readers. And this can be easily achieved with very little effort.