What is Jank?

In web development JANK is a term that strikes fear into the hearts of front end developers and designers alike! It’s a term that describes in a nutshell any unexpected, jarring or otherwise unpleasant visual or performance hiccup within a web application.

While the term itself might lack the gravitas of a technical specification its impact on user experience is undeniable. JANK can manifest in various forms, from subtle frame drops and stuttering animations to outright crashes and unresponsive interfaces.

Understanding JANK

Jank is a term used in web development to describe performance issues where animations, scrolling, or other interactions appear choppy or unresponsive. It typically occurs when a webpage first loads with multiple deferred load elements or the frame rate of an application drops below the desired 60 frames per second (FPS), causing noticeable stuttering and delays. Jank can significantly impact user engagement as their experience and lasting impression of web applications that otherwise rely on smooth transitions and interactions.

A well-optimized web application should render each frame in 16.67 milliseconds or less to achieve a smooth 60 FPS experience. When rendering takes longer than this users experience laggy and unresponsive interactions – resulting in jank.

The Roots of JANK:

JANK is a multifaceted phenomenon with roots in various technical factors:

• Slow Rendering: A browser’s webpage rendering pipeline involves several stages, including parsing HTML, building the DOM, calculating styles and finally painting the pixels on the screen. Any bottlenecks in this pipeline can result in noticeable delays and undersirable jankiness.
• Poor JavaScript Performance: While incredibly versatile, JavaScript can be a double-edged sword. Unoptimised JavaScript code, especially when dealing with complex DOM manipulations or resource-intensive calculations can significantly strain a browser’s rendering engine – this can lead to dropped frames, laggy animations and an overall sluggish user experience.
• Main Thread Blocking: The browser’s main thread is responsible for handling user interactions, rendering the page and executing JavaScript. When long-running JavaScript tasks block the main thread, the browser becomes unresponsive, leading to a jank and a frustrating user experience.   
• Resource-Intensive Assets: Large images, videos, iframes and other media files can significantly impact page load times and overall performance. If these assets are not optimised or loaded efficiently they can contribute to junk and make the page feel sluggish. 
• Inefficient Layout Calculations: When the browser needs to recalculate the layout of elements on the page (e.g. after resizing the window or adding new content), it can trigger a costly and expensive (in terms or computing resources) layout thrashing process. This can lead to jank and make the interface feel unresponsive.

The Impact of JANK

The consequences of JANK extend beyond mere aesthetic discomfort – it can:

• Diminish User Engagement: Janky animations and unresponsive interfaces can frustrate users and distract them from their tasks. This can lead to decreased engagement, higher bounce rates and ultimately a less effective application.   
• Damage Brand Perception: A poorly performing website can create a negative impression of a brand. Users may perceive the company as unprofessional, have a low attention to details, incompetent or simply outdated.
• Reduce Accessibility: JANK can significantly impact users with disabilities such as those with cognitive impairments or motor difficulties. Stuttering animations and unresponsive interfaces can be particularly challenging for these users to navigate and interact with.
• Negatively Impact SEO: Search engines prioritise user experience in their ranking algorithms. A slow and janky website is likely to have a lower search engine ranking making it harder for users to find – quite rightly so!

Mitigating JANK

Fortunately there are several strategies to combat JANK and create smooth, responsive and enjoyable to use web applications:

Optimise JavaScript

• Minimise JavaScript: Reduce the amount of JavaScript code on the page by removing unnecessary features, using libraries sparingly and minifying and compressing JavaScript files.
• Asynchronous JavaScript: Utilise techniques like async and defer attributes to load JavaScript files in the background preventing them from blocking page rendering.
• Split Scripts to Essential & Non-Essential parts: Splitting scripts in critical and inessential allows web developers to load essential scripts as quickly as possible and defer and non-essential scripts until after the main thread has completed.
• Web Workers: Offload computationally expensive JavaScript tasks to web workers allowing the main thread to remain responsive.
• Profiling & Optimisation: Use browser developer tools to profile JavaScript code and identify performance bottlenecks. Optimise code accordingly by reducing the number of DOM manipulations avoiding unnecessary calculations and using efficient algorithms.

Improve Rendering Performance

• Prioritise Critical Rendering Path: Identify the critical rendering path – the sequence of steps the browser must take to render the initial content visible to the user. Optimise this path by minimising the number of round trips to the server and efficiently loading and parsing resources.
• Use CSS Animations & Transitions: Whenever possible use CSS animations and transitions instead of JavaScript-based animations. They are often more performant since they trigger usage of browser GPUs for a higher frame rate animation that draws less compute resources so easier for the browser to deal with.
• Leverage CSS Optimisations: Utilise CSS optimisation techniques such as will-change to inform the browser of impending changes allowing it to optimise rendering accordingly.

