Award-Winning ICSE Paper Offers Web Developers a “Panorama” View of Slowdowns and Fixes

As web applications grow more complex and data-intensive, developers may feel like they’ve lost control of a fundamental property: how fast the site loads. Website features that look simple on the surface, such as the number of archived emails or a social media sidebar, can actually involve complicated data queries under the hood, which could slow performance to a crawl. On the developer side, these features may stem from only a single line of code, creating significant speed bumps that aren’t easily spotted.

To help developers find and fix these slowdowns, University of Chicago CS researchers in the laboratory of Associate Professor Shan Lu created Panorama, an interactive environment that optimizes web applications. A paper on the tool presented last month at the 2019 International Conference on Software Engineering (ICSE) received one of only 11 Distinguished Paper Awards from the judges. Authors on the paper include UChicago CS graduate students Junwen Yang and Chengcheng Wan, as well as Cong Yan and Alvin Cheung of the University of Washington.

Panorama is the latest chapter of a longer project investigating and mitigating the most common issues that plague database-backed web applications. A study presented at last year’s ICSE identified several “anti-patterns” that slow the performance of these apps, and unveiled PowerStation, a tool for fixing slow API calls. But where these changes could be automatically implemented behind the scenes, with no visible effect on the look of the application, other common slowdowns stem from the design of the website itself, requiring a more interactive tool for developers.

“In general, there are two type of things you can do to improve performance. One is you don't change any external view, so as a user, it’s free lunch, it's just faster and nothing else has changed,” Lu said. “But there's only very limited free lunch. For other changes, the webpage will actually be different, but it will be much, much faster. But we need to be more careful, because you don't want to just automatically throw away things and say, now it's faster.”

As a result, Panorama was designed as a “view-centric” environment for developers. After the algorithm has analyzed the application’s HTML code for potential issues, it creates a heatmap view of the website, with each element color-coded according to how fast or slow it loads. Developers can easily spot the worst slowdown culprits in the context of what users see when they visit the site, and access proposed fixes as well.

“We show you the performance cost for the front web pages, and then we also provide the optimization opportunities,” said Yang, the paper’s first author. “You can click on the opportunity, and we show you the new designed page with the new estimated performance cost. You can also redo to withdraw your optimizations.”

Many of the fixes are relatively simple concepts; for instance, returning the results of a search in paginated form instead of all at once, or returning a summary figure instead of an exact number, such as “you have 10,000+ emails” instead of “you have 14,873 emails.” Others are more complicated to implement, such as asynchronous loading of elements so that users can view fast-loading content while waiting for slower items to appear. And one of the most crude solutions — simply removing the slowest elements — can break a website or render it useless if done carelessly.

For these changes, Panorama does the hard work on the technical end, making changes across different files to account for any cross-dependencies. That leaves the developer free to make the higher-level decisions about whether the performance improvement of a particular design change makes up for any potential loss of functionality.

The effect of these fixes was significant, improving performance by an average of 450 percent, and in one case causing a page to load 38 times faster. To assess whether these optimizations actually improved user experience, the authors conducted a user study, showing volunteers websites before and after the Panorama changes. Many participants preferred the new design, and those who said they didn’t notice any difference were also considered a win by the researchers.

“Even if the user says the two pages are similar, with our optimization it's still better, because we actually save the server time,” Lu said. “For the web company, it's almost like you can use fewer machines, you can pay fewer utility bills, and the user wouldn't see any difference. So it's a huge win.”

Though Panorama currently only works for web applications written with the Ruby on Rails framework, the researchers said that the algorithms behind it could be adapted to work with other popular web development tools. For now, they’re trying to spread the word about the tool to the developer community, hoping that it will become an essential part of their workbench in designing new applications.

“We hope that we can show developers this tool and get feedback from them,” Lu said. “In terms of the research, I think we have addressed the most important problems that we identified. But I think it depends on the developer to judge how well we have addressed them.”