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:
- Create test environment – create directory server by you local webserver (apache or nginx on your laptop).
- 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.
- 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:
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.
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.
- 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.
- 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.