Improve Rendering Performance

• Prioritise Critical Rendering Path: Identify the critical rendering path, which is the sequence of steps the browser must take to render the initial content visible to the user. Optimise this path by minimising the number of round trips to the server and efficiently loading and parsing resources.   
• Use CSS Animations and Transitions: Whenever possible, use CSS animations and transitions instead of JavaScript-based animations, as they are often more performant and easier for the browser to handle.
• Leverage the Power of CSS: Utilise CSS techniques such as will-change to inform the browser of impending changes, allowing it to optimise rendering accordingly.

Optimise Images & Media

• Image Optimisation: Compress images using tools like ImageOptim or TinyPNG to reduce their file size – these tools remove unnessecary meta and image data to reduce image file sizes without sacrificing quality.
• Lazy Loading: Load images only when they are about to become visible in the viewport. This can significantly improve page load times and user experience.
• Use Efficient Video Formats: Choose efficient video formats like WebM or H.264 and consider using adaptive bitrate streaming to deliver the appropriate video quality for the user’s connection speed.

Manage Layout Thrashing

• Minimise Layout Changes: Avoid unnecessary layout shifts by using CSS techniques like position: fixed for elements that don’t affect the layout of other elements.
• Virtualise Lists: For long lists, only render the visible portion of the list and dynamically render additional items as the user scrolls.   

Utilise Browser Caching

• Resource Caching: Leverage browser caching to store static assets like images, CSS and JavaScript files locally reducing the need to repeatedly download them.

Monitor & Measure Performance

• Use Performance Monitoring Tools: Utilise tools like the Chrome DevTools Performance panel and third-party services like Google PageSpeed Insights and Lighthouse to measure and analyse website performance.
• Regularly Test & Iterate: Continuously monitor website performance and make adjustments based on user feedback and performance data.

Beyond Technical Solutions

While technical optimisations are crucial, addressing JANK also requires a shift in mindset:

• Prioritise User Experience: Make user experience a core priority throughout the entire development process.
• Embrace a Performance-First Approach: Consider performance implications at every stage of the development cycle from design and prototyping to implementation and testing.
• Continuous Improvement: Regularly review and refine website performance based on user feedback and performance data.

Conclusion

In conclusion, JANK is a critical experience factor in web development that can significantly impact a user perception or an application, website and brand. By understanding its causes and implementing a multifaceted approach to mitigation, developers can create smooth, responsive and enjoyable web applications. This involves optimising JavaScript, improving rendering performance, optimising images and media, managing layout shifting, utilising browser caching and consistently monitoring and measuring performance. Ultimately, a commitment to user experience and a performance-first mindset is essential for delivering exceptional web applications that are free from JANK.

JANK FAQs

What are the most common causes of JANK in web development?

Some of the most common causes of JANK include:

• Poorly optimised JavaScript: Unoptimised or inefficient JavaScript code can significantly strain a browser’s rendering engine (particularly on lower capacity devices like handheld devices) leading to dropped frames and laggy animations.
• Slow rendering: Bottlenecks in the browser’s rendering pipeline, such as slow parsing, style calculation, or painting, can result in noticeable delays and jankiness.
• Main thread blocking: Long-running JavaScript tasks that block the main thread can make the browser unresponsive leading to jank and a frustrating user experience.
• Resource-intensive assets: Large images, videos and other media files can significantly impact page load times and overall performance, contributing to jank if not optimised or loaded efficiently.
• Inefficient layout calculations: Frequent layout recalculations, triggered by changes in window size or large quantities of dynamic content can lead to costly layout shifting and jank.

How can I measure & identify JANK in my web application?

You can measure and identify JANK using various tools and techniques:

• Browser developer tools: The Performance panel in Chrome DevTools provides detailed insights into page load times, frame rates and potential performance bottlenecks.
• Third-party performance monitoring tools: Services like Google PageSpeed Insights and Lighthouse offer comprehensive performance audits and provide actionable recommendations for improvement.
• User testing: Observe how real users interact with your website and identify any areas of jank or sluggishness.

What are some best practices for preventing JANK in the design & development process?

• Prioritise user experience: Make user experience a core priority throughout the entire development process.
• Embrace a performance-first approach: Consider performance implications at every stage of the development cycle from design and prototyping to implementation and testing.
• Continuously monitor & iterate: Regularly review and refine website performance based on user feedback and performance data.
• Use performance budgets: Set specific performance targets for your website and track progress towards those goals.
• Invest in developer education: Ensure that your development team is well-versed in performance best practices and has the tools and resources they need to optimise their code.