How to Build Speed Dashboards in Google Data Studio

How to Build Speed Dashboards in Google Data Studio
‘ );

h3_html = ‘



cta = ‘‘+cat_head_params.cta_text.textual content+’
atext = ‘


scdetails = scheader.getElementsByClassName( ‘scdetails’ );
sappendHtml( scdetails[0], h3_html );
sappendHtml( scdetails[0], atext );
sappendHtml( scdetails[0], cta );
// brand
sappendHtml( scheader, “” );
sc_logo = scheader.getElementsByClassName( ‘sc-logo’ );
logo_html = ‘‘;
sappendHtml( sc_logo[0], logo_html );

sappendHtml( scheader, ‘


‘ );

if(“undefined”!=typeof __gaTracker)
} // endif cat_head_params.sponsor_logo

Whether it’s AMP, JavaScript, or hyperlink constructing, there isn’t a lot that the Website positioning group can unanimously agree on.

However, one factor that the overwhelming majority of us can get behind is getting higher at informing the folks we work with, who’re outdoors of the Website positioning bubble, to clarify its significance and the affect it will probably have on the companies you’re aiming to higher.

The advantages of selling a greater understanding of Website positioning points and implications among the many likes of different advertising groups, purchasers and senior stakeholders might help you:

  • Secure extra price range.
  • Have higher consumer relationships.
  • See Website positioning initiatives, campaigns, and actions prioritized extra extremely by improvement groups and by the enterprise as a complete.

Downing Tools

One smart way to promote a greater understanding of Website positioning to folks much less acquainted with our house is to take the info out of the instruments we use and produce them into customizable dashboards.

This strategy is useful because it:

  • Allows you to take away complicated jargon and current information in layman’s phrases.
  • Means you may current precisely what you need slightly than what a instrument’s person interface suggests.
  • Might nicely be introduced in a dashboarding resolution your meant viewers is already acquainted with, comparable to Google Data Studio.
  • Enables Website positioning instrument information to be blended along with different sources that your viewers would possibly already work with (e.g. Search Console and Google Ads for PPC groups).

Starting with Speed

You’re about to be taught a method you should utilize dashboards to talk Website positioning-related information with completely different groups and stakeholders.


For this instance, I’ve chosen to construct a Data Studio dashboard which focuses on pace metrics and I’ve completed so for the next causes:

  • Load time is one thing everybody can simply see the good thing about bettering.
  • Site pace impacts many various enterprise features (e.g., UX, all acquisition channels, senior stakeholders).
  • There is a constructive correlation that website pace has with each bounce charge and conversions.

Building Your Speed Dashboard

The pace dashboard I’ve constructed goals to present a focus for monitoring efficiency metrics and options information from:

The dashboard has been designed to be comprehensible to individuals who aren’t all that acquainted with pace metrics whereas nonetheless offering helpful insights for many who are well-versed in this space.

I’ve made the template out there right here, however please hold in thoughts it’s a work in progress and must be handled as a place to begin on which to construct your individual dashboards.

Note: I’m conscious the dashboard is absolutely zoomed in on laptop computer screens. It’s one thing I plan to repair however for now, you’ll want to zoom out to see the dashboard in its entirety.

Bringing Web pageSpeed Insights into Data Studio

The Web pageSpeed Insights a part of this dashboard shows:

  • Google’s cell and desktop scores for a single URL.
  • The variety of optimization alternatives.
  • Access to the complete report.

How to Build Speed Dashboards in Google Data Studio

How Can I Build This?

This information is pulled in through the Web pageSpeed Insights group connector created by Grant Kemp.

Setting up the connector does contain deploying your individual model of the connector through the Apps Script, however Kemp has offered clear step-by-step directions as a part of the documentation making the arrange comparatively easy.

What Does It Show?

Once you’ve arrange the connector in Data Studio, it is possible for you to to see the PSI rating for each desktop and cell. The connector additionally permits you to present the variety of alternatives that PSI has discovered.

How to Build Speed Dashboards in Google Data Studio

Below the scoring and alternatives scorecards, I’ve embedded the PSI report for that URL so you may see what these optimization alternatives truly are in addition to browse the entire report.

I’ve additionally embedded the webpage itself as a visible reference to reinforce which web page this information is referring to.

How to Build Speed Dashboards in Google Data Studio

Separate information sources will be arrange utilizing the identical connector a number of instances to present the PSI scores for various URLs.

I’d suggest setting these up for instance pages from completely different templates (e.g., one for the homepage, class web page, product web page, and weblog put up web page).

