skip to Main Content

Many developers are curious about page loading times and performance. Let’s discuss real numbers instead of theory (browsers loading optimizations change quite often).

This is the testing logic we used:

  1. Create test environment – create directory server by you local webserver (apache or nginx on your laptop).
  2. Download page with rich content you want to test (by using “wget” or view source, save source in browser). Create 3 copies of it – with Persoo snippet in header, with Persoo snippet in footer, without Persoo snippet.
  3. Open your locally hosted page in your Chrome. Make sure, that images, scripts, css are still served from internet. Open chrome console by pressing F12 and select tab “Audits”.

When you run the audit, make sure nothing else is running on your laptop. Also do not trust the numbers after first measurement – as you will see later, these numbers have standard deviation from 2-10%. So repeat the measurement several times and evaluate the numbers in Excel. (We made 5 measurements for each variant).

In our experiment, we took a category page of one of our clients. On this page, Persoo reports pageview, loading stats, displays and connects “search autocomplete widget” and displays product recommendations.

Performance audit in Chrome console looks like on the following image:

Note: “Values are estimated and may vary.” means, that the truth is cca 2-10% different.

Chrome Lighthouse audit will simulate the performance on mobile devices using 3G network … it will throttle network connection speed and also throttle CPU performance. So any problems will become more visible. These numbers are the worst case what can happen on mobile devices for average audience.

Let us look at the results – first table are absolute numbers in seconds, the second table shows relative performance with Persoo compared with no Persoo page. Note: similar numbers were measured for other AB testing tools, analytics, personalization tools (we tried some of them). Now you know how, so play with it.

The times are so high, because it was simulated on throttled network connection and CPU (to simulate slow mobile devices).

First two columns are the most important once because they refer to what the user sees on his screen (since he does not care about the content below screen fold and async scripts).

  • First contentful paint (first text without style showed to the user) with persoo snippet in header is shown 100ms later then without persoo. Why? Persoo temporarily make the page transparent until first data from Persoo arrives … so it can replace the content if necessary. In variant with Persoo snippet in footer it does not happen, because the page is rendered before Persoo snippet is run (so the user may see wrong content during the page loading).
  • First meaningful paint (including layout, graphics, css … even from footer) … Persoo does not make this times different.
  • Speed index (like first meaningful paint) but also for the content below the screen fold. On the test page, there were autocomplete search widget and recommendation boxes with sliders, so obviously adding new widgets will take some processing time.
  • Time to interactive – is correlated to first CPU idle. To understand it, we should explain how javascripts in browsers work. There is only one thread, one script queue, CPU process these scripts one after the other. Every script you load is first downloaded, and then added to the queue when the code arrives. So the following is of importance when you request the scripts:
    • In the footer: scripts with no impact on UX may be triggered in footer onDOMContentLoaded. Your CPU, which just finished DOM loading will take a rest until the script code arrives (and it is available for the user events). Note: having GA snippet here may cause that you do not measure about 30% of your mobile traffic on slow mobile connections.
    • In the header: scripts changing what user see on the screen should be triggered as soon as possible (i.e. in the header), so the JS code will be added to the javascript queue asap. Browser also evaluates the script elements in 2 waves – firstly everything in the HTML header. After that is starts parsing and processing the body.
  • Important note: you should measure one more metric, which is not in Chrome audits and that is time to show first personalization or AB test content. If you place Persoo snippet in header, Persoo can make these changes within the time to first meaningfull paint. So you won’t be able to say, if the content came with the page or was added dynamically. If you place Persoo snippet to the footer, it will wait cca speed index time to start loading Persoo, and then a few more time to realise the change in the page. So you may see the original content first and then the correct personalized content.

Note: Persoo snippet in the footer should be used only for data collection. Not for displaying content. You do not want your users to see holes in your pages and search widget to be loaded with a delay of several seconds.

Back To Top
×Close search