Five photos, one look

transcript

Picture a product page in a shopping app. Five photos in a carousel. The shopper looks at one, and moves on. But the app loaded all five. Why?

Five loads happen the moment the page opens. Only one photo gets looked at. Four loads were pure waste. And on a slow connection, the shopper waits for every one of them.

The fix is a proxy. A lazy photo, with exactly the same interface as the real one. The page calls show on it, exactly as before. Not one line of the page changes. The proxy builds the real photo only when someone actually looks at it.

The page opens. Five lazy photos are created. Zero loads. She looks at photo one. One load. She looks again. Still one load. The proxy kept the real photo.

A proxy controls when the real work happens. And nobody else has to know.

Full breakdown in the lecture.