Man vs. Machine Learning-Based Optimizations

Manual web performance optimization vs automated machine learning based optimization

In the previous post I introduced the application optimization quadrant, rating some popular FEO techniques in terms of performance impact, reliability, and time to implement. The challenge with many of these optimizations is that they rely on humans to write the code and determine the optimal settings, but humans are prone to error. This is why Instart Logic realized that in order to optimize an application, a different approach was needed – one that harnessed the power of machine learning to deliver the most reliable, high performance optimizations in the least amount of time. Today I will be re-visiting that quadrant to add Instart Logic’s application optimizations, which utilize machine-based learning techniques.

First, a brief introduction to what is meant by machine-based learning. Computers are programmed by humans, so doesn’t that mean a computer is only as smart as the human that programmed it? If that means using static programmatic instructions, like "convert all images to WebP" or "combine all external JavaScript into a single file," then yes. Programs that automate these tasks are useful, but it doesn’t address the fact that there is no one-size-fits-all answer, and that implementing an optimization may cause an application to break or perform worse. Machine-based learning doesn't mean following static program instructions, but instead means creating algorithms that have the ability to learn from and make predictions based on various types of data.

Machine learning is ideal in situations where you cannot code the rules, you cannot scale, or the environment is continually changing. When rules become too complex due to the number of variables and they need to be finely tuned, it becomes difficult for a human to accurately perform the task. Take the case of image optimization. To optimize an image, the following factors need to be considered: what browser is being used, what the dimensions of the image are, at what point does image quality begin to degrade, what image format provides the best image in terms of quality and size... the list goes on. For a human to determine the ideal settings for an image could take days as different permutations are applied and examined. Most applications have more than one image, and new images can be added on a daily or hourly basis, so going through the painstaking process of determining the ideal image settings manually is essentially impossible. This is why most image optimization solutions set a single best-guess compression level for all images and call it good.

Machine learning is all around you – in the suggestions that Amazon and Netflix provide, in the suggested friends and posts visible in your Facebook feed, and the facial recognition capabilities of your camera. And if you are an Instart Logic customer, it is in your application optimization. As traffic flows through the Instart Logic system, our machine-based learning system works in conjunction with feedback received from the Nanovisor, our client-side web application virtualization layer, to determine which pieces of code are being executed, and the similarities and differences between the images being served and other images we have previously seen. As the feedback from the client is fed back to our algorithms in the cloud, they learn how to better optimize content across devices and users. The information obtained from the client-cloud architecture of the Nanovisor and the machine learning algorithms determine how to best optimize content at run-time and deliver content to end users without running the risk of breaking the application.

The Application Optimization Quadrant Revisited

The application optimization quadrant below includes traditional front end optimization (FEO) techniques plotted along with some of Instart Logic’s machine-based learning application optimization techniques. The purple dots represent traditional FEO techniques, while the blue dots represent Instart Logic features. The y-axis is the measurement of the performance impact, the x-axis is the measurement of the reliability of the implementation, and the size of the dot reflects the amount of time required for implementation (the larger the dot, the more time consuming).

Instart Logic Web Performance Optimizations VS traditional FEO Quadrant

High Performance, High Reliability

You may quickly notice that there are two dots for Image Optimization. No ,this is not a mistake. Image Optimization is a set of techniques available through traditional FEO and also through Instart Logic that include image transcoding and image adaptation. Image optimization performed by Instart Logic is less time-consuming, more reliable and scales to millions of images, as the work is being done by computers. It provides a better performance improvement, as each image is tuned with the best settings for that specific image and end user. No more leaving bytes on the table.

As HTML and JavaScript pass through the Instart Logic service, the Nanovisor works to discover how the code is being executed – which parts of the code are dynamic and which are static, or which JavaScript functions are used most frequently. The HTML content that is common across all users is delivered first while the personalized or dynamic content is stitched in later. This tiered delivery improves start render times and the user's perception that the page loaded quickly. For JavaScript, the Nanovisor determines which functions are used frequently and which ones are rarely used – delivering only the most frequently-used functions first and delivering the remaining functions on demand. Manually going through code to prioritize what should be sent first would be too time-consuming to be a worthwhile optimization, but with the benefit of machine-based learning, this can be easily achieved.

Low Performance, High Reliability

JavaScript Interception is classified as a lower performance optimization as it is narrower in focus, applying only to third-party JavaScript resources. Optimizations with a narrow focus will have a lower performance impact. If a page only has 1 external JavaScript resource, performance gains would be much smaller than if there were 10 or more external JavaScript resources.

JavaScript Interception allows the Instart Logic service to intercept and re-route requests for third-party content from a single source, ensuring high reliability.

When a third-party component is taking an excessive amount of time to load, the Instart Logic service will bypass it and deliver all other content first, eliminating the chance for users to blame your application for sluggish behavior.


Optimizations in Action

In the previous post, I shared some examples of how minification and concatenation can impact page load time and page weights. I tested the same page with Instart Logic optimizations in place. Applying concatenation and minification results in an 8% improvement in start render time from the origin. Using Instart Logic yields a 24% improvement from the origin.

time to start render compared with FEO and Instart Logic web performance optimizations

Humans are prone to error. We are influenced by outside forces such as personal biases, and have limited amounts of time as we need to do things like eat and sleep. Computers can operate 24 hours a day, 7 days a week, allowing them to process much more information than a mere mortal can. Using machines to help us optimize applications based on the low reliability and high implementation costs associated with traditional FEO techniques takes the headache away.

As end users’ demands and expectations increase in terms of response times and customizations, traditional methods of application delivery and optimization need to be revisited. To get pages to load in under 3 seconds for any user on any device requires in-depth knowledge of the application and the best possible optimization settings. This can only be achieved by utilizing the intelligence available from machines.