Profiling Code to Improve Performance of MagentoE-commerce Sites

Vice President of Magento Solutions,ZeroLag Hosting and Cloud Services

Aaron Koch

IntroductionThe relationship between web site performance, the user experience, and the bottom line.

Web site performance• The link between web site performance and the user experience is

well known.• But the impact on bottom-line results cannot be over-emphasized.• The evidence is compelling:

– Conversion rates drop approximately 7%-10% with a 1-second delay in page load time.

– For example, Amazon and Walmart increased revenue by 1% for every 100ms of improvement in page load times.

– For a web site generating $30 million in annual sales, a 1-second delay can result in $2 to $3 million of lost revenue.

How fast is fast enough?• Conventional wisdom states that sub 2-second page load times are

optimum.• But user expectations are a moving target…

– 1999: average user was willing to wait 8 seconds– 2006: 4 seconds– 2010: 3 seconds– 2015: 2 seconds– 2017-2020: ???

• According to the FCC, average broadband download speeds tripled between 2011 and 2014. Residential bandwidth continues to increase, fueling user expectations of a seamless, instantaneous online experience.

The challenge• ISPs and servers have been getting faster, but code and design

more complex. • The result has been a stalemate, with user experience the primary

casualty.– Since 2014, ZeroLag has periodically tested the performance of the IR Top 500, and we havenot seen a significant improvement vs. the average page load time of 3.67 seconds recorded in June 2014.

• But we believe that a page shouldbegin rendering in 700ms or less tomaximize the conversion rate.

The SolutionAnalyzing web site code to reveal opportunities for performance improvement.

Code profiling overview• What is it?

– Dynamic program analysis that measures the performance of code from one or more perspectives:

• Memory and CPU utilization • Computational complexity• Instruction set usage and scheduling • Frequency and duration of function calls.

– Profiling is performed by analyzing either the program source code or its binary executable.

– Profiling tools use several different techniques, including event-based, statistical, instrumentation, and simulation methods.

Code profiling overview, continued• What are some code profiling tools?

– ChromeDevTools• Web authoring and debugging tools built into Google Chrome.• Includes a Javascript Profiler• Records site/browser interaction and provides insight into CPU/memory

usage, and time spent rendering and executing code.– Xdebug

• Included with PHP• Helps identify broken or inefficient PHP code.

– Webgrind• Open source tool that displays cachegrind files generated by Xdebug.• Utilizes a web interface rather than running a separate application on your

local machine.

Using ChromeDevTools

ChromeDevTools• ChromeDevTools provides web developers deep access into the

internals of the browser and how it interacts with their web application.

• Use DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

• Real-world example: we recently assisted a development partner to discover that a third-party module’s JavaScript was modifying Magento’s AJAX handling and breaking the single-page checkout.

ChromeDevTools, continued• This is 1.49 seconds of a 60-second session. The waterfall chart visualizes

the discrete tasks performed by the browser as it assembles the page.

Frames Per Second

Network Utilization

CPU Utilization

Screenshots

Java Memory Usage

ChromeDevTools, continued• This is the same time slice but shows a summary view, indicating that

approximately 1 second was spent executing scripts and rendering the page.

ChromeDevTools, continued• ChromeDevTools also allows the examination of DOM elements. In this

example, the field label “Discount Codes” inherits properties from 9 different CSS selectors.

Using Xdebug

Xdebug• Xdebug is a PHP extension with debugging and profiling

capabilities, utilizing the DBGp debugging protocol.• Provides stack and function traces in error messages with:

– Full parameter display for user-defined functions.– Function name, filename and line indications.– Support for member functions.– Memory allocation– Protection for infinite recursions.

• Xdebug also offers:– Profiling information for PHP scripts.– Code coverage analysis– Capabilities to debug scripts interactively with a debugger front-end.

Xdebug, continued• Example: Xdebug is used to profile the category navbar on a Magento site.

Notice that one single-call function requires 26 seconds to execute.

Xdebug, continued• Drilling down reveals that an excessive number of top-level categories is

significantly impacting page rendering performance.

Xdebug, continued• _getDisabledIds calls _getId and _getItemIsActive 16,500 times.

Xdebug, continued• Here you can see the site has 3,000 categories and these functions loop

through all of them before sending data back to the browser.

Conclusion

Key takeaways• Conversion rates and revenue are directly tied to web site

performance.• Performance is driven by quality of your code and infrastructure.• Always profile your code – thousands or millions of $$ are riding

on it.• Leverage open source browser-based and server side tools to

analyze your code and optimize its performance.• And work with a hosting/cloud partner that has a deep

understanding of Magento performance, like ZeroLag.