Improve performance by making widgets as small as possible

Posts: 785
We recently found that theme performance is slightly negatively affected by a technique that many people seem to be using. Here is a small explanation how you should prevent this technique to avoid having a penalty on your performance.

The issue: full-size Widgets
Many themes use Widgets that are the same size as the Theme itself. The background image on the Widget then consists of a mostly transparent PNG with only a small area having any visible content.

The solution: resize Widgets and crop images
Performance can be improved by cropping your images to remove all the invisible transparent areas. Then, resize and move your Widget such that the actual visible content of the image remains in the same place and size.


I am working on tools that help you 'convert' full-size Widgets into proper sized Widgets. So far, in release 1.21 (beta) I added support to Crop an image down to the visible area only. Simply open the image in the editor, click Start Editing, then click Crop to opaque, and finally Save (or Save As) the image again. The transparent part will be cropped out.

You then have to rescale and move your Widgets to make the Theme look the same. I am working on making a tool for this step as well, but it is not finished yet.


The attached image hopefully explains the "good" and "bad" methods.




Edited (2 times)
Performance Transparency Transparent