10 things I love about SpeedCurve (that I think you’ll love, too)

By admin

10
CARDINAL

things I love about

SpeedCurve
PERSON

(that I think you’ll love, too)


This month
DATE

,

SpeedCurve
ORG

enters double digits with our

tenth
ORDINAL

birthday. We’re officially in our tweens! (Cue the mood swings?)

I joined the team in

early 2017
DATE

, and I’m blown away at how quickly

the years
DATE

have flown by.

Every day
DATE

, I marvel at my great luck in getting to work alongside an amazing team to build amazing tools to help amazing people like you!

In the spirit of celebration, I thought it would be fun to round up my

ten
CARDINAL

favourite things to do in

SpeedCurve
PERSON

(that I think you’ll like, too). Keep scrolling to learn how to:

Fight regressions and stay fast See the impact of performance on your business

Benchmark
ORG

your site against your competitors

Track third
LAW

parties to make sure they’re not quietly hurting performance Make sure you’re tracking the best metrics for your pages Get a prioritized list of performance recommendations Bookmark and compare synthetic tests and RUM sessions so you can quickly find and fix performance issues Run A/B tests so you see how code changes affect your performance and user engagement metrics Get customized

weekly
DATE

reports Motivate your team with a wall-mounted monitor showing your favourite charts


1
CARDINAL

. Fight regressions and stay fast

It’s easier to make a fast website than it is to keep a website fast. Fighting regressions should be the top priority of anyone who cares about the speed of their site.

The best way to fight regressions is to create performance budgets on key metrics, and get alerted when they go out of bounds. You can even go

one
CARDINAL

step further and integrate your performance budgets with your CI/CD process, so that you not only get alerts but even break the build if a new deploy would violate any of your budgets.

Think of it this way. Imagine that your website is a vault containing

billions of dollars
MONEY

in jewels. Your performance budgets are like motion-sensing security cameras that let you know the minute something fishy is up. Integrating your budgets with your CI process is like having your security cameras trigger your guards to rush in and stop the bad guys.

READ: A Complete Guide to Performance Budgets

–––––


2
CARDINAL

. See the impact of performance on your business

Correlation charts are a great way to communicate the business value of performance to everyone in your business – using your own data. These charts let even the most non-technical stakeholder easily see the correlation between performance and user engagement and business metrics, such as bounce rate and conversion rate.

In this correlation chart, you can see that conversion rate peaks at

just over 6%
PERCENT

for sessions with

Largest Contentful Paint
ORG

(

LCP
ORG

) times of

1.1 second
CARDINAL

. As

LCP
ORG

gets slower, conversion rate declines quickly and dips

below 3%
PERCENT

at the

2-second
TIME

mark. The takeaway here is that improving

LCP
ORG

time for more of this site’s visitors could lead to a higher number of conversions overall, and more revenue.

With

SpeedCurve
ORG

RUM, you can create correlation charts that show you the relationship between performance metrics – from start render and

LCP
ORG

to page metrics like image and JavaScript size. You can also add you own data, such as conversion rate and cart size, so you can create custom chart types.

READ: How to create correlation charts

–––––


3
CARDINAL

. Benchmark your site against your competitors

Our public-facing Industry Benchmarks dashboard gets a lot of visits, but did you know you can create your own custom competitive benchmarking dashboard in

SpeedCurve
ORG

? This is an extremely effective tool for getting your company to care about performance.

With

SpeedCurve Synthetic
ORG

, you can monitor any other website in the same way that you can monitor your own website. That means you get all that same rich data, screenshots, and filmstrips that you can compare.

You can also drill down and focus on things like construction. That website that’s rendering twice as quickly as yours… what are they doing differently? Have they got more JavaScript? Have they got less? Are you making

400
CARDINAL

requests and they’re only making

80
CARDINAL

? This is the place to find that out.

And when you’ve mastered the competition and taken top spot on your leaderboard, it feels pretty darned sweet.

READ: How to create a competitive benchmark dashboard

–––––


4
CARDINAL

. Track

third
ORDINAL

parties


These days
DATE

it’s common to see pages with

dozens of third
CARDINAL

-party scripts.

Third
ORDINAL

parties add tons of value by increasing conversions (via targeting beacons) and helping you understand your users in unprecedented ways (via analytics tags). But they can significantly affect how – or even if! – your page renders.

You can’t fix what you don’t measure. Your

SpeedCurve Synthetic
ORG


third
ORDINAL

-party dashboard lets you see at a glance how all your

third
ORDINAL

parties are performing. Among (many) other things, you can see which of your scripts have excessive Long Task times (more than 50ms), which could be hurting the interactivity of your pages.

You can also turn on tracking for specific

third
ORDINAL

-party vendors, and then create performance budgets for them so you find out right away if they’re suddenly slowing down your pages. If you have a performance SLA with your vendors, you can use your budgets to keep them accountable.

WATCH: How to diagnose a

third
ORDINAL

-party regression

–––––


5
CARDINAL

. Make sure you’re tracking the right metrics

There are a lot of performance metrics out there! You need to make sure you’re tracking the right metrics for your pages. Many metrics are great in theory but not in practice, depending on how your pages are built. That’s why it’s crucial to visually validate your metrics. We’ve built visual validation into

SpeedCurve
ORG

in many helpful ways.

Core Web Vitals have gotten a lot of attention over

the past few years
DATE

. I love the effort to simplify metrics to a smaller handful that most people can wrap their head around. But Vitals have some limitations, such as:

They’re only available in

Chromium
ORG

-based browsers.

They don’t always correlate to what users see. For example, depending on how you’ve built your page, Largest Contentful Paint can measure elements like the cookie consent banner, not your main image. (Learn more about

LCP
ORG

caveats.)

