Jump to content

Convert JavaScript Behavior to CSS to Speed Up Web Pages

  simonstl's Photo
Posted Oct 29 2009 03:57 PM

Embedded Javascript is widely used on the Web, with 84.8% of pages using some Javascript.

Javascript is used for form validation, menus and rollovers, browser sniffing, statistics, and more complex Ajax applications. You can accomplish a number of these techniques with more efficient methods, however.

You can use CSS to control drop-down menus and rollovers with the :hover pseudoclass (for more details, see Eric Meyer's More Eric Meyer on CSS [New Riders].) Chapter 7, CSS Optimization, of Website Optimization shows a drop-down menu conversion example that saved 46.4% off HTML file size by switching from Javascript to CSS :hover to control the menu behavior. Typically, you'll save 40% to 60% off HTML and Javascript file sizes by converting to CSS :hover techniques, with a slight increase in CSS file size (which cache reliably). Now that Internet Explorer 7 and later support the :hover pseudoclass on the necessary elements, the :hover behavior hack that is in widespread use should eventually fall out of favor.1 You can analyze server-side logfiles instead of using client-side statistics. Browser sniffing in particular can be done more efficiently with a tool such as BrowserHawk.

[1] The :hover behavior hack is a JScript behavior used to add the :hover pseudoclass to elements other than the anchor element in Internet Explorer 5 through 7, which do not properly support the :hover pseudoclass on all elements.

Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn

0 Subscribe

0 Replies