Typical example: background images. I often see a website with white background. The text appears, I start reading. Suddenly, the background changes to an image with a subtle pattern. To me (the user) this is a flash of unstyled content. The background image (attached to the BODY tag) was downloading while the browser was doing page layout and rendering. Once the image has been downloaded, it was applied to the page, causing a sudden change.
Caching the image by the browser only alleviates this problem, it does not go away entirely. Plus, the first impression is what counts: cold cache, possible long roundtrip lag, all cause the bad user experience.
Solution to background image problem
As the website author you know the image to be applied. So tell the browser what the background color should be right away. Do it as a CSS style inside the HTML page itself to make sure the browser renders right color immediately.
I use ImageMagick convert program to get the average color of an image. For example, for this image:
the following commands prints average red, green and blue values, each between 0 and 255
$ convert old_map.png -scale 1x1\! -format '%[fx:int(255*r+.5)],%[fx:int(255*g+.5)],%[fx:int(255*b+.5)]' info:- // prints 246,232,198
I can take this numbers and use them as background color for my page
Now the browser renders the right color from the get go, replacing it with the actual image when it becomes available. Since the image is very close to the average color, the user only sees subtle detail enhancement.
Image layout problem
A related image problem: the browser has no idea what the resolution of your image is going to be. So it computes the image layout, as if the image had no size! When the image finishes downloading, the browser has to recalculate the layout, causing a sudden violent shift of content. Here is a typical example:
First, I see just two lines of text, then, after a small delay, the image appears, shifting the second line down. I often see this problem caused by small thumbnail images, suddenly appearing and causing portions of the content to shift. Bad, bad user experience.
Solution to the image layout problem
Give the browser all information it needs to properly lay out the image, which is extremely simple:
As the website author, you do know the image dimensions, the browser does not. Give the browser a chance.
Giving the browser exact image dimensions causes a problem we dealt with before: the element has body background color before being replaced with the actual image. Again, this causes a flash of unstyled content equivalent. Our previous strategy of using average color usually does not work, since any image interesting enough to show is too complex to be represented by a single pixel or average of pixels.
Instead of averaging, I scale down the image to a very, very small thumbnail image. For example, 800x600 pixel image might be scaled to 20x15 thumbnail using convert
convert -resize 20x rose-small.png rose-thumbnail.png
Then I convert thumbnail image to base64 ASCII text using any available tool (I highly recommend grunt-image-embed). I include the base64 encoding data with the page as a background-image property, setting the background size to 100% of the element, stretching the low resolution previous to the same size as the full resolution image
- The original 800x600 image is 500Kb png
- 20x15 thumbnail is 19Kb png
- base64 thumbnail encoding is 26Kb (1/3 larger than the original)
- smooth user experience without flashes: priceless
You (the website developer) have all the information. Browser can only make intelligent guesses. By transmitting just slightly more information, you can give the browser a chance to render very good page that will not change much after additional content arrives and is rendered. This will improve the users' experience and their perception of your website's speed and polish.
I placed the original page that forces browser to guess here. I placed the page with extra info (size, background color, background image) here. Please clear the browser`s cache before looking at the demos.
update: I have written a small connect-slow middleware for the popular Nodejs Connect server. It allows selective server-side delays based on request urls. For example you can slow down serving images by a few seconds, while letting everything else be served as quick as possible.
Related: See another take on this problem by using app shells Reactive Web Design: The secret to building web apps that feel amazing