You are on page 1of 24

Arcteryx

Category and Product Pages

NOVEMBER 25

1
Introduction
This audit focuses on the Category and Product pages, using Chrome Dev Tools and other tools to
simulate DSL and 3G connection speeds. Solving web performance issues using these speeds will go
a long way in resolving the problems users experience.

This report focuses on Core Web Vitals to debug issues on the two-page types.

The two-page types are failing their Core Web Vitals Assessment. The category pages stand a chance
of failing all three Core web vitals if the issues with the main thread are not resolved. Changes will be
made to the Core Web Vitals in terms of “smoothness and responsiveness” in the coming months.
A focus should be given to Total Blocking Time & First Input Delay on the category page.

The graph below shows the trend of CWV using the origin (mobile).

2
Category - (Mobile G4 – 3G Connection)

Largest Contentful Paint


For the Largest Contentful Paint to be considered good, it should be recorded at
less than 2.5 seconds. On 3G, it is currently recorded at 47.60 seconds.

The LCP asset is number 64 in the waterfall. Ensuring this is moved up could
see benefits to the LCP.

A way to get this done would be to preload the LCP asset. (Investigate the
negative impacts of preload to FCP first)

3
On the page with just socks, the images were as large as 500kb

Having a third party inject these heavy assets could play a huge role in the poor
performance of the page. Compressing this further could help.

The page has an excessive DOM size of 11663 elements. Best practice
recommends between 1500 – 2000 elements.

Total Blocking Time >300ms; 100ms =< 300ms; <100ms

TBT on this page was not recorded as the test timed out before gathering the
TBT, note that the test ended after one minute. The Main thread is constantly
busy, and users could potentially get frustrated if they cannot interact with the
page.

https://cdn.cookielaw.org/scripttemplates/6.19.0/otBannerSdk.js This file seems to be a huge blocker.

4
Cumulative Layout Shift >0.25; 0.10 =< 0.25; <0.10

Pagination could help reduce the shift. Focus on allocating space for injected
content into the page could also help. (icons + products) are causing the shift,
loading the footer before the main content used to be recommended by
developers, but this is causing a lot of layout shift.

5
Category - (Desktop DSL)

Largest Contentful Paint


For the Largest Contentful Paint to be considered good, it should be recorded at
less than 2.5 seconds. On DSL, it is currently recorded at 4.66 seconds.

The LCP asset is number 61 in the waterfall. Ensuring this is moved up could see
benefits to the LCP.

A way to get this done would be to preload the LCP asset. (Investigate the
negative impacts of preload to FCP first)
The page has an excessive DOM size of 11867 elements. Best practice
recommends between 1500 – 2000 elements.

Total Blocking Time >300ms; 100ms =< 300ms; <100ms

6
TBT on this page was recorded at 30.10 secs on DSL. The Main thread is
constantly busy. Users could potentially get frustrated if they cannot interact
with the page.

A possible cause is the fact that there are many products on this page. Reducing
the number of products on this page could see benefits.

The size of third-party assets on this page is enormous.

This page has both Google and Adobe Tag Manager running. With Adobe Tag
Manager adding 5.52 seconds to the Main Thread, much of that is closer to the
end of the execution timeline. However, Adobe Tag Manager blocks the main
thread in various places across the timeline.

7
Cumulative Layout Shift >0.25; 0.10 =< 0.25; <0.10

Pagination could help reduce the shift. Focus on allocating space for injected
content into the page could also help. (icons + products) are causing the shift.

8
Product - (Mobile G4 – 3G Connection)

Largest Contentful Paint


For the Largest Contentful Paint to be considered good, it should be recorded at
less than 2.5 seconds. On 3G, it is currently recorded at 19.49 seconds.

The LCP asset is number 28 in the waterfall. Ensuring this is moved up could
see benefits to the LCP.

A way to get this done would be to preload the LCP asset. (Investigate the
negative impacts of preload to FCP first)

9
Total Blocking Time >300ms; 100ms =< 300ms; <100ms

