The usual ways of making the web faster are all very well known so I won’t waste any time going into any detail there: mod_pagespeed; memcache; gzip compression; CDNs; etc. There are some new tools we can take advantage of however! Page speed is ever-important on the web and I’ll cover why later, but first let’s go over the tech. In 2009 Google launched their “Make The Web Faster” campaign to develop tools that can help improve page loading times on our websites. These are WebP and SPDY.
WebP is a new image format with greater compression for lossy and lossless images. Google say that WebP lossless images are around 28% faster compared to PNGs and between 25% and 34% compared to JPEGs. These are some significant increases in compression: more data compression, more speed! WebP works in a similar encoding method used by the VP8 video codec Google also uses on YouTube; it checks neighbouring pixels to predict the values in a block and then only encodes the differences because it’s cheaper than storing the actual data. WebP is supported natively by Chrome and Opera (and Safari through a plugin). For those browsers that don’t support it there is a JS library you can use to add support. If your users are using IE6, your alternative is Flash; don’t go there. Just don’t. Otherwise, WebP is pretty simple. It’s already supported by loads of tools: Gmail; Google Images; ImageMagick; Android, and there are plugins for Photoshop, MS Office and the like. If you’re working on the web with image-heavy sites then WebP will be worth your attention.
Google describe SPDY as a networking protocol that “augments HTTP with several speed-related features” – sounds good right? SPDY sits above SSL in the Application Layer: that means it requires an SSL certificate! SPDY has three features that are always enabled and performed transparently, and a couple that require some changes in your application in order to work:
1. Multiplexed streams: SPDY allows for concurrent streams for single TCP connections; requests are interleaved on a single channel meaning fewer connections, and it uses fewer but more densely packed packets.
2. Request prioritisation: if bandwidth is constrained then the client browser could block requests for fear of clogging the channel. To overcome this SPDY has request prioritisation; the client can assign priorities to requests to prevent the network being congested by non-critical resources.
3. HTTP header compression: does what it says on the tin! SPDY compresses request and response headers.
The cool things SPDY can do are called server push and server hint. Put briefly: SPDY experiments with an option called server push for servers to push data to clients via the X-Associated-Content header. This header informs the client that the server is pushing a resource to the browser before it has asked for it. For initial-page downloads on slow mobile connections this can vastly enhance the user experience by downloading assets and content for subsequent pages in the user journey. SPDY can also suggest content via server hint for the browser to download. This means it can recommend those future assets without forcing the browser to get them.
Why does speed matter? Most users expect a page to load in two seconds or less, those who hang around a bit longer will usually leave after three seconds. If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.
Apache and Nginx both support SPDY so get going! Speed matters!
At Box UK we have a strong team of bespoke software consultants with more than two decades of bespoke software development experience. If you’re interested in finding out more about how we can help you, contact us on +44 (0)20 7439 1900 or email info@boxuk.com.
