A good question! In the early days of the internet as we know it, performance optimisation was limited mainly to server performance (e.g. response time), and asset optimisation and delivery (e.g. image compression). It rarely focused on how the user perceived the page loading process.
Since then, performance optimisation has evolved into an entire discipline of its own, drawing on design, technical and psychological expertise, to essentially minimise user frustration and thus improve user experience.
Framewürk’s Chief Technical Officer, Petr Klus, talks about his passion for performance optimisation and the surprisingly creative side to what many view as a predominantly technical discipline.
‘At its most basic, performance optimisation has two core elements: the loading process, and the relationship of the loading process with interactivity,’ Petr explains.
‘For example, if you have two pages that each take three seconds to load, users are far more likely to disengage with the page that displays nothing until three seconds has elapsed, than the one that progressively reveals its content over the same period.’
‘But the timely displaying of content, even progressively, will not necessarily result in a good user experience if they have to wait a further three seconds to be able to interact with the page,’ he said.
So how does a browser load a page? It begins with the browser, on a user’s instruction, issuing a DNS request to get a server’s IP address. Once the browser has received the correct address, it then contacts the server in question, which in turn supplies an HTML file. Once the browser has received the HTML file, it creates something called a Document Object Model (DOM), which in essence, is the page. The browser then continues to load resources, such as stylesheets, scripts and images, updating the DOM as it goes. Each update triggers the browser to re-render the page, changing the way it appears on the screen. Generally speaking, the initial loading process concludes when all the resources detailed in the DOM have been received, the rendering process has concluded and the page can be interacted with.
‘My passion for performance optimisation stems from a long-standing interest in building applications with a high standard of user experience. While studying computer science many years ago, I was building Java applications and invested a lot of time researching ways to avoid the infamous beachball of death, either on application initialisation or as a result of user action. Some examples of the techniques I employed were optimising my code to run faster, which reduced load time or providing appropriate visual cues to better manage user expectations. My interest in and application of performance optimisation techniques has grown and evolved since I left university, though the stakes are a lot higher given the nature of the work we do now!’
Setting the stage
So what is the surprisingly creative side of performance optimisation?
A suitable analogy is a stage show, where the director uses a combination of techniques to control the audience’s attention, manage their expectations and most importantly, mitigate for boredom! For example, before the show commences, suitable background music will entertain the audience and build the atmosphere. If there is a delay with something backstage, an actor may well be sent out in front of the curtain to engage directly with the audience and distract them from the fact there has been a delay. In the countdown to the show beginning, the lighting will be dimmed, and the background music will fade out so the audience knows something is about to happen. Finally, just before the show starts, the orchestra will start playing, focussing the audience’s attention towards the stage, in readiness for the curtain to be raised.
To continue with the analogy, performance optimisation is not just about minimising the time between the audience entering the venue and the show itself commencing. That is not to say that it is not an important factor; after all, no one wants to be made to sit for hours waiting for a show to start! It is also about what happens from the moment the audience enters the venue to the moment the show starts, and everything in between. What happens if there is a delay? How do we ensure that we keep the audience engaged and entertained? How do we control where the audience looks and when?
‘By considering all such questions as part of the optimisation process and devising appropriate responses, we maximise the likelihood of providing a positive experience for all users, irrespective of how fast their connection is or how good a device they have,’ said Petr.
By considering all such questions as part of the optimisation process and devising appropriate responses, we maximise the likelihood of providing a positive experience for all users, irrespective of how fast their connection is or how good a device they have.
So what are some practical examples of these creative optimisation techniques?
‘From the moment the HTML file is returned from the server, you want to engage your viewer,’ explained Petr. ‘One of the more common techniques is to give the browser a simplified representation of the page, which can be displayed to the user while the other, more weighty resources are loaded in the background. This provides your user with immediate visual feedback that the page load is underway. This reduces the likelihood of them disengaging - bouncing.’
Once the simplified representation is in place, individual loading sequences can be displayed for appropriate page components, which provide further visual feedback to the visitor on the overall loading progress of the page.
‘For example,’ Petr said, ‘if your page has a menu on the left and content on the right, the initial load can contain a visual representation of the layout without any of the content. Then you can show graphics that look like text for the main section, and give it an attractive and engaging loading animation. You can display this lightweight experience very early on in the loading process, before the actual content is displayed, giving the viewer the impression they are more quickly progressing to the content.'
You can display this lightweight experience very early on in the loading process, before the actual content is displayed, giving the viewer the impression they are more quickly progressing to the content.
‘While all of the above is happening, the central processing unit (CPU) usage also needs to be considered. The last thing you want to do is overload the viewer’s computer and subsequently delay the moment when they can interact with the page. This is best accommodated for by delaying the initialisation of non-critical parts of the page, for example tracking scripts and live chat,’ Petr concludes.
‘While many of the aspects of the page load will be perceptual and thus very difficult to quantify, it is important to have machine-measurable KPIs to be able to keep an eye on page performance on an ongoing basis,’ Petr said.
Petr recommends tools like SpeedCurve because they provide measurements and also allow tests to be run to see how real people experience the page loading process. It is a bit like Google Analytics but for page speed.
‘One of the key measurements is Time to Interactive (TTI). This is how quickly a computer can process the page and allow a viewer to interact with it. Another example is the Speed Index, which measures how quickly the content is displayed during page load,’ said Petr.
One of the key measurements is Time to Interactive (TTI). This is how quickly a computer can process the page and allow a viewer to interact with it.
‘Like all forms of measurement, you need to understand what you are measuring and what numbers you actually want to achieve,’ Petr advises. ‘Key performance indicators should always be combined to give you the best overall picture.’
Petr also recommends having real-time performance monitoring on a representative sample of your pages.
‘We have automated warnings built into our monitoring so that if any of the KPIs change by more than 10 per cent, we receive a notification and can go in and investigate,’ Petr said. ‘We keep an eye on the trends and if a client makes a change that negatively affects the performance of a page, we can proactively go in and re-optimise it to make sure the performance benchmarks are adhered to.’
Performance optimisation is a core part of Framewürk’s mission. As Petr explains: ‘Even small differences in loading performance can have a profound effect on a range of factors, from conversion to engagement, which directly, positively impacts the ROI our clients get from their investment in Framewürk.'
Even small differences in loading performance can have a profound effect on a range of factors, from conversion to engagement, which directly, positively impacts the ROI our clients get from their investment in Framewürk.
‘By performing automated performance monitoring, we make sure that we spot and correct errors efficiently and proactively. It is why we consider Framewürk to be part software and part service,’ Petr said.
Photo by Alessia Cocconi