Web Performance Tips #01 - Replacing Image Buttons with CSS Buttons

Is your website slow? How slow is slow? An easy way to find out is to install Alexa toolbar for Chrome. When you navigate to your website, click on the Alexa button on toolbar and it will tell you your page performance:

css-button-1.png

When analyzing it using PageSpeed, some suggestions to improve web performance popped up, with one of them being to use consistent URLs for resources.

css-button-2.png

It appears that those "problematic" URLs are generated by Facebook, Twitter and Google Adsense widgets. While it is still unknown the reason Google Adsense being complained by its family product, both Facebook and Twitter widgets can be replaced by image buttons, or better, CSS buttons.

css-button-3.png

CSS button means that you use Cascade StyleSheet to define your button without any binary image being used. This can easily save up some spaces. However, you will lose some information such as number of Likes, avatars of your fan, and recent posts. In my opinion, those features are pretty optional and more important is user experience on your website.

css-button-4.png

Fortunately, an online tool called CSS Button Generator is available for you to configure your CSS button, grab the code and paste it in your CSS file. To display the "button", create a link on your HTML page and apply the CSS class on that link. For example:

<a href="https://www.facebook.com/noweating" class="btnFacebook">Follow us on Facebook!</a>

css-button-5.png

Voila~ one step forward in optimizing your website. Last but not least, you should at least deactivate all Facebook and Twitter plugins in Wordpress if you are no longer using them.

About the Author

waco_avatar_s.jpg

CheeWah (Waco) has more than 10 years working experience in IT fields, especially in software development and testing. Some of the key projects included software development and support for production/R&D, software test automation, and Search Engine Optimisation (SEO). He is a food lover and has a food blog at www.noweating.com. Little CPU acts as his IT knowledge sharing hub.