Introduction
Ever since I’ve entered the world of web software development in 2014, when I created my first website so I have a porfolio while applying for my first Software Engineering job, there was a new kid in the block. Not me, a young man then who is trying to put his foot in the door of my now career. I’m talking about Single Page App.
Back then, logicsniper.com, is owned by me. It is a humble php page, which injects a JavaScript now and then to the page along with some css to purtify thangs. But boy, do I wish to learn angular, and create me some single page apps.
When I was working as a Junior Software Developer in Univerity of Alberta’s eClass team, they gave me a special assignment. To do whatever I want to implement some feature I now forgot what. One thing I know for sure, I learned angular, and somehow managed to shoved my first single page app in the university’s Moodle. I’m neurotic and will always have an impostor syndrome, but boy I remember people were impressed with that.
I even presented it to the whole Moodle community in edmonton (at least it was the community of Moodle developers from various Universities and Colleges). But due to having 0 self-esteem then (I have a little bit now), I cracked, I refuse to remember the rest of that event ðŸ˜ðŸ˜‚😂.
Anyways, I thought it was the sh!t then. But now that I manage a SPA project, I’m starting to see the drawback. The philosophy to load most if not all resources at the beginning of the page load is at odds to how humans fundamentally used the web.
So, How do we use them internetz?!
I recently came across the paper How Do Home Computer Users Browse the Web [1]. Without boring you with the methods and their findings, I’ll just focus on one findings they had. The following is Graph depicting the time user spend on websites (node size) and how users switch between different websites, or types of website (color coded by web category).
The nodes represent the category of the site that the user is on. The edges are the link between the two nodes. The thicker the edges, the more often the user switch from the starting node in the edge, to the other node.
So how do we use the web? More specifically the browser? The answer can be answered by looking at the thickest edge in this graph. The answer is, Opening a new tab.
Discussion
This was very eye opening to me. This was very much in coincedence of what is going on with our project. Late last year, my bosses decided that the first priority is to improve performance of the SPA application that I’m responsible for. A lot of customers have personally expressed their desire.
I, being defensive at first, suggested “it is a single page app, why not just navigate within the app?”. But even in some basic self-introspection, that fails. I too am not special. I use tabs a lot. I hoard tabs. Sometimes, I think that a tab hoarding intervention is in order. I use them tabz for sure.
So, from 4th quarter of 2021 to the 2nd quarter of 2022, our first priority was to fix this problem. We invested/investing in things that invent first time loading performance:
- Better concurrency when loading resources: Before that, there were a lot of non-concurrent requests between the heaviest of resources, causing them to be loaded serially, drastically increasing load times.
- Dedup: Another offending factor when it terms to load times is the duplicate npm packages. Our package have gotten so large, that depenendencies and their sub-dependencies often cause duplicate package. lodash for instance was duplicated at least 5 times…
- Diet: Remove unusued package, or use native APIs when possible. jQuery can be mostly replaced by recent DOM API improvements.
Already we’ve seen performance improvements, slashing our time by less than half. I haven’t done a proper benchmarking, but I reckon we’ve hit 1/4 loading time or less.
Conclusion
It is not 2nd quarter of 2022 yet, our deadline for a faster SPA, but I’m confident we are on track to finally crunching this problem once and for all. Of course the fight is not over just. Arm with the knowledge of human usage of the browser, we will make this a high priority, adding new coding standards to our coding style.
References
- Kyle Crichton, Nicolas Christin, and Lorrie Faith Cranor. 2021. How Do Home Computer Users Browse the Web?. ACM Trans. Web 16, 1, Article 3 (September 2021), 27 pages.
https://doi.org/10.1145/3473343