As you may run any URLs via PSI, you may also need to take into account creating separate information sources for competitor pages, so you may evaluate the way you stack up to them in phrases of efficiency.

How to Build Speed Dashboards in Google Data Studio

How Does It Help?

While this connector continues to be in its infancy and has its limitations it nonetheless offers priceless insights as to how Google judges Web pageSpeed and it might assist affect others in the next methods:

  • Performance scores and alternative areas are displayed clearly and easily from an authoritative supply, appearing as an impetus to take motion.
  • Comparing competitor pages aspect by aspect with the area you’re trying to optimize is usually a highly effective motivator for change, notably with extra senior stakeholders.
  • Comparing web page templates throughout the identical website or between owned properties might assist a enterprise to perceive the place they need to be specializing in improvement useful resource.

Bringing the Chrome User Experience Report (CrUX) into Data Studio

The Chrome UX Report is a singular dataset because it exhibits how actual customers expertise pageload at scale in addition to on an array of connections and machine sorts.

This might help take away subjective arguments towards optimization out of the equation (e.g., “The site seems fast to me.”)

While this database of efficiency metrics from actual customers is extremely helpful, it may be a bit off-putting in case you don’t know your First Contentful Paint out of your DOMInteractive.

In the second a part of this dashboard, I’ve aimed to make the CrUX metrics as simple to perceive as doable.

Hopefully, a wider vary of individuals might be ready to get a really feel for what these efficiency metrics are saying concerning the websites they’re in.

How to Build Speed Dashboards in Google Data Studio

How Can I Build This?

To construct this dashboard, head over to to configure your Chrome UX Report connector.

After authorization, specifying your area and checking the metrics and dimensions which were pulled via, you ought to be good to begin constructing the dashboards as I’ve completed in my template.

It is value noting that you may entry the uncooked CrUX information through BigQuery, when you’ve got extra time to make investments in understanding the dataset and the way to question it.

If that’s of curiosity I’d strongly suggest watching this sequence of tutorials by Paul Calvano.

What Does It Show?

From high to backside, the Chrome UX Report web page in my template exhibits:

  • A filter to swap between completely different root domains.

How to Build Speed Dashboards in Google Data Studio

  • The proportions of sluggish, common and quick pageloads over the past quarter with comparisons to the earlier quarter and former 12 months.

How to Build Speed Dashboards in Google Data Studio

  • A breakdown of connection and machine distributions for the final quarter in contrast to the earlier quarter.

How to Build Speed Dashboards in Google Data Studio

  • The proportion of sluggish, common and quick pageloads trended after the previous 12 months.

How to Build Speed Dashboards in Google Data Studio

  • The proportion of pageloads with sluggish common and quick efficiency for every of the person CrUX metrics (First Paint, First Contentful Paint, DOMInteractive and Onload).
  • Accompanying definitions for the metrics talked about above.

How to Build Speed Dashboards in Google Data Studio

  • Connection and machine distributions trended over the past 12 months.

How to Build Speed Dashboards in Google Data Studio

How Does It Help?

Building out a dashboard with CrUX metrics just like the one in my template might be used to:

  • Quickly and simply present how precise guests from Chrome are experiencing a website. This might be helpful to present to purchasers, administration groups, or any stakeholders who want to be satisfied of a efficiency problem on the positioning.
  • Pinpoint particular issues with website pace by taking a look at particular person efficiency metrics to assist inform improvement groups.
  • Communicate ongoing developments and clarify fluctuations in efficiency (e.g., displaying how a brand new website launch has diminished the load time and helped to enhance varied enterprise metrics).
  • Promote testing on the gadgets and connections that guests truly use to entry the positioning (e.g., testing website pace over 3G connections as a result of that’s how most cell customers entry the positioning).

Next Steps

Hopefully you discover this template a helpful place to begin in how to talk website efficiency.

Hopefully, you should utilize it as a springboard for a extra elementary change in the way you talk with colleagues and purchasers.

I’ve discovered large worth in constructing dashboards to assist clearly clarify features of my work to support cross-team collaboration.

This dashboard template isn’t completed. I’ll proceed including to and refining it with extra information sources in the close to future.

I’m eager to hear any ideas, concepts, questions or opinions you might need on this dashboard.

Looking ahead to seeing the fantastic creations you may construct with these information sources at your disposal!

More Resources:

Image Credits

All screenshots taken by creator, August 2019

Source hyperlink Website positioning

Be the first to comment

Leave a Reply

Your email address will not be published.