Speed is King

Page load speeds are increasingly important to the user experience. People want websites to load in an instance, especially if they’re browsing using a 3G mobile device or have a metered data plan.

Because speed is important to users, it’s also important to Google. Slow loading sites have higher bounce rates, something Google relates to lower user satisfaction. Google wants to send its users to sites where they will have a good user experience. So, page loading times are a factor in Google’s ranking algorithm –  a slow site may have a harder time ranking.

One simple way to speed up your page loading is to provide image width & height dimensions. This is because if the browser knows the image dimensions in advance, it can optimise its download and rendering process. If you test your website with GTMetrix or other site speed testing tool, it will show you how many images lack dimensions – these get a red flag for slowing down your site.

A Magento Layout XML “Issue”

If you install Magento 1.7 with the default data, you will see that the default template has images in the left and right hand column. It’s not unusual for developers/designers to simply replace these images with their own when they launch a new website.

The problem is that by default these images are rendered without their width & height dimensions. If you look at how these images are set up, you can see the origin of the problem.

 

 

 

In this example from Magento 1.9, you can see in Catalog.xml the image is set up but without any width or height dimension. So, the image is rendered by the file callouts/left_col.phtml with the alt tag but no dimensions.

Adding the Image Dimension

Adding the image dimensions is actually fairly easy, once you know how. Finding out how was the difficult part. The clue is to look in Capture.xml, where the capture images are set up with dimensions. Magento has action methods for adding these dimensions. They are as follows:

setImgHeight()
setImgWidth()

The slightly confusing thing is that both take a value known as “width” for the actual pixel dimensions. This is a little counter intuitive when your dealing with the height of an image. Perhaps “size” or “pixels” might be better labels for this value?

So, to add dimensions to images requires two steps. The first is to add these elements to the relevant layout xml file. The second step is to add the rendering calls in the target .phtml file. To show you how it’s done, I’ll use the example I referenced above of Catalog.xml & callouts/left_col.phtml.

Here is an image of the changes I made to Catalog.xml to have my callout image rendered with dimensions.

 

 

 

 

In the xml I’ve added the action methods setImgHeight() & setImgWidth(), passing in the relevant <width> value for each one. So, that’s the image dimensions set. Now we need to update the file callouts/left_col.phtml to actually render these values.

In left_col.phtml we render the image dimensions by calling the getImgWidth() & getImgHeight() methods like so:

width="<?php echo $this->__($this->getImgWidth()) ?>" 
 height="<?php echo $this->__($this->getImgHeight()) ?>"

In the image below you can see the complete method which outputs the image with its url, alt tag & dimensions.

 

 

 

Once these files are uploaded to your server, you should see that your images are output with the correct dimensions. Here I’m using Chrome’s Inspector to verify that all is fine and dandy.

 

 

 

 

 Conclusion

Speed is vital and optimised images are part and parcel of improving your site’s speed. It’s a pity that Magento’s developers didn’t include this best practice approach when putting the default template together. I know from many sites that I’ve worked on that the callout images often lack their image dimensions.