How to Make Your HTML5 Apps Stop Lagging
June 10, 2015 | Andre Newman
HTML5 is changing the way we interact with websites. From new media formats to graphics that take advantage of hardware, HTML5 is shrinking the performance gap between web apps and native apps.
But even though HTML5 adds many performance-boosting features, many devices are left struggling to run even the most basic modern websites. In this post, we’ll explore some of the ways you can improve the performance of your HTML5 apps.
The Lag Problem
When we talk about lag, what we’re actually referring to is the jerking or stuttering that occurs when a browser fails to render the page in a certain amount of time. This is known as jank, and it can be caused by any number of issues ranging from a slow CPU to a poorly configured browser.
Most devices have a refresh rate of 60 Hz, meaning the display refreshes 60 times per second. That leaves browsers with less than 17 ms to run scripts, generate layouts, and render to the screen without intruding on the next frame.
This idea is demonstrated in Andreas Gal’s talk Dirty Performance Secrets of HTML5.
Browsers only have 16.66 ms to render a complete image to the screen [Source]
Web App Optimization
There are six design principles surrounding the factors below meant to decrease CPU time and increase parallelism. These principles measure not only how optimized your apps are, but how quickly they get to your users. They include:
- Improve network response times
- Reduce download sizes
- Optimize and structure HTML
- Optimize media and plugins
- Optimize script files
- Understand how your code works
Using these principles to optimize your web apps will result in faster performance, lower resource usage, and happier users.
3 Factors of Web App Optimization
As Jatinder Mann explains in 50 Performance Tricks to Make your HTML5 apps and sites faster, there are three main factors that drive browser performance: CPU, GPU, and networking capability.
#1 CPU Optimization
Most of the magic behind the browser takes place on the CPU. The CPU is responsible for parsing HTML, generating the Document Object Model (DOM), running scripts, rendering content, and playing media in the absence of a GPU. Devices with slow processors – such as low-end mobile devices – can struggle with web pages that render flawlessly on a laptop or tablet.
One of the biggest performance drains is browser reflow. Reflow is the process where an element changes its position or placement, causing the browser to recalculate the position of every element in the DOM.
Imagine a website that uses a responsive design. Changing the size of the browser window causes the browser to resize, shift, or remove each element on the page. Each time an element is updated, the rest of the elements have to be adjusted around it. This can cause heavy delays on slower processors, especially with media-rich pages.
To limit reflow, avoid making too many changes to the DOM. As Paul Irish suggests in his talk HTML5, CSS3, and DOM Performance, you can batch changes to the DOM by cloning a node and working on the copy, temporarily setting your working elements to “display:none”, or by using DocumentFragment.
Another solution is to use absolute positioning instead of relative positioning. This makes websites less responsive, but prevents the browser from having to recalculate an element’s position whenever the page is updated.
With relative positioning, repositioning one element causes the entire document to reflow [Source]
#2 GPU Optimization
The GPU, or graphics processing unit, is the hardware component that displays graphics on the screen. Many HTML5 features take advantage of the GPU to provide fast, high quality graphics without bogging down the CPU. GPUs are also better tailored to handle the growing demands of high-resolution devices, such as high-end phones and laptops.
Using the GPU in a browser is often referred to as hardware acceleration. As shown in the Isotope demo, hardware accelerated CSS provides smooth animations using the device’s existing hardware.
Isotope demonstrates hardware accelerated CSS [Source]
Fortunately, HTML5 and CSS3 have made it easier for web developers to tap into a device’s GPU by enabling hardware acceleration for certain elements. The canvas element, for example, creates a drawable region that can be modified by a script. If the browser supports hardware acceleration, then the canvas element renders graphics using the GPU.
For elements that don’t automatically provide hardware acceleration, there are tricks to enabling GPU support.
The Null Transform Hack
A common approach to enabling hardware accelerated CSS is using what’s known as the “null transform” hack. This hack triggers hardware acceleration by using a 3D transformation on an element. The transformation doesn’t actually change the element, but still invokes the GPU for the lifetime of the element.
You can trigger hardware acceleration using either
transform: translateZ(0); or
transform: translate3d(0, 0, 0);
While the null transform hack can be useful for animations that are slow to repaint, using it for too many elements can strain the GPU and actually reduce performance.
#3 Network Optimization
Hardware performance means nothing if your users can’t access your website. Dynamic, content-rich websites need to transfer large amounts of data to users quickly.
Generally speaking, there are two ways to approach this problem:
- Shorten the distance between your users and your content
- Reduce the size of your content
Shortening the distance between your users and your content means reducing the amount of time needed for the server to deliver content to the user. This involves reducing the number of redirects, the number of refreshes, possibly implementing domain sharding for multiple resources, and reusing connections when possible.
Note: If your aim is to serve traffic over HTTP/2, domain sharding is considered an HTTP/2 anti-pattern in terms of performance. And for HTTP 1.x, it’s best to only shard over two domains.
Another way to improve response time is to move your content to a content delivery network. More and more companies are turning to CDNs to bring their content closer to users. A CDN can drastically improve the performance of a high-demand or content-heavy web app.
Visualization of how a CDN works.
Some tactics for reducing page size include performing GZIP compression, caching dynamic content in HTML5’s App Cache, and caching requests. Additionally, duplicate resource calls can contribute to added bandwidth: If the same resource is linked to twice and both links are spelled differently, then the resource will be downloaded twice.
Profiling Your HTML5 Apps
For testing and profiling browser performance, utilities such as JSPerf and JIT Coach will monitor and analyze the performance of your scripts. In some cases, the source of a performance issue won’t be apparent without profiling.
As Andreas Gal discovered, simply transposing a number in an array can improve performance by 326 ms:
Moving an array element to the end of the array reduced processing time from 331 ms to 5 ms [Source]
Most modern desktop browsers contain built-in profilers. You can access Firefox’s profile through Developer -> Performance, and you can access Chrome’s profiler through More Tools -> Developer Tools -> Profiles. Most browsers contain additional tools for monitoring DOM changes, debugging scripts, and analyzing a page as it loads.
Most of the activity that bogs down your web app takes place on your users’ devices. Tailoring your app to take advantage of HTML5’s features can vastly improve your users’ experience and eliminate lag and jank.
The following videos contain more information on improving the performance of your web app and creating a faster, smoother web.
- 50 Performance Tricks to Make your HTML5 apps and sites Faster (Jatinder Mann, Internet Explorer Program Manager for Microsoft)
- Defying Facebook: Creating High Performance Mobile Apps (Burke Holland, Developer Advocate for Telerik)
- Dirty Performance Secrets of HTML5 (Andreas Gal, Chief Technology Officer and VP Mobile for Mozilla)
- HTML5, CSS3, and DOM Performance (Paul Irish, Chrome Developer Relations for Google)