Kirby Size Inventory

I'm always trying my very best to make us focus on keeping Kirby as simple and light-weight as possible. That's actually a very easy claim to make though. So after Kirby 2.2 and all the refactoring that went into it, I wanted to run a little inventory on the various components and assets and see how big Kirby really is.

Disclaimer: the numbers are taken from the latest build of Kirby 2.2.2

Components Overview

Total

 668.00 KB Kirby Folder
1700.00 KB Panel Folder
=
2368.00 KB Kirby Components

PHP

 668.00 KB PHP in Kirby Folder
 591.00 KB PHP in Panel Folder
= 
1259.00 KB PHP

The Panel

Panel Size Overview

  74.80 KB CSS 
 227.26 KB JS
 572.00 KB Fonts
   3.00 KB Images
 591.00 KB PHP
=
1700.00 KB 

CSS

  27.00 KB FontAwesome CSS
  47.80 KB Panel CSS
=
  74.80 KB CSS 

Here's still quite a lot of potential for optimization by cleaner CSS. 74 KB including the icon stuff is not too bad though.

JS

   84.00 KB jQuery 
   61.00 KB jQuery UI (core.js, widget.js, mouse.js, draggable.js, droppable.js, sortable.js)
    1.00 KB jQuery UI Touch
    3.00 KB jQuery Autosize
    2.00 KB jQuery Hotkeys
   35.00 KB Moment JS
    4.00 KB NProgress 
   13.00 KB Pikaday
   24.26 KB Panel Components
=
  227.26 KB JS

Those 64 KB of jQuery UI and jQuery UI touch really annoy me. I'm planning to replace the sortable and drag & drop features with dragula in a future release to cut this down further.

Fonts

 420.00 KB Source Sans Pro
 152.00 KB FontAwesome
=
 572.00 KB Fonts

Fortunately 572.00 KB is the size of all font files combined (WOFF & WOFF2). Browsers with WOFF2 support have to load 231.94 KB of font files on the first request. Still a lot. I'm looking for ways to move away from the icon font and replace the icons with proper SVG instead.

Images

   3.00 KB Images

A few additional words…

This rundown is purely about the size of Kirby, not its performance. I think most of you already tested that part thouroughly for yourself :)

For me the golden rule has always been to go for as little code as possible. That means a healthy balance between size and maintainability.

I'm especially careful with adding external dependencies. I'm a friend of writing smaller custom solutions whenever possible instead of addig a third-party library that might have too many unneeded options and I can't be sure how well it will be maintained in the future. But again this has to be balanced.

In my opinion you should always look very closely at how much code you actually add with a dependency to your project. If a little tool that just handles "feature x" adds more code to your project than your entire project had before, it might be a good idea to double-check that.

I find the current trend of blindly playing plug and play developer troublesome. The coolest part about the web for me has always been the possibility to look behind the curtains. Make up your own mind and learn all the necessary parts to build your own tools. That's where the magic happens!

The longer Kirby exists, the more I enjoy the part of curating its source. Cutting down additional kilobytes of JavaScript or CSS and increasing Kirby's performance has become a very nerdy but beloved hobby :)

On to the next release!

— Bastian

Our partners

CDN by KeyCDN Image hosting by imgIX Search by Algolia Issue tracking by Codetree

Top