Weblogic Authors: Yeshim Deniz, Elizabeth White, Michael Meiner, Michael Bushong, Avi Rosenthal

Related Topics: Agile Computing, Machine Learning

Agile Computing: Article

Top Ten Client-Side Performance Problems in Web 2.0

Top problems seen when working with our dynaTrace AJAX Edition users

Inspired by the Top 10 Performance Problems post which focuses on Server-Side performance problems taken from companies such as Zappos, Thomson, Monster and Novell I came up with the Top 10 Client-Side performance problems in Web 2.0 applications I’ve seen when working with our dynaTrace AJAX Edition users.

Symptom: JavaScript blocking resource downloads and slowing page load time
JavaScript opened the door for Web 2.0 applications. Since JavaScript is used on almost every web site traditional methods to analyze web site performance don’t always give you all the answers for a slow running page. Looking at a network waterfall diagram is the typical way to start analyzing a page and all its requests. Most browser performance tools support a network waterfall diagram. It shows which resources got downloaded and how much time the browser had to wait for all these resources to be downloaded.

In Web 2.0 applications it is no longer just the network downloads that contribute to the page load time. We start seeing blank spots between downloads where the browser is busy with other stuff. These blanks are usually explained with JavaScript execution where the browser stops all network activity:

Network Waterfall Diagram with blank spots that can be explained with JavaScript execution

Network Waterfall Diagram with blank spots that can be explained with JavaScript execution

Tools such as dynaTrace AJAX Edition or Google Speed Tracer allow analyzing these blank spots that block further network downloads as they analyze JavaScript execution, DOM access and Rendering activity in the browser while loading a page:

dynaTrace Timeline view shows what happens in these blind network spots

dynaTrace Timeline view shows what happens in these blind network spots

Long running JavaScript executed when JavaScript files are loaded cause the browser to suspend download of remaining network resources and therefore slows down the overall page load time.

Further Reading: Best Practices on Blocking and long running script tags

Top 10 Problems that explain these symptoms

The following is a list problems that explain most of these symptoms of long running and blocking JavaScript.

#1: Slow CSS Selectors on Internet Explorer
The #1 performance problem causing slow running or blocking JavaScript are slow running CSS Selectors in Internet Explorer. Web developers make use of lookup methods via CSS Selectors provided by JavaScript frameworks such as jQuery or Prototype. A common way to lookup elements is by using the CSS class name.

var element = $(“.shoppingcart”)

Internet Explorer 6 and 7 does not provide a native implementation for this lookup. jQuery/Prototype therefore needs to iterate through the whole DOM tree to perform the lookup purely through JavaScript. This iteration takes much longer than a native implementation provided in other browsers. The iteration is also heavily impacted by the DOM Size. The following image shows CSS lookups executed on a single page with the Total Execution Time (in ms) of these individual lookups on Internet Explorer. Many calls like this can make up several seconds on an individual page

dynaTrace AJAX analysis and highlights slow CSS Selectors

dynaTrace AJAX analysis and highlights slow CSS Selectors

Internet Explorer 8 provides better support for CSS Lookups. In order to take advantage of this it is important to upgrade to the latest versions of your JavaScript framework, e.g: jQuery/Prototype. Many websites are still stuck with older versions that do not leverage these new features making these pages also slow in the latest version of Internet Explorer.

Further Reading: Best Practices on Slow CSS Selectors with jQuery/Prototype

#2: Multiple CSS Lookups for same object
Individual CSS Lookups can be expensive. Executing the same lookup multiple times on the same page adds more execution time than necessary. Instead of executing the same lookup multiple times it is recommended to store the result of a lookup in a variable and reuse it on that same page. The following image shows the number of CSS Lookups for individual CSS Selectors on a single page. Some of them are called up to 10 times

dynaTrace analysis how often a CSS Selector got executed on a single page

dynaTrace analysis of how often a CSS Selector was executed on a single page

The 8 invocations to .ztBucket take a total of 660ms. Calling it only once and reusing the lookup result can reduce this total time to ~80ms

#3: Too many XHR Calls
JavaScript and XmlHttpRequests are the basis for what in general is called AJAX. Frameworks like jQuery make it very easy to make AJAX calls in order to retrieve additional content from the server. An example would be the implementation of a paging mechanism. Instead of downloading all pages at once only the first page is downloaded. When the user navigates to the next page we request the next page via an AJAX call and refresh the DOM. This avoids a full roundtrip and avoids the browser reloading the whole page.

A mistake that is often made is that too much information is fetched dynamically with too many calls. One example is a product page with 10 products. The developer may decide to use AJAX to load detailed product information for every product individually. This means 10 XHR calls for every 10 products that are displayed. This will of course work but it means that you have 10 roundtrips to the server that lets the user wait for the final result. The server needs to handle 10 additional requests that puts additional pressure on the server infrastructure.

Instead of making 10 individual requests it is recommended to combine these calls into a single batch call requesting the product details for all 10 products on the page.

Further Reading: AJAX Best Practices to reduce and aggregate XHR Calls, Best Practices on too many XHR Calls

#4: Expensive DOM Manipulations
Manipulating the DOM is necessary in highly interactive web sites. Dynamically loaded content needs to be added to the site or user preference changes need to be applied in order to change the look and feel of the website.