It’s important to visually validate your metrics to make sure that improving that metric actually helps your users have a faster experience! There are several ways to do this in

SpeedCurve
ORG

, such as…


Drill
PERSON

down into test details

From any synthetic time series chart, you can click on any data point and click

‘View Test’
WORK_OF_ART

. Your test details page includes a lot of helpful information, including an interactive waterfall chart. Hovering over any of the key metrics in this chart will show you how that metric lines up with the filmstrip view of the page.

Looking at the chart above, you can see that Largest Contentful Paint happens at

4.64 seconds
TIME

. But you can see in the filmstrip that the main visual element shows up earlier than that. Hovering over the Hero Largest Image metric (below) shows that it lines up with the main visual element.

The takeaway here might be that, while tracking and optimizing

LCP
ORG

is important if you want to make

Google
ORG

happy,

Hero Largest Image
ORG

might be a good metric to track if you want a better understanding of what your users actually experience.

Visualize your performance issues

Your test details includes other helpful visuals, such as seeing the

LCP
ORG

element (framed in red) alongside other important rendering metrics, like

Last Painted Hero
WORK_OF_ART

and Visually Complete:

Cumulative Layout Shift is a notoriously tricky metric to understand. Visualizing all the shifting elements (within the red frames) on the page is extremely helpful. The more elements that shift – and the greater the movement – the more janky and unstable the page feels to your users.

(Pro tip: The most common

CLS
ORG

issue I see is that image elements don’t have explicit ‘width’ and ‘height’ attributes. If you include those attributes, it’s an easy way to make the image placeholders on your page stable and eliminate annoying

jank
GPE

.)

–––––


6
CARDINAL

. Get a prioritized list of optimization recommendations

Your Improve dashboard is an incredibly helpful tool. Consider it your very own performance checklist, aggregating and prioritizing all your

Lighthouse
ORG

audits and performance recommendations across all the pages you’re testing.

Not only does the Improve dashboard round up all your recommendations in

one
CARDINAL

place, it shows you which optimizations you should tackle

first
ORDINAL

. You can prioritize them by how many URLs they affect or how much of your real user traffic they affect. And because each recommendation is badged according to which

Core Web Vital
ORG

it affects, you can even get a sense of how your Vitals will be improved. –––––


7
CARDINAL

. Bookmark and compare synthetic tests and RUM sessions

A huge benefit of tracking web performance over time is the ability to see trends and compare metrics. You can bookmark and compare different data points in your monitoring history, generating side-by-side comparisons that let you not only spot regressions, but easily identify what caused them:

Compare the same page at different points in time

Compare

two
CARDINAL

versions of the same page – for example, one with ads and

one
CARDINAL

without

Understand which metrics got better or worse

Identify which common requests got bigger/smaller or slower/faster

Spot any new or unique requests – such as

JavaScript
PRODUCT

and images – and see their impact on performance

For example, if you see a spike in a metric, such as the

LCP
ORG

spike pictured below, you can click on that data point and select the ‘Compare Test’ option:

And then select a test with a better result:

You’ll get a tonne of comparison data, starting with a stacked waterfall chart of key metrics for both tests. You’ll also get details on changes to common requests across both tests, as well as unique requests that may have introduced performance issues. This can help you quickly triangulate – and fix! – performance issues.

READ: How to bookmark and compare tests or sessions

–––––


8
CARDINAL

. Run A/B tests on design and code variations

With synthetic monitoring, it’s super easy to benchmark not only your site versus a competitor’s, but also variations of your own URLs. For example, you might want to test your site with ads turned on versus ads turned off. You can even turn off specific

third
ORDINAL

parties to see how this affects your performance metrics. This sort of testing is usually referred to as A/B testing or

MVT
PERSON

(multivariate testing).

READ: How to do A/B testing in Synthetic

You can even run A/B tests on your live site. This lets you understand the impact of design/code differences on the same page on your performance metrics – and even more interestingly, on real user behaviour. For example, this case study explains how we used RUM to A/B test JSONP requests and the preloader.

–––––


9
CARDINAL

. Generate customized

weekly
DATE

reports

You can easily turn any custom dashboard into an automated

weekly
DATE

report that gets sent to a mailing list you create. Here’s an example of a

weekly
DATE

report showing

week-over-week
DATE

changes to

Core Web Vitals
ORG

:

Your recipients don’t need to have a

SpeedCurve
ORG

login. They can get everything they need from the report, which shows

week-over-week
DATE

changes and highlights the metric that had the biggest change. From the report, they can go directly to your

SpeedCurve
ORG

charts and drill down into more detailed results.

READ: How to enable

weekly
DATE

reports

–––––


10
CARDINAL

. Enable TV mode for dashboards


One
CARDINAL

excellent practice that’s been used effectively by companies like

Lonely Planet and
ORG


Ticketmaster
ORG

is to have monitors mounted in open areas of their offices, displaying key performance stats and comparison videos.


Lara Hogan
PERSON

(previously director of engineering at

Etsy
ORG

) wrote a great blog post demonstrating how

Etsy
PERSON

took advantage of the power of showing versus telling.

READ: How to display your dashboards

–––––

A birthday gift for you!

Like hobbits, we like to give gifts on our birthday. To celebrate our

tenth
ORDINAL

birthday, we’re offering

an extra
PERCENT


10%
PERCENT

off

the first year
DATE

for all new

annual
DATE

subscriptions – bringing your total

annual
DATE

discount to

30%
PERCENT

.

Start your free trial if you haven’t already, and when you’re ready to subscribe, just follow the prompts.

(If you already have a

SpeedCurve
ORG

plan, we’re offering

an additional 10%
PERCENT

off your

annual
DATE

price if you renew for

2+ years
DATE

. Email us at [email protected] for more information.)

These offers are available until

December 31, 2023
DATE

, so act soon!