# Four Charts That Prove the Value of Site Speed

> Site speed is critical to user experience and online success, here are four charts which prove the value!

Author: Simon Hearne (https://simonhearne.com/about/)
Published: 2020-10-22
Canonical: https://simonhearne.com/2020/value-of-site-speed/
Tags: WebPerf, UX

---
Site speed is an important but often-overlooked component in user experience. We know intuitively that slow experiences are unpleasant and make us more likely to leave a site, but building evidence of this effect has always been tricky.

The charts below were built with data collected using mPulse RUM.

<div class="chart-sticky-container" id="sticky-container">
  <div class="vega-chart loading chart-animate chart-sticky chart-active" id="vis" data-spec="/data/speed-value/speed-value.json">Loading chart...</div>
  <div class="stage" data-stage="0">
    <h2 id="slow-landing-high-bounce" class="no-link">Slow Landing Pages = High Bounce Rate</h2>
    <p>This chart shows the page speed distribution for an website by device type. The area is the distribution of sessions by average page speed and the lines in this case show the average bounce rate for sessions by the average page speed in the session.</p>
    <p>The majority of traffic is mobile, hence the higher blue distribution. This website is well optimised for mobile browsers resulting in a faster average page speed than on tablet or desktop experiences. The distributions show a peak of session average page speed at around 1.2 seconds for mobile and desktop, with tablet lagging slightly at around 1.5s. Note that the page speed here is the average of all page views in a session: including the landing page, browsing and the checkout flow where appropriate.</p>
    <blockquote class="error"><p>Users are more likely to leave the site immediately when the first page of a session is slow.</p></blockquote>
    <p>The bounce rate lines here show that there is a strong correlation between page speed and bounce rate. The initial drop is due to error pages and bots which result in high bounce rates and very fast pages. There is a settling around the peak of the distribution where we find the optimal bounce rates of 22% on mobile, 14% on desktop and 9% on tablet, these occur at the fastest page speeds of around one second on average!</p>
    <p>Users are more likely to leave the site immediately as their page speed gets worse. The mobile bounce rate increases from 22% to 40% as page speed increases from 1s to 2s! The median bounce rate for mobile is 41% at 2.7s, only 50% of sessions achieve this speed.</p>
    <blockquote class="warning"><p>Your slowest users will not even appear in your data - they will have left before the page loads <span style="font-style:normal">😱</span></p></blockquote>
  </div>
  <div class="stage" data-stage="1">
    <h2 id="slow-landing-low-conversion" class="no-link">Slow Pages = Low Conversion Rate</h2>
    <p>We see a similar pattern when looking at conversion rate. Conversion peaks where page speed is under a second, with conversion rate halving across all device types from experiences of one second to two seconds.</p>
    <blockquote class="error"><p>Users are less likely to convert if their average experience during a session is slow.</p></blockquote>
  </div>
  <div class="stage" data-stage="2">
    <h2 id="fast-pages-higher-revenue" class="no-link">Fast Pages = Higher Revenue</h2>
    <p>It's not just conversion that takes a hit when users have a slow experience. Average order value drops significantly in the first second here from $190 on desktop at 800ms to $140 at 3s. Faster experiences lead to bigger basket sizes!</p>
    <blockquote class="success"><p>Visitors spend more money when the average experience is faster.</p></blockquote>
  </div>
  <div class="stage" data-stage="3">
    <h2 id="fast-pages-longer-sessions" class="no-link">Fast Pages = More Pageviews</h2>
    <p>If you make money through advertising, session length is a key performance indicator. In this graph we see that session length correlates with page speed too!</p>
    <blockquote class="success"><p>Users visit more pages when the average experience is faster.</p></blockquote>
    <p>Here the average session length peaks on desktop at 20 pages per session at a one second average page speed. This drops dramatically to just 13 pages when users have an average 2.25s page speed.</p>
  </div>
</div>

<blockquote class="info small"><p>The charts presented here are generated from real data, the explicit values are examplar.</p></blockquote>

## Conclusions

Page speed is a critical factor in user experience, but most visitors are not even aware of it! Slower experiences are [reported to](https://calendar.perfplanet.com/2013/slow-pages-damage-perception/) feel 'basic', 'confusing' and 'clunky', rather than slow. Delivering fast user experiences gives your website or application the best chance at meeting your business objectives and creating positive user experiences.

<script>
  window.addEventListener('load',() => {
    const sticky_els = document.querySelectorAll("#sticky-container div[data-stage");
    const stages = [
      "bounce",
      "conversion",
      "revenue",
      "sessionlength"
    ];
    const chartID = "vis";
    const signalName = "stage";
    var currentStage = sticky_els[0].dataset.stage;
    var chartId = -1;
    var lastBottom = Infinity;
    sticky_els[0].classList.add('stage-active');

    const options = {
      rootMargin: '-150px',
      threshold: 0
    };

    const updateChart = stage => {
      chartElem = document.getElementById(chartID);
      chartElem.classList.add('active');
      setTimeout(function(){document.getElementById('vis').classList.remove('active')},250)
      let c = window.charts.filter(c => c.id === chartID);
      if (c.length > 0) {
        let chart = c[0].view;
        let state = chart.getState();
        state.signals[signalName] = stages[stage];
        chart.setState(state);
      }
    };

    const toggleActive = stage => {
      sticky_els.forEach(e => {
        if (e.dataset.stage == stage) {
          e.classList.add('stage-active');
        } else {
          e.classList.remove('stage-active');
        }
      })
    };

    const intersector = (entries,observer) => {
      entries = entries.filter(e => e.isIntersecting);
      if (entries.length >= 1) {
        entries = entries.sort((a,b)=>a.intersectionRatio < b.intersectionRatio);
        let entry = entries[0];
        if (entry.intersectionRect.top > 0) {
          let stage = entry.target.dataset.stage;
          if (stage && stage !== currentStage) {
            currentStage = stage;
            updateChart(stage);
            toggleActive(stage);
          }
        }
      }
    };
    tries = 0;
    obsInterval = setInterval(() => {
      if (window.charts.length > 0) {
        console.info("Charts ready, creating observer.");
        const observer = new IntersectionObserver(intersector,options);

        sticky_els.forEach(el => {
          observer.observe(el);
        });
        clearInterval(obsInterval);
      } else {
        tries++;
        if (tries > 20) {
          console.info("Charts not ready after 10 seconds, giving up 😧");
          clearInterval(obsInterval);
        } else {
          console.info("Charts not ready yet, delaying 500ms.");
        }
      }
    },500);
  });

</script>