TBT on this page was not recorded as the test timed out before gathering the
TBT, note that the test ended after one minute. The Main thread is constantly
busy, and users could potentially get frustrated if they cannot interact with the
page.

A combination of Bazaarvoice and Adobe Tag Manager has the main thread
blocked for most of the page load.

Cumulative Layout Shift >0.25; 0.10 =< 0.25; <0.10

10
Product - (Desktop DSL)

Largest Contentful Paint


For the Largest Contentful Paint to be considered good, it should be recorded at
less than 2.5 seconds. On DSL, it is currently recorded at 5.36 seconds.

The LCP asset is number 28 in the waterfall. Ensuring this is moved up could
see benefits to the LCP.

A way to get this done would be to preload the LCP asset. (Investigate the
negative impacts of preload to FCP first)

11
Total Blocking Time >300ms; 100ms =< 300ms; <100ms

TBT on this page was recorded at 8.60 secs on DSL. The Main thread is
constantly busy. Users could potentially get frustrated if they cannot interact
with the page.

A combination of Bazaarvoice and Adobe Tag Manager has the main thread
blocked for the majority of the page load.

This page contains a lot of Tags and Scripts. Investigate what can be turned off.

12
Cumulative Layout Shift >0.25; 0.10 =< 0.25; <0.10

The page starts like this

Page ends like this.

Allocating the height attribute for the different components could help reduce
the layout shift.

13
Home - (Mobile + Desktop)

mobile above, desktop below

Largest Contentful Paint


For the Largest Contentful Paint to be considered good, it should be recorded at
less than 2.5 seconds. Currently, it is recorded at 41.99 seconds on 3G and 9.36
seconds on DSL.

14
Possible Solutions
The LCP asset is low in the waterfall. Ensuring this is moved up could see
benefits to the LCP.

Real users are recording better LCP timings compared to the synthetic tests.
Note: The focus should be on real users. Reducing LCP by 700ms would get the
home page to pass the Core Web Vitals assessment.

15
Here is a Webpagetest link:
https://www.webpagetest.org/result/211203_AiDc9P_3641b4f02df370c95f709e5
6bb631f33/1/details/#waterfall_view_step1
The link above shows several 302s, synthetic tests are picking up on this. A
good chunk of the redirects occurs before the LCP asset is called.

The above image (Mobile)

Addressing this could potentially reduce the impact on LCP.


Preloading the critical assets could move the LCP up the waterfall

Fonts seem to be loaded multiple times, this should not be the case.

16
Other areas of focus: Adobe Analytics seems to be causing an error in Console,
erroring Adobe Analytics is optimized could save anywhere from a few
hundred ms to a few seconds.

To improve FCP by a few milliseconds, a closer look at the <head> could help
● Move common.css and style.css above
https://ui-components.arcteryx.com/us/en/outdoorHeaderFooter.js OR
● Split https://ui-components.arcteryx.com/us/en/outdoorHeaderFooter.js into two could see
its benefits.

17
Other Tests
A comparison between https://arcteryx.com and https://www.arcteryx.com, found that
https://arcteryx.com provides a better experience on desktop but not on mobile.

Here is a link to the chart:


https://treo.sh/sitespeed/www.arcteryx.com/vs/arcteryx.com?countryCode=
us

Mobile Desktop

18
Home Page Test Results
See the bottom of this page to learn more about observed and simulated metrics. Each simulated metrics is
the average of an optimistic and a pessimistic estimate.

Observed Simulated Optimistic Pessimistic


Estimate Estimate

FCP 1.54 s 3.73 s 3.73 s 3.73 s

LCP 3.26 s 13.59 s 13.20 s 13.97 s

First Contentful Paint


This table shows how different network settings impact the FCP metric.

⇣ Latency 0.1 Mbps 0.5 Mbps1 Mbps 1.6 Mbps 2 Mbps 4 Mbps 6 Mbps 8 Mbps 10 Mbps 50 Mbps

500 ms 35.22 s 11.60 s 9.03 s 8.01 s 8.01 s 8.01 s 8.01 s 8.01 s 8.01 s 8.01 s

