Examples Templates Store Pricing Docs Turbo CSS Blog Boomla WishList Introducing Turbo UI Named buckets Turbo CSS is Tailwind CSS on steroids Introducing Turbo CSS, the most advanced web-design language Calculate how much storage you use Better login system Collaboration settings Filesystem and Database are not cutting the problem space right What I'm working on 64bit File node IDs New how-to videos Creating buttons gets easier Introducing reusable components HTTPS by default Introducing the Boomla Theme CDN for faster pageloads Write your own website builder on top of Boomla On On composition Shared admin access A fresh config editor Building a multi-purpose theme A filesystem to replace your CMS New file link type: scope Mobile editing support Inline file wrapping changed Package sandboxing New PHP-like JavaScript engine [sjs-4e] Send emails to the website owner New JavaScript engine [sjs-4] A better editing experience New email service provider Glossary and other changes New panel changes Improved registration flow Boomla goes multiplayer Using local dev tools Why Boomla doesn't need Git File Panel Let's build a community Automatic updates Improved sjs-3 API New Frontend CSS modules Work offline with Boomla Faster page loads via caching Drag & drop supercharged Supporting CommonJS modules  Paranoid about loosing data IDE usability improvements Simple App install flow Meetups in Budapest Goodbye broken links Flow control from user space Customizing apps Contextmenu support for apps Deprecating the .Class file Hello Changelog Embedding 3rd party plugins Introducing Tools Installing apps just got amazing Public beta Host on our servers Simple deploy with push/pull Version Control for the Web 350M files on a 1TB disk 2 weeks in review
Control Panel

Faster page loads via caching

2017-05-11

As usage of Boomla started to grow a bit, we started to hit some bottlenecks. Some pages loaded in several seconds. Finally.

Demo

If all you want is to feel the difference, watch this video. Otherwise, you can read more about the topic below.

 

 

Problem

Boomla is about simplicity: just create a gallery and upload images into it, Boomla will take care of the rest. The rest, in this case, means resizing those images to present visitors with small thumbnails by default, otherwise too much data would greatly slow down page loads. To get Boomla into your hands as quickly as possible, I decided to only support resizing first, and later add a caching layer once it is a pressing issue. Caching means remembering the result, to save processing time. Here, it means saving a resized version of the image, instead of resizing it for each visitor.

To give you an idea, resizing a high-resolution image takes about 1sec. Your browser will only load 5 images at a time, so if you have 100 images on a page, it will take ~20sec to load. Ooops, that’s a lot. I can confirm I have experienced pageloads just over 10sec, and I did not enjoy it a bit.

Solution

Years ago, I have designed a universal caching architecture for Boomla. It could not have been implemented at the time, because it builds on other parts of the system that were not in place yet. Its immense benefit is that, well, it’s universal: it not only works for images, but any application in the system. In fact, the feasability of Boomla rested entirely on that component, as simplicity is quite resource hungry.

Finally, it is in place.

That may be an overstatement as so far only about 50% of it is implemented, but that 50% is the really complex part. It does not support caching every application yet, mostly just images, but the rest is only a question of time. Again, I’ll postpone that until speed is again becoming an issue.

Results

Again, pages loads are usually well under 1sec, typically around 500ms, but that grealy dependents on the applications used and contents added. I absolutely intend to keep it under 1sec, hopefully even lower.


Cheers,

you can follow me on Twitter