Innota

This is the third part in a three-part series. We've already described how we make content as small as possible and how we utilize a global content delivery network. It's time to concentrate on caching.

Here are the three key things we're concentrating in these posts:

• Part I: Making the content as small as possible
• Part II: Delivering the content as fast as possible
• Part III: Caching the content

What is Caching?

Simpy put, caching is the process of storing web content temporarily closer to the end user.

Caches can exist pretty much anywhere between the server and the client. The server might have a cache of its own, the end user's Internet service provider might have a cache and finally, the end user's browser definitely has a cache.

Everybody is just trying to save bandwidth.

For instance, if you open up a link to a nice photo of a Vespa, the image is temporarily saved on your computer or phone or whatever device you're using. If you open the same image again, your device knows that you have already loaded the image and it shows you the image it saved temporarily the last time you looked up the photo.

This may not sound like a big deal, but take a closer look at the web sites you browse. You'll notice that most pages include some assets that are loaded again and again on every page.

There are stylesheets, JavaScripts and images like company logos and so on, that stay the same on every page. This is where caching can be very useful.

Why You Should Care?

Thanks to new cloud services storing data is pretty cheap. For example, saving 10GB of data in Amazon's or Google's cloud costs about $0.3/month. That's pretty cheap.

But transferring the data over the Internet can get expensive.

If your server serves terabytes of data each month, the costs can get pretty high. And the end user might have a mobile data plan that's charged for every transferred bit.

Making a web site fast is also a user experience issue. People use the Internet more and more on mobile devices and everyone knows how frustrating it is to try to load a web page when the connection is bad.

Caching is also so easy that there really is no reason not to.

Caching in Innota

So, how does caching work in Innota? It works very well, thanks for asking ;)

Lets use this blog as an example. Every page in this site has some assets that never change, like the Innota logo in the header or in the footer.

When a browser requests the logo from Innota server, Innota responds with the file and tells the browser that it's safe to cache the image for at least a week.

In addition to caching files, Innota also uses an aggressive caching strategy to cache stylesheets and JavaScript files.

A Concrete Example

Lets look at some concrete numbers how much we're actually saving thanks to caching. Lets check the amount of data transferred with and without caching using the following pages:

Home page -> Blog -> Open first post -> Select first tag performance

Tip

Using Chrome Developer Tools it's easy to temporarily disable caching and even test how your pages load in different Internet connection speeds.

We're also loading some external assets for fonts and styles, but lets concentrate only on resources that are loaded from Innota's servers.

Without caching that's a total of 505.7KB. As you can see, images take quite a big portion of the total amount and the size of HTML and CSS is almost negligible in comparison. HTML and CSS is small thanks to compression and minification (described in more detail in part I of this blog series).

Using caching total transfer size is only 178.2 KB. That's an amazing result, thanks to caching the amount of data transferred is about 65% smaller than the original.

As you can see, images make up a big portion of the total size. Caching the images helps surprisingly lot, since a lot of the same images are repeated on most pages. For instance, all pages include the Innota logo, and the blog index includes the same post image that's also displayed in the post page in step three.

In step four we display only images that have already been displayed in previous steps. That's a total of 0.0KB of images compared to 142.4KB when caching is not used. That's a huge difference!

Final Words

If you're a more seasoned web developer all this is probably old news for you. And you're right, it is. There's nothing ground breaking here and the technologies Innota uses have existed for years.

Innota makes caching ridiculously easy. Everything is done for you in the background and you don't need to setup complex build processes or fine tune your server to harness the power of caching.