400 ms 39.58 s 9.81 s 7.75 s 6.92 s 6.50 s 6.50 s 6.50 s 6.50 s 6.50 s 6.50 s

300 ms 40.11 s 9.08 s 6.57 s 5.63 s 5.32 s 5.00 s 5.00 s 5.00 s 5.00 s 5.00 s

200 ms 52.69 s 7.99 s 5.21 s 4.57 s 4.14 s 3.50 s 3.50 s 3.50 s 3.50 s 3.50 s

150 ms 40.38 s 7.49 s 4.71 s 3.90 s 3.57 s 2.92 s 2.75 s 2.75 s 2.75 s 2.75 s

125 ms 34.23 s 7.22 s 4.32 s 3.49 s 3.07 s 2.52 s 2.38 s 2.38 s 2.38 s 2.38 s

100 ms 28.31 s 7.79 s 4.38 s 3.25 s 2.91 s 2.23 s 2.12 s 2.00 s 2.00 s 2.00 s

50 ms 15.97 s 8.23 s 3.92 s 2.65 s 2.27 s 1.64 s 1.45 s 1.32 s 1.32 s 1.25 s

19
25 ms 9.75 s 9.63 s 3.91 s 2.42 s 2.03 s 1.34 s 1.11 s 1.03 s 0.99 s 0.88 s

10 ms 6.01 s 5.99 s 3.62 s 2.60 s 2.09 s 1.17 s 0.94 s 0.84 s 0.80 s 0.66 s

The white box highlights the default mobile network settings used by Lighthouse

Largest Contentful Paint


This table shows how different network settings impact the LCP metric.

Bandwidth

500 ms 138.38 s 37.77 s 25.96 s 20.57 s 19.63 s 15.81 s 14.67 s 14.16 s 13.64 s 13.87 s

400 ms 147.44 s 35.43 s 23.03 s 18.90 s 16.83 s 14.14 s 13.11 s 11.53 s 12.07 s 12.07 s

300 ms 161.67 s 36.02 s 20.98 s 16.59 s 15.03 s 11.77 s 10.28 s 10.27 s 10.27 s 10.27 s

200 ms 215.89 s 36.58 s 19.09 s 14.49 s 12.73 s 10.25 s 9.05 s 8.84 s 8.73 s 8.63 s

150 ms 165.53 s 32.50 s 18.70 s 13.59 s 11.71 s 8.77 s 8.25 s 8.09 s 8.05 s 7.97 s

125 ms 140.28 s 30.05 s 17.80 s 13.24 s 11.42 s 8.86 s 7.96 s 7.80 s 7.80 s 7.67 s

100 ms 115.40 s 31.41 s 19.48 s 13.08 s 11.16 s 8.31 s 7.65 s 7.54 s 7.48 s 7.37 s

50 ms 64.99 s 33.15 s 17.40 s 12.91 s 10.59 s 7.59 s 7.24 s 7.08 s 7.05 s 6.89 s

25 ms 39.37 s 38.78 s 19.91 s 13.27 s 10.72 s 7.46 s 7.00 s 6.92 s 6.88 s 6.70 s

10 ms 24.07 s 23.73 s 17.61 s 13.44 s 11.40 s 7.37 s 6.89 s 6.85 s 6.78 s 6.62 s

The white box highlights the default mobile network settings used by Lighthouse

20
Category Page Test results
See the bottom of this page to learn more about observed and simulated metrics. Each simulated
metrics is the average of an optimistic and a pessimistic estimate.

Observed Simulated Optimistic Pessimistic


Estimate Estimate
FCP 1.72 s 5.63 s 5.63 s 5.63 s
LCP 3.00 s 12.74 s 12.74 s 12.74 s

First Contentful Paint


This table shows how different network settings impact the FCP metric.

Bandwidth

⇣ Latency 0.1 Mbps 0.5 Mbps 1 Mbps 1.6 Mbps 2 Mbps 4 Mbps 6 Mbps 8 Mbps 10 Mbps 50 Mbps

500 ms 62.60 s 16.67 s 12.08 s 10.55 s 10.04 s 9.02 s 8.51 s 8.51 s 8.51 s 8.51 s

400 ms 62.71 s 15.52 s 10.60 s 8.96 s 8.55 s 7.32 s 6.91 s 6.91 s 6.91 s 6.91 s

300 ms 66.76 s 14.61 s 9.34 s 7.48 s 6.86 s 6.24 s 5.93 s 5.62 s 5.31 s 5.17 s

200 ms 88.47 s 12.53 s 8.12 s 6.44 s 5.81 s 4.55 s 4.34 s 4.13 s 3.92 s 3.71 s

150 ms 67.72 s 12.51 s 7.55 s 5.63 s 4.99 s 3.71 s 3.55 s 3.39 s 3.23 s 3.06 s

125 ms 57.35 s 15.62 s 7.77 s 5.34 s 4.80 s 3.59 s 3.18 s 3.05 s 3.05 s 2.74 s

100 ms 47.41 s 14.00 s 6.84 s 4.97 s 4.42 s 3.21 s 2.77 s 2.66 s 2.53 s 2.42 s

50 ms 26.54 s 13.35 s 7.32 s 4.61 s 3.83 s 2.57 s 2.21 s 1.95 s 1.89 s 1.76 s

25 ms 16.04 s 15.58 s 7.38 s 4.93 s 3.36 s 2.24 s 1.89 s 1.69 s 1.66 s 1.44 s

10 ms 9.74 s 9.71 s 9.35 s 5.52 s 4.29 s 2.21 s 1.73 s 1.58 s 1.48 s 1.34 s

The white box highlights the default mobile network settings used by Lighthouse

21
Largest Contentful Paint
This table shows how different network settings impact the LCP metric.

Bandwidth

⇣ Latency 0.1 Mbps 0.5 Mbps 1 Mbps 1.6 Mbps 2 Mbps 4 Mbps 6 Mbps 8 Mbps 10 Mbps 50 Mbps

500 ms 137.66 s 36.88 s 24.90 s 20.41 s 19.39 s 15.31 s 14.70 s 13.78 s 12.80 s 12.75 s

400 ms 145.44 s 35.27 s 22.15 s 18.05 s 16.71 s 13.84 s 12.66 s 12.72 s 10.97 s 10.95 s

300 ms 159.25 s 34.52 s 20.26 s 15.92 s 14.37 s 11.92 s 9.46 s 9.53 s 9.15 s 9.15 s

200 ms 211.78 s 35.27 s 18.37 s 13.86 s 12.04 s 9.52 s 8.05 s 7.56 s 7.56 s 7.35 s

150 ms 162.51 s 31.63 s 17.86 s 12.74 s 10.98 s 8.26 s 7.12 s 6.77 s 6.61 s 6.45 s

125 ms 137.69 s 31.70 s 18.03 s 12.30 s 10.92 s 8.02 s 6.61 s 6.41 s 6.27 s 6.00 s

100 ms 113.32 s 30.92 s 18.23 s 11.75 s 10.32 s 7.37 s 6.16 s 6.00 s 5.88 s 5.59 s

50 ms 63.13 s 31.85 s 16.77 s 11.24 s 9.36 s 6.37 s 5.47 s 5.36 s 5.14 s 4.96 s

25 ms 37.87 s 35.06 s 17.66 s 12.12 s 9.37 s 5.93 s 5.18 s 5.00 s 4.91 s 4.74 s

10 ms 22.75 s 22.53 s 20.18 s 13.01 s 10.68 s 6.21 s 4.98 s 4.82 s 4.76 s 4.62 s

The white box highlights the default mobile network settings used by Lighthouse

22
Product Page Test results
See the bottom of this page to learn more about observed and simulated metrics. Each
simulated metrics is the average of an optimistic and a pessimistic estimate.

Observed Simulated Optimistic Pessimistic


Estimate Estimate
FCP 1.98 s 4.71 s 4.71 s 4.71 s
LCP 4.23 s 15.41 s 15.25 s 15.58 s

First Contentful Paint


This table shows how different network settings impact the FCP metric.

Bandwidth

⇣ Latency 0.1 Mbps 0.5 Mbps 1 Mbps 1.6 Mbps 2 Mbps 4 Mbps 6 Mbps 8 Mbps 10 Mbps 50 Mbps

500 ms 45.41 s 13.48 s 10.39 s 9.36 s 9.36 s 8.24 s 8.24 s 8.24 s 8.24 s 8.24 s

400 ms 45.32 s 12.13 s 8.81 s 7.98 s 7.56 s 6.73 s 6.64 s 6.64 s 6.64 s 6.64 s

300 ms 47.11 s 11.11 s 7.65 s 6.71 s 6.08 s 5.45 s 5.04 s 5.04 s 5.04 s 5.04 s

200 ms 62.78 s 9.55 s 6.33 s 5.25 s 4.82 s 3.96 s 3.87 s 3.66 s 3.66 s 3.66 s

150 ms 48.23 s 9.33 s 6.03 s 4.71 s 4.21 s 3.33 s 3.17 s 3.17 s 3.01 s 3.01 s

125 ms 40.96 10.59 s 5.55 s 4.29 s 3.87 s 3.09 s 2.96 s 2.82 s 2.82 s 2.69 s
s

100 ms 34.01 s 10.09 s 5.03 s 3.88 s 3.54 s 2.80 s 2.58 s 2.47 s 2.47 s 2.36 s

50 ms 19.44 s 9.86 s 5.80 s 3.47 s 3.01 s 2.25 s 2.07 s 1.95 s 1.89 s 1.71 s

25 ms 12.04 s 11.89 s 5.98 s 3.80 s 2.65 s 1.91 s 1.77 s 1.67 s 1.60 s 1.45 s

10 ms 7.60 s 7.58 s 5.67 s 3.94 s 3.24 s 1.93 s 1.61 s 1.53 s 1.45 s 1.36 s

The white box highlights the default mobile network settings used by Lighthouse

Largest Contentful Paint

23
This table shows how different network settings impact the LCP metric.

Bandwidth

⇣ Latency 0.1 Mbps 0.5 Mbps 1 Mbps 1.6 Mbps 2 Mbps 4 Mbps 6 Mbps 8 Mbps 10 Mbps 50 Mbps

500 ms 157.18 s 42.39 s 29.00 24.30 s 22.54 s 19.20 s 18.35 s 18.41 s 17.15 s 15.48 s
s

400 ms 167.26 s 40.36 26.46 s 21.07 s 20.29 18.18 s 16.11 s 15.21 s 15.05 s 13.68 s
s s

300 ms 183.83 40.13 s 23.62 s 18.73 s 17.32 s 14.66 s 14.00 s 12.97 s 12.83 s 11.88 s
s

200 ms 247.57 41.22 s 21.36 s 16.20 s 15.34 s 12.77 s 11.40 s 10.85 s 10.30 s 10.14 s
s

150 ms 190.27 37.28 s 21.35 s 15.41 s 14.63 s 11.50 s 10.17 s 9.54 s 9.50 s 9.42 s
s

125 ms 161.01 s 34.61 s 20.92 14.90 s 14.05 s 10.83 s 9.72 s 9.35 s 9.16 s 9.05 s
s

100 ms 132.58 34.35 s 21.88 s 14.19 s 13.24 s 10.31 s 9.13 s 8.83 s 8.80 s 8.73 s
s

50 ms 74.37 s 38.10 s 20.48 14.61 s 12.59 s 9.26 s 8.36 s 8.30 s 8.28 s 8.28 s
s

25 ms 45.11 s 44.33 s 23.37 s 16.21 s 12.90 s 8.77 s 8.14 s 8.13 s 8.13 s 8.13 s

10 ms 27.52 s 27.07 s 21.10 s 16.20 s 13.39 s 9.28 s 8.17 s 8.04 s 8.04 s 8.04 s

The white box highlights the default mobile network settings used by Lighthouse

24

You might also like