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:
While flat images are possibly slightly less fun, significantly increased loading speeds and smoother scrolling is more fun!
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"?
- 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.