One of the most important ways to attract and retain website visitors is to make sure your pages load quickly. Fast load times not only help users but may also improve page rankings in search engines. A major way to speed up page load times is to simply reduce the amount of content that needs to be loaded. CSS3 can help with this effort in a number of ways:
- By increasing graphical options, CSS3 can reduce the need for images. Without CSS3, creating a button with rounded edges would typically require images. With CSS3, the border-radius property can be used instead.
- CSS3 may even help you reduce the amount of HTML and CSS code that the browser needs to load. For example, without CSS3, creating a CSS-based box shadow effect generally requires multiple div elements – typically, one for the main box, one for the shadow, and one to encapsulate both div elements. Each of the two child divs has to be styled, creating the illusion of a shadow. Now, the same can be done with a single div styled simply with the box-shadow property.
However, to get the full benefit of reduced times, you must ensure that any polyfills or alternate non-CSS3 styles don’t load in browsers that already support the CSS3 features being used. For example, if an image is included in the page code but not used except for when an older browser is detected, it will still be loaded, hence affecting performance. One possible way to deal with this may be to detect the browser version on the server side and send polyfills to the client only if necessary.