Third party apps are best described as external code added to your store that are not built by you or Shopify. Code built by yourself or Shopify is referred to as first party content.
Third party apps can be an essential part of any online store, but adding them can slow down your performance. Knowing their performance impact can help you make better decisions on which ones to use. In this post, you will learn how to use WebPageTest to measure the performance impact of third party apps.
We can use 2 different approaches for this exercise:
- Block apps – this approach shows where removing apps can make a page load faster.
- Allow apps – this approach can show how a page slows down when apps are added.
Blocking apps with WebPageTest Jump to heading
We have previously written about how to use WebPageTest and compare results. Another feature is blocking third party apps one by one during a page test. Comparing these results against a test with the apps included helps show what impact they have on performance.
From the WebPageTest home page, expanding the “Advanced Configuration” option reveals a tab labeled “Block”.
There are 2 options:
- Enter specific URL strings to block
- Enter a domain to block
What you want to block will dictate which box you use.
If you have specific files you want to block you can use the first box and type in the file name.
If you have multiple files from the same domain you would use the second box to block the domain. For example, if you have multiple Google Fonts and want to block them all.
I ran a test without blocking anything and got the following results for my first 15 objects loaded:
The green vertical line at around 1.2 seconds shows when this page started rendering.
Before this happened, many third party assets were loaded. I wanted to see what would happen to rendering if I removed them.
I added the following domains as a space-separated list to the Block Request textbox:
Result: Rendering improves
The results from blocking those third parties is shown in the waterfall below. In this example the green vertical timing lines have shifted left to 1 second. This indicates removing all of these apps would make performance better for rendering.
Another good metric to compare is the Total Blocking time (TBT), or the time the main thread was blocked due to JavaScript.
In the original test shown below cookiepro.com added 48ms of blocking JS to the page. When this object was removed, we reduced the amount of time JavaScript blocked the page from doing anything else.
The more Blocking JavaScript you have on your page the more chance it becomes unresponsive to user action. Keeping the blocking time low is always a good thing for user experience.
In this test I removed a handful of apps mainly to demonstrate the process. I paid little attention to what the apps were and what they do. Although performance improved in this example it may not always be the case.
In real world testing, your page may be more complex and removing a single app might not show any changes. If this is the case we can move to the second approach of removing all the noise and adding apps into your page one by one. We will discuss how in the next section.
Allowing apps with WebPageTest Jump to heading
Another feature of WebPageTest is Scripting. One of the commands that can help with third party testing is the blockDomainsExcept command. As the name suggests, this command blocks all content from all domains apart from those listed. This allows you to see what performance looks like for your page with no third party apps installed.
To test a Shopify theme based store with no third parties you will have to include content from cdn.shopify.com as well as your main domain. If you use our fonts then also include fonts.shopifycdn.com in your list. A sample of what this looks like is shown below:
blockDomainsExcept yoursite.com cdn.shopify.com fonts.shopifycdn.com
Navigate https://yoursite.com
Add this script to the text box in the Script tab:
Our results show a very clean page load with no third party assets and only first party content.
To check the performance of an app we can now add it back in by adding it to the trusted list of domains. To add the Cookie app back, I modified my script to include that domain. Sometimes a third party app might request content from a completely different domain. It is important to understand exactly how the app behaves and to make sure all domains are added here.
blockDomainsExcept yoursite.com cdn.shopify.com fonts.shopifycdn.com cookie-cdn.cookiepro.com
Navigate https://yoursite.com
Adding the CookiePro app back into this page you can see the loading changes. Objects 6 -15 all load later and have shifted to the right.
In this example, TBT was not impacted and remained low after adding this app.
This app is used to satisfy cookie laws in various countries and states. While you may not be able to remove the functionality, you can now more easily compare this app with others that perform the same function. If you are already using the best performing app for the function you need, there might be ways to optimize the loading by hosting on the Shopify CDN.
You can repeat this exercise by looking at each app in isolation or adding multiple apps to see how they perform together.
Summary Jump to heading
WebPageTest makes it possible to measure the impact of third party applications on our webpages using two different methods. First, we can block domains under the Block tab and then compare performance before and after. Or, we can whitelist domains using the Script tab and again compare performance before and after.
The advantages to blocking apps is the speed which you can test. However, as most pages are complex, sometimes it is hard to see any notable changes.
The advantages to adding apps back into your page is it is easier to see the real impact. However, it does take a little more time to set up.
Using either of these approaches will show the performance impact of any third party, which allows you to make better decisions on which ones to use. You can use this knowledge today by auditing all your third party apps as well as in the future when you are considering installing a new app.