Inside the new tool poised to speed up your web browsing

To the everyday web surfer, the sheer power of the internet can be easily taken for granted. You search for your desired site, and just like that, you’re transported to your destination. Though it may feel like magic or teleportation, this smooth experience belies a more fascinating and intricate process of front-end development and inner mechanics.

When the web surfer enters a URL, the browser examines all the elements of the web page, as expressed through HTML, CSS, and JavaScript. It reads the webpage’s code to understand how it should look, then begins assembling and displaying the page’s text, images, videos, and other elements as requested.

Lazy loading streamlines this sequence. Instead of loading all the webpage’s information simultaneously, lazy loading prioritizes and selectively loads the essential elements visible to the user, resulting in a faster and cleaner loading experience.

In a recent paper, Khoury professor Frank Tip, alongside recently graduated doctoral student Alexi Turcotte and current doctoral student Satyajit Gokhale, have designed a new tool called “Lazifier,” which aims to streamline and improve lazy loading and the user experience.  By using static analysis to analyze webpage code without running it, Lazifier can automatically suggest changes in code to lazily load external packages in JavaScript applications, allowing front-end developers to easily integrate the suggestions and speed up webpage load times.

“We do a lot of static-analysis-based performance optimization for JavaScript in the lab,” Gokhale said. “And just prior to this we had papers published on two other tools: one called Stubbifier, which did the exact same thing of removing unused or dead code from server-side applications, and another called Desynchronizer, which introduced asynchrony into previously synchronous Node.js applications.”

With this combination of Desynchronizer and Stubbifier, the team could achieve asynchronous lazy loading in client-side applications, which run on the user’s device.

Now, with the goal of developing a “technique that would improve performance on the client side by reducing the initial load time of applications,” the team examined numerous client-side JavaScript applications to determine if the Lazifier technique would apply. As they did, they categorized the applications according to various criteria, including the presence of tests that could ensure the Lazifier-related code changes weren’t undermining the applications’ core functionality. An additional approach involved using call graphs to document the roles of an application’s functions and libraries, as well as how they interact with each other.

“If a certain set of predicates are satisfied during our analysis, we can determine that a certain function or method can potentially be loaded lazily,” Gokhale explains.

The final step was manually running the applications to validate the results. This left the team with 10 projects to test on for the next stage, in which they modified and rebuilt the code to implement lazy loading. Lazifier reduced the size of these applications by an average of 36%, sped up loading by 30%, and did it all without harming the functionality of the applications.

So, what does this mean for web surfers?

“Anytime you visit a website which has less code, it automatically loads faster, and you get a much more responsive page,” Gokhale said.

The tool could also prove useful to developers by recommending changes to the code; developers would simply need to accept those changes to enable faster loading.

Gokhale hopes to one day perform an evaluation larger than 10 projects to accommodate for extensive distribution.

“Before widespread adoption, there might be a couple of other steps that we need to take, but the technique definitely works,” he said. “Maybe with a little more effort it can be turned into a widely used tool.”