Image Placeholder Tests

A test for loading placeholder images to improve the perceived speed for slow connections with the goal to improve user experience. Additionally, this could potentially improve SEO page loading metrics.

How to simulate slow connection - To see the test in action, disable cache and throttle your internet. In Chrome and Firefox, you can throttle the speed in the Responsive Design in the Developer Tools.

The following two tests use placeholder images which are then replaced after the full size image is loaded. One test uses a SVG placeholder by converting the image using Primitive. The other test uses a low quality JPG, size 60x40 with 20% quality as the placeholder image.

The SVG test could also be blurred prior to load, however if you see the panel of images used the x-small JPG image is around the same size of the small SVG.

Resources