Tuesday, March 9, 2010

WEBO Site SpeedUp for Joomla! screencasts

We are starting with a set of product screencast to help users with product tuning. The most important features will be described in step-by-step manuals.

Here is the first one - JavaScript / CSS files merging tuning.

All screencasts will be available on our website - www.webogroup.com/home/site-speedup-joomla/video/

Sunday, March 7, 2010

v1.0.3 released

A lot of minor usability and accessibility (both in administrative interface and application core logic) is this release. More info:

  • Added option 'Safe JS combine'. It guarantees that in case of broken JavaScript it will be loaded separately and won't harm other scripts. Here is used try-catch envelope (which reduces a bit performance, so it can be disabled).
  • Added Basic configuration set. Basic configuration includes all first-priority performance actions, and it is a bit better than Safe one. But it can fail on a few environments.
  • Added welcome screen after installation. Major UI improvement - now there is welcome screen with quick actions and new features right after WEBO Site SpeedUp installation.
  • Added Error screen on failed automatic installation. With welcome screen also added Error screen to help understand what is worng (very rarely) with WEBO Site SpeedUp installation (and which actions can be applied).
  • Other UI fixes and improvements.
  • CSS Sprites logic improvements.
  • Improved server environment detection.

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

Friday, February 26, 2010

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.

Thursday, February 25, 2010

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.

Wednesday, February 17, 2010

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.

Wednesday, February 10, 2010

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.

Friday, February 5, 2010

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.