How to prevent your Google background image from fading in slowly.

Google + slow loading = not worth having background images.

In trying to keep their homepage as minimal as possible, in December Google switched to fading in the home page links only on an event: moving your mouse or tabbing out of the search box. This was fine when the home page was only white, as it wasn’t taxing on computers to fade in on white.

Now that Google allows for custom image backgrounds (likely in response to how beautiful the Bing backgrounds are), the fading in process can be tedious, even using blazing-fast Chrome. I can only imagine what users using Internet Explorer 6 are going through: fading in images takes a lot of work and time!

This was annoying me, so I made a quick modification to my SEO Stylesheet (a Custom Stylesheet to display search results and no-follow nicely in Safari, IE and Firefox). This mod will make the image load solid, with no fading or resulting lag.

Add to your User Stylesheet CSS file:

#fpdi,#cpBackgroundImg { opacity: 1.0!important; }

Once the image loads, it will be displayed as solid, and Google will be fast-loading again.

For more information on user stylesheets, check out the SEO Stylesheets post.

To prevent the home page links from being hidden…

If you want to prevent the new “fade-in” look, use the following code in your user stylesheet instead:

#ghead *, span#footer center#fctr, #fpdi,#cpBackgroundImg { opacity: 1.0!important; }

Updated

I realized that when logged out and logged in, Google changes the ID of the background image. I’ve updated to code from #cpBackgroundImg to #fpdi,#cpBackgroundImg to reflect that.