WebPageTest is a handy tool for checking how well a website performs. It can be tricky if you're trying to test a Shopify preview site and need a password to access it. But the good news is that WebPageTest has a feature that lets you write a script to get around this problem.
Here, we will set up your development store so you can use Webpagetest to check the performance in a few easy steps. Let's get started!
1. We will start by navigating to Webpagetest.org. Add your storefront URL(squarelogic.myshopify.com) to the box above "Simple Configuration." Then, we will add the needed information to run the advanced test "Advanced Configuration." Change the conditions of the test to what you like; here, I have set them to Google Pixel 2 XL on a 4G network with the number of tests to run 3.
2. Log into your development store(squarelogic.myshopify.com), right-click on the page, and select inspect to open dev tools(I'm using Chrome) in your browser.
3. Select the right arrow at the top of the page in dev tools and then the application tab.
4. On the left-hand side, click the "Cookies" option and choose the store. Expand the Name section if necessary, and select (storefront_digest). At the bottom, you will see a section for "Cookie Value." Now copy the value(do not share this cookie with anyone, as they will have access to your development store).
5. Select the Script tab option and add this code to the box below the Script tab: setCookie https://squarelogic.myshopify.com/ storefront_digest=" add cookie value here" navigate https://squarelogic.myshopify.com/. If you are getting an error, please add "navigate https://squarelogic.myshopify.com/" on a separate line and do not have any extra spaces.
Here, you are setting the cookie for your storefront and telling Webpagetest to test this page only.
6. Select the "Start Test" button to run the current configuration.
Something extra: When you want to test a different page, change the "navigate" option in the Script Tab to the page you want to test and update the storefront URL. Example: https://squarelogic.myshopify.com/collections
