Loading Times, from Marathon to 100m, hurdles
Wednesday, 10-05-23, Nick Zoumpoulis
One of the many reasons we chose to create website applications via our own custom platforms, was speed, aka loading times. We had many other reasons as well, such as full control of the code, extended functionality and portability, custom user interfaces and easy of use, and much more. But let’s focus to speed for a moment.
How important is speed? Too much and for many reasons. Search Engine Optimization success, faster loading times on low-speed networks, ease of use through loading speed of the website, visitor satisfaction, and so on, and so forth.
- 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
- 38% of mobile internet users say that they’ve encountered a website that wasn’t available.
- 47% of consumers expect a web page to load in 2 seconds or less.
- 40% of people abandon a website that takes more than 3 seconds to load.
- A 1 second delay in page response can result in a 7% reduction in conversions.
- 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.
Neil Patel, top web analyst, top 10 marketer.
For our short analysis, we will choose a type of website we like a lot, rent a car website. We choose this type because it is quite demanding. It requires well designed and modern templates and artwork, a large number of JavaScript libraries to manage calendars, their translations, image galleries, calculation scripts, transition effects, and much more.
For a few years now, we switched from our own front-end systems to the famous Bootstrap framework. We started with version no.3 and then moved on to the magical version 4. By using the latter combined with our custom code, proper use of fast cdns, proper selection of libraries for calendars (bootstrap date-time picker), translations and date calculations via moment, use of lazyloading for images below folding point, and last but not least, use of service workers to support progressive web apps, we managed to create an amazing platform. Our loading speeds and times, via the official google tool, page speed insights, were 70% and above. Such speeds were great for such demanding web systems.
We managed to go far ahead of our competition, foreign and domestic, and along with our easy-to-use web management admin systems, we enjoyed a huge advantage.
But is that enough? It is never enough… A few months ago, Bootstrap v.5 was presented and almost immediately we started reading, analysis and short testing. The latest version proved to be much better in many aspects but the most important one was the JQuery discontinuance. Bootstrap was now free of this magical but a bit heavy library. This was great news even though we had to rewrite most of our JavaScript scripts which were also JQuery dependent. We estimated a 5-8% increase profit in loading times, maybe 10% at best. In details:
- Moved from Bootstrap v.4 to v.5
- Moved away from JQuery library (we still love it!) and went back to old school Vanilla JavaScript
- Changed all other libraries that were JQuery dependant
- Bootstrap Date-Time picker to PickaDay (Very fast library but required tweaks to fit our needs)
- Moved away from moment.js and redone all translations ad date calculations in Vanilla JS custom script
- Switched from JQuery dependent Lazyload to Vanilla Lazyload (works just as well)
- Correct selection of image filetypes, sizes and compression
- Less custom css rules since Bootstrap v.5 is even more flexible and with many more styles and features
The new result was astonishing, and the first tests showed the success rates. Long story short, we managed to improve our loading speeds’ efficiency by no less than 16%! This is huge and put a big smile in our faces. Can we do better? Maybe… but for now we have a much more competitive package which will score more than 95% on less complex websites such as e-shops and corporate presentations.
Time to enjoy
