Perf Panel

Overview

When activated, the Perf Panel is displayed at the bottom of each page.

It will give you a detailed view into how fast the page loaded and where the bottlenecks might be.

The Perf Score is based on total time elapsed from of the server response to the browser’s window.onload event.

It includes client-side performance because ultimately it is the user experience that matters most.

Research shows that after 1 second (1000 ms), users perceive an interface to be slow.

Ideally, each page would take less than 500 ms to completely load.

Server - Page Execution. The time it takes to execute the script, up until it sends the first byte of the response to the browser.
Network - Transfer. The time it takes to send all response bytes to the browser. This will be affected by the number of bytes and the speed of your network connection.
Browser - window.onload. The time it takes for the browser to process the entire document, including all images, CSS, JavaScript, etc. This will largely be affected by the number and size of additional network requests it has to make.
Server - Peak Memory. The highest amount of memory used at any point in the execution of the script. This is largely affected by reading data from files or a database.

To display the perf panel at the bottom of every page, set showPerfPanel: true in config/app.jcon.

Because this is a developer feature, it will only display if:

By default, THT measures calls to built-in modules, like file and database access.

You can measure the performance of your own tasks by using the Perf module.

We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil.

— Donald Knuth

Do not micro-optimize. Don’t worry about the difference between miniscule things, like $a += 1 vs. $a = $a + 1. This is a poor use of your (human) time, and often leads to code that is harder to read.

Think in human scale, not computer scale. Going from 2 nanoseconds to 1 nanosecond might be a 100% speed gain in an absolute sense, but is unnoticeable to humans. If you are benchmarking code by looping it 1 million times, the difference is probably too small to matter. Most page requests don’t run any single operation more than, say, 100 times.

Instead, find the bottlenecks. This is the “hot path” — a single block of code that takes the biggest chunk of time. The Perf Panel will show you which tasks are taking the longest. You can add new tasks to the list using the Perf module.

The most common bottleneck is a database query. The most effective solution is usually to cache the query results.

If it ain’t broke, don’t fix it. It’s tempting to constantly tweak performance, but if you’re already getting load times under 500 ms, you can probably move on to other tasks. This also depends if you are optimizing a page that is accessed often (i.e. your home page) vs not often (i.e. a settings page).

Use THT's built-in optimizations to reduce response sizes, optimize assets, and minimize the number of requests.

Assets. JavaScript and images can degrade the overall page load time, undermining any server-side optimizations you have made.

Take an honest look at whether 3rd party social and analytics widgets are worth the extra bloat. Try to remove anything that isn’t truly necessary. This is especially important now that the majority of browsing happens on mobile devices.