There are multiple ways to add new DOM elements – each with a different performance impact depending on the browser and the number of elements that are added. It is important to analyze different approaches (e.g: adding elements as HTML or creating individual DOM elements) and apply the approach that works best in each use case.

#5: Too many JavaScript files
The more JavaScript files there are on the page – the more often the browser needs to switch context with the JavaScript engine when loading these files. It is not uncommon to see web sites with 40 or more individual JavaScript files. Besides having additional context switches with the JavaScript engine the additional network roundtrips to download these JavaScript files have a significant impact on overall page load time.

A solution to this problem is merging individual JavaScript files into fewer. This saves on roundtrips and context switches for the JavaScript engine.

#6: Large DOM
The size of the DOM plays an important role in page performance. The larger the DOM:

  • the more memory is required by the browser
  • the longer manipulations take as style changes on top nodes need to be applied to more child nodes
  • especially on Internet Explorer larger DOMs have a disadvantage when performing certain CSS Lookups, e.g: by class name
  • any custom JavaScript that iterates through the DOM will become slower

Further Reading: Optimizing Data Intensive Webpages by Example

#7: Excessive Event Handler Bindings
Frameworks like jQuery, Prototype or YUI make it easy to bind event handlers to certain types of DOM elements, e.g.: all Hyperlinks. Binding event handlers to DOM elements impacts performance in 3 ways:

  1. the binding itself takes time as objects need to be looked up and are either registered to a central event manager or DOM elements are modified by assigning the handler method to it
  2. whenever an event is triggered the event manager needs to lookup the elements that have registered for that event and then call the correct event handlers (only true when using event managers)
  3. event handlers need to be unbound when moving to a different page. This has to be done in order to avoid any DOM-related memory leaks

The following image shows the internals of an event manager that needs to lookup all elements to identify which element to handle the actual event

Event Manager that needs to perform expensive CSS Lookups to resolve objects

Event Manager that needs to perform expensive CSS Lookups to resolve objects

#8: Slow executing external services
Many web pages embed external content (Ad Banners, Facebook Connect, …) or call external services (End User Monitoring, Review Information, …). This content is usually included by including a JavaScript file from this 3rd party provider. Very often these JavaScript files show common performance problems such as expensive CSS Lookups or DOM Manipulations. It is important to analyze 3rd party content and talk with 3rd party content providers to fix problems in their code in case it impacts web site performance. Often an upgrade to a newer version solves the problem. The following screenshot shows JavaScript execution that collects information for end-user monitoring purposes. It adds several hundred ms on each visited page and therefore impacts end-user performance:

Long running JavaScript code from a 3rd party library

Long running JavaScript code from a 3rd party library

#9: Excessive Visual Effects
Many JavaScript libraries provide nice visual effects, e.g: dynamic popup menus, accordion effects, etc. Where most of these frameworks do a good job on sample web sites, some of them do not perform well on real life pages with large DOMs. It is important to analyze the impact of visual effects on the browser’s CPU, the rendering engine and the overall web site performance

Further Reading: Performance Analysis of dynamic JavaScript menus

#10: Too fine granular logging and monitoring
Custom or third-party logging and monitoring frameworks allow the collection of very detailed information about user interaction. A common problem is that too much information is collected which results in additional overhead in the JavaScript engine as well as on the network as the collected data needs to be sent to a monitoring or logging service. Logging every mouse move for instance might seem like a good idea but can easily end up in blocking browsers (too much JavaScript execution) or congested services (too many logging calls to the monitoring/logging service)

Further Readings: How to Automate Google Analytics Analysis, Combining Analytics with Performance Management Data

Yes – there is more to Web 2.0 Performance Analysis
This list is by far not complete. For more information check out the blogs we wrote on JavaScript/AJAX, Best Practices from Google and Yahoo. Read what people like Steve Souders or John Resig have to say about web performance. There is also a great collection of web performance related blogs on Planet Performance.

Let me know what your top problems are and whether you would add or remove anything from my list.

Related reading:

  1. IE Compatibility View: How to identify performance problems between IE versions A client of ours recently contacted me with the question:...
  2. 6 Steps to identify the major web site performance problems on pages like masters.com Remark: The analysis in this blog was done on masters.com...
  3. Hands-On Guide: Verifying FIFA World Cup Web Site against Performance Best Practices Whether you call it Football, Futbol, Fussball, Futebol, Calcio or...
  4. How better Caching helps Frankfurt’s Airport Website to handle additional load caused by the Volcano Along with so many others I am stranded in Europe...
  5. Best Practices on JavaScript and AJAX Performance JavaScript can save your day or it can cause you...

More Stories By Andreas Grabner

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

@ThingsExpo Stories
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...
The IoT Will Grow: In what might be the most obvious prediction of the decade, the IoT will continue to expand next year, with more and more devices coming online every single day. What isn’t so obvious about this prediction: where that growth will occur. The retail, healthcare, and industrial/supply chain industries will likely see the greatest growth. Forrester Research has predicted the IoT will become “the backbone” of customer value as it continues to grow. It is no surprise that retail is ...
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of bus...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DXWorldEXPO LLC announced today that "Miami Blockchain Event by FinTechEXPO" has announced that its Call for Papers is now open. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Financial enterprises in New York City, London, Singapore, and other world financial capitals are embracing a new generation of smart, automated FinTech that eliminates many cumbersome, slow, and expe...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER give you detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Miami Blockchain Event by FinTechEXPO also offers s...
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...