Over the past few months, we of the Gawker Tech Team have put a ton of work into improving site performance and stability. If you don't recall seeing much evidence at all of the latter, you're right: we're only just now at the point of our time investment starting to pay off. More about that in a subsequent post! This post is about the performance side.
In the Google Analytics chart above, you can see that there have been steady improvements in load time from January up to now. We achieved these primarily by:
- Replacing sequential requests with ones that can be made in parallel, and cleaning up unneeded requests.
- Reducing the size of the styles and scripts that are needed to render a page.
- Freezing animated GIFs (pronounced "Gifs", with a hard "G"). Some sites, like Sploid, love to put GIFs all over the place, and these things add up (and even crash mobile browsers). Animated GIFs on mobile are now click-to-play, and on desktop they only play once scrolled to.
- Following general performance best practices, such as ensuring that our assets are cached for as long as possible.
These improvements offer much more than a theoretical advantage or an improvement in PageSpeed score. Here's a comparison of what a user's second view of the Valleywag homepage looked like on January 28 vs. on May 14th:
(Content starts displaying a lot faster and you can start reading about depressing tech stuff sooner.)
Here are details on some of the specific optimizations that got us here:
1. Deanimating GIFs*
Some people go through life joylessly, seeing the world through a prism of despair. The rest of us enjoy GIFs. And because we enjoy GIFs, we should understand their technical limitations and work around these as much as possible. GIF is an ancient file format that was really not made for motion. Since the time the animated GIF was introduced, a number of dedicated video formats have been released, which can offer order of magnitude improvements in efficiency. We're working on converting to a proper video format, but for the time being, we:
- (On desktop) show a thumbnail for GIFs, automatically loading the real GIF only when it is currently visible on the page
- (On mobile) show a thumbnail for GIFs with a Play button. The GIF plays when the user taps the Play button.
This is a GIF of a GIF that shows up with a Play button on mobile. (On mobile, this GIF will show up with a Play button.)
Besides a huge improvement in load time on pages with GIFs, this is much nicer to users on mobile data plans. Imagine that you're an American traveling to France, and that you have a Verizon phone which you neglected to switch from the default pay-as-you-go roaming option. In between wine tastings on the banks of the Garonne, you decide to see what's up on Sploid, and you navigate to this page: