Talk at Smashing Conf - 7th Feb 2018 (Video - https://vimeo.com/254703766)
Explores some of the issues that 3rd-party tags introduce when we add them to our sites, some ways of measuring the impact, and challenges we still have
6. We’re including more and more of them
0
25
50
75
100
125
150
175
200
225
01-Jan-13 01-Jul-13 01-Jan-14 01-Jul-14 01-Jan-15 01-Jul-15 01-Jan-16 01-Jul-16 01-Jan-17 01-Jul-17 01-Jan-1
50th 75th 90th 95th HTTPArchive Jan ’13 to Jan ‘18Percentile
23. How do we do this for many pages?
1. Grab Chrome timelines from HTTPArchive
2. Analyse with modified version of Jean-Pierre
Vincent’s 3rd-party-cpu-abuser
3. Aggregate the results
33. Improving performance
Reducing number of
• URL Matches
• Experiments
• Plugins (Widgets)
reduces snippet size, download and execution times
Removing jQuery from the bundle and using your own (if you
already have it) can shrink bundle further
34. Add metrics from Optimizely to Analytics or RUM?
optimizely.get("state").getActiveExperimentIds().length
Some products have documented APIs, why not extract key
metrics and send them to analytics or RUM?
Number of experiments in snippet:
Number of experiments active for this page view:
Object.keys(optimizely.get('data').experiments).length
35. Use Performance APIs to build a picture
Resource Timing
• When was script requested, how long did it take to fetch, was it
cached?
User Timing
• When did the initial script execute, how long did it take?
LongTasks
• Were there any script elements that took longer that 50ms?
36. Make sure tests are equivalent from a performance viewpoint
Some things seen in the the wild:
• One variant redirected to a new page, the other didn’t
• Optimised vs unoptimised images
(Can be good reasons why tests can’t be equivalent)
37. Could you do it server-side or or at CDN level?
https://www.flickr.com/photos/kewl/8475764430
38. Know how to turn it off in an emergency
https://www.flickr.com/photos/chrysics/4365802409
61. https://www.adlightning.com/ad-quality-report
“…41% of the ads tracked exceeded the industry-approved
maximum. Nearly 10% of the ads were larger than 5MB.
Some ads are as large as 30 MBs.”
“…average number of network requests and tracking scripts
per ad was 56:
3.7x greater than the maximum suggested by the IAB.”
62. “…one third (32%) of the ads were overly processor-
intensive.
The study also found it common for processor-intensive ads,
often video ads, to consume more than 3 seconds of CPU
time to render a single ad within the user’s browser.”
4% of video ads were in Flash format and 19% of in-banner
video ads were auto-play.
https://www.adlightning.com/ad-quality-report
65. Performance APIs can help to build a picture (within limits)
Resource Timing
• What was requested and when, how long did it take to fetch, was it
cached?
LongTasks
• Were there any script elements that took longer that 50ms?
But there are still plenty of blind spots
66. Can some of the security features of the web help?
Tried using
• Content-Security-Policy
• Subresource Integrity
to help a client police ads last year but didn’t have much success