Shan Lu, Junwen Yang and Chengcheng Wan receive their Distinguished Paper Award at ICSE. (Photo courtesy ACM/IEEE)
Shan Lu, Junwen Yang and Chengcheng Wan receive their Distinguished Paper Award at ICSE. (Photo courtesy ACM/IEEE)

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.”

Related News

More UChicago CS stories from this research area.
UChicago CS News

UChicago Team Wins The NIH Long COVID Computational Challenge

Jun 28, 2023
UChicago CS News

UChicago Assistant Professor Raul Castro Fernandez Receives 2023 ACM SIGMOD Test-of-Time Award

Jun 27, 2023
UChicago CS News

PhD Student Kevin Bryson Receives NSF Graduate Research Fellowship to Create Equitable Algorithmic Data Tools

Apr 14, 2023
UChicago CS News

Computer Science Displays Catch Attention at MSI’s Annual Robot Block Party

Apr 07, 2023
UChicago CS News

UChicago / School of the Art Institute Class Uses Art to Highlight Data Privacy Dangers

Apr 03, 2023
Students posing at competition
UChicago CS News

UChicago Undergrad Team Places Second Overall In Regionals For World’s Largest Programming Competition

Mar 17, 2023
UChicago CS News

Postdoc Alum John Paparrizos Named ICDE Rising Star

Mar 15, 2023
Young students on computers
UChicago CS News

UChicago and NYU Research Team Finds Edtech Tools Could Pose Privacy Risks For Students

Feb 21, 2023
Garcia sitting in a jet engine
UChicago CS News

Student Spotlight: Gabi Garcia’s Bridge Between CS and Classics

Jan 30, 2023
UChicago CS News

UChicago Launches Transform Accelerator for Data Science & Emerging AI Startups

Jan 19, 2023
Two students looking at a wearable device
UChicago CS News

High School Students Find Their Place in Computing Through Wearables Workshop

Jan 13, 2023
Haifeng Xu
UChicago CS News

New CS and DSI Faculty Haifeng Xu Brings Strategic Intelligence to NeurIPS 2022

Nov 28, 2022
arrow-down-largearrow-left-largearrow-right-large-greyarrow-right-large-yellowarrow-right-largearrow-right-smallbutton-arrowclosedocumentfacebookfacet-arrow-down-whitefacet-arrow-downPage 1CheckedCheckedicon-apple-t5backgroundLayer 1icon-google-t5icon-office365-t5icon-outlook-t5backgroundLayer 1icon-outlookcom-t5backgroundLayer 1icon-yahoo-t5backgroundLayer 1internal-yellowinternalintranetlinkedinlinkoutpauseplaypresentationsearch-bluesearchshareslider-arrow-nextslider-arrow-prevtwittervideoyoutube