Creating exceptionally fast web sites has never been easier than it is with Innota. Here's a (slightly technical) explanation how we manage to deliver sites so fast to audiences scattered all around the globe.
This is the first post in a three-part series. We're concentrating on these three key things to make web sites as fast as possible:
- Part I: Making the content as small as possible
- Part II: Delivering the content as fast as possible
- Part III: Caching the content
Making the Content as Small as Possible
This may sound obvious, but it's not quite that simple. Of course, you can write shorter blog posts to make it faster to deliver but that's not what we're talking about here.
We're talking about compression, scaling images, minification and making as few requests as possible.
Compression
The average size of a web page has increased a lot in the last couple of years (some data from 2014). To make the size of transferred files as small as possible Innota compresses files.
It means that there's less data to transfer between our servers and users reading your website. Everyone wins:
- Your site saves bandwidth
- Your users save bandwidth (and possibly mobile charges and whatnot)
- Better user experience since your site loads faster
- Your site is ranked higher by search engines
Technically this is pretty simple and you don't have to do anything. Innota handles compression automatically in the background.
Lets take a concrete example, our blog. At the moment without any compression the size of the front page is 8.0K. After using gzip compression the size is only 2.4K! That's quite a decrease!
This all adds up the more visitors you get. If you have a thousand visitors, that's already a huge saving for everyone! You can do the math if you want :)
Scaling Images
All web sites are full of images these days. Most image formats are already compressed and using methods descibed above don't work that well like they do with text files.
The best way to optimize image delivery is to make sure the image resolution is correct for your use case. Unfortunately, resizing images manually in Photoshop can take quite a lot of time especially if you have a lot of images in your site.
Luckily there's a really simple way to scale images in Innota. Lets take this blog post as an example. The header image is a picture of a rocket (yes, I made that myself, thanks for asking :) and the original resolution is 1980x1080 pixels.
In this blog the main column where the image is displayed is only 605 pixels wide. There's really no point in adding the full resolution picture here since users will only see it 605 pixels wide. I could scale the image in Photoshop, but in Aatos there's an even easier way. This is what the template looks like for the header:
{% if page.image %}
<img src="{{ image(page.image, { width: 605 }) }}" />
{% endif %}
This really shows the power of templates in Innota. First, we check if the page has a header image. If there is an image, we use the image() function to get the URL for the image scaled to a width of 605 pixels. This is so easy that there really is no excuses anymore to not scale your images to the correct size.
In this case the saving in file size is quite dramatic. The size of the original 1980x1080 image is 203K, and scaled down to 605x330 pixels the size is only 35K. That's less than 20% of the original.
Minify Content
Minification is the process of removing all unnecessary characters from stylesheets and JavaScripts.
For instance, your JavaScript files are probably full of comments (I hope!) to make it easier to understand what's going on in the code and to make development easier. This is exactly the way it should be. The problem is that you're not delivering the JavaScript for other developers, you're delivering to your site visitors' browser.
And the browser doesn't need comments. All it needs is the JavaScript code. This is where minification comes into picture.
Innota automatically minifies your stylesheets and JavaScripts. Bascially, Aatos removes all unnecessary characters (like empty lines) or comments that a browser does not need. This makes the file smaller and transfer faster.
In addition to minification Innota also combines your stylesheets and JavaScripts to make the number of requests as small as possible.
Making as Few Requests as Possible
Why does the number of requests matter? To make it simple, it's faster to transfer one file with the size of 6K than it is to transfer three files sized at 2K. There's always some overhead in the transfer process.
For a typical web page the browser makes just one request to load the html of the page, but the page markup includes instructions to load stylesheets and javascripts. This is where the number of requests increases.
For instance, to make development easier you probably divide your CSS files into separate files. Your html might look sometehing like this:
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="buttons.css">
<link rel="stylesheet" href="main.css">
Dividing CSS or JavaScript into different files makes development easier. But remember, loading all these files separately is slower than loading just one big file with all the contents of these three files.
And this is exactly what Innota does for you. Innota automatically combines and minifies all of your stylesheets and JavaScripts. In Innota you could replace the example above with this single line of code:
<link rel="stylesheet" href="{{ css_compiled() }}">
Instead of loading three separate CSS files you load just one which includes the content from all of the three files. The {{ css_compiled() }} here is a special tag in Innota which is replaced with the full URL to the combined and minified CSS file.
Conclusions
If you're a more seasoned web developer all the techniques described in this post are probably old news for you. That's true, despite the fancy rocket I drew there's no rocket science here.
In fact, the tools to achieve this have existed for quite some time. For instance, using gzip to compress web pages has been used since the late 90s.
The real innovation in Innota is how easy and completely transparent it is to utilize these techniques. In Innota making your site as fast as possible is so easy that there are no excuses not to.
