Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Showing image previews for Pens is possibly a little less fun than our live previews, but it's much faster. For that reason, we're now serving image previews for all Pens on the "grid" view for mobile devices:

p.s. how do you take a picture of a phone with a crisp screen?

While flat images are possibly slightly less fun, significantly increased loading speeds and smoother scrolling is more fun!

The Backstory

You know how we display little visual previews of Pens, like on the homepage and on your profile? Those are actually <iframe>s of the real code that you wrote. Iframes are pretty cool for this purpose. They are also very slow. They are complete documents that need to be rendered from scratch, just like the page they are on. So if you visit a page with eight iframes, that is nine complete documents that need to render. We try and speed that up as much as we can here at CodePen. We inline the resources so each of them is as close to a single HTTP request as possible, then we cache that. It's fast for an iframe, but not exactly blazing. We feel like it's acceptably fast on a typical desktop browser. We do little tricks like have them appear one after another in sequence to distract attention away from the loading. But on mobile, with a combination of less browser power, less bandwidth, and less caching, it's even slower. To speed things up for mobile, we ditch the iframe and use the image preview that we generate for each Pen (we've covered that before).

How do we define "mobile"?

This has been and will continue to be an ever-evolving process for now. We used to do server-side user-agent sniffing to make a determination on mobile device. We ended up being unhappy with that. For instance, a retina iPad it would consider mobile because of it's iOS user-agent string, but a Kindle Fire it didn't recognize so it would get desktop. Ideally that would be reversed. Now we have switched over to a system that measures some client-side information with JavaScript (for now, just the screen size) and saves that to a cookie. We then check that cookie to make the call on mobile-or-not. For the moment, we're making the split at 600px. We feel this is a more accurate test and safer for the future.

The Future

  • We've already taken some steps to make our screenshots as high quality as possible. We have some plans to make them even better (and more reliable) that we're working on.
  • We're tinkering with a technique where we test if a Pen has any movement or not, and serving an iframe if it does or image if it doesn't. This might speed things up for desktop significantly as well.
  • We'll be constantly re-defining how we test for "mobile", but we're happy with the system in place. With the "real client side info on the server" technique, we can get more fine-grained with what we serve up and when - it might not always be as boolean as mobile-or-not.
  • More mobile-friendly updates are coming.