Yahoo’s Best Practices for Speeding Up Your Web Site recommends minimizing the number of HTTP requests during the delivery of a webpage because there is a significant amount of overhead during the HTTP request process for each file. Furthermore, CSS and Javascript file sizes can be “minified” by removing unnecessary characters, white space, comments, etc. The downside to combining files and minifying, though, is that it becomes very difficult to debug or maintain minified code. To get the best of both worlds, it is best practice to keep two copies of each file — a combined/minified version (for deployment) and a non-combined, readable version (for development). While this process would be labor-intensive with each build, we can implement a few simple tricks in Visual Studio to automate this process and achieve a faster end-user experience.
Please, for your own good, preload your CSS images.
It’s becoming more popular to use the :hover pseudo-class to toggle a background-image in a <div> block to simulate various visual effects, but many developers are making the mistake of not preloading the :hover image. It looks unprofessional when a user hovers over an image and has to wait for a new background-image to download and display.
As you can see above, there is a small, awkward delay, which isn’t always so small, that occurs when a :hover background-image is not properly preloaded.
Read the rest of this entry » Please Preload Your CSS Images
©2012 Sean P. Kane, PharmD, BCPS.
All rights reserved.