Measuring the number of scripts/links/images on your pages

It's important to be able to measure things that are likely to impact your end users and your position in search engine results.

Anyone who has at least a passing interest in SEO has at one point or another tried to minimise un-neccesary links on a page, minimise the number of scripts used, and ensure there aren't pages with an overload of images.

It's a surefire way to ensure your pages are loading quickly, which gives a good user experience, and a good way to check that every page of your site isn't linking across to every other page (I'm looking at you megamenus).

But if you haven't done this before, how do you know which pages are your worst offenders that you can prioritise first? if you have a small site it's easy, but if you have a giant ecommerce site or large content site, how do you know there isn't some old page with 1,000 links buried somewhere?

Webmaster tools?

...is not going to answer this question.

For a start it's only going to tell you how many links there are, but even then, it shows you the most linked pages not the pages with the most links on them. Which is an important distinction.

Measuring this automatically

If you have Google Tag Manager and Google Analytics then you can automatically measure the number of links, scripts & images on a page using custom metrics sent with every pageview.

The browser HTML DOM contains a set of "document objects" that we can access using javascript, and there is a set of properties/methods that relate to this exact thing.

Add the variable in Google Tag Manager

What we're going to do, is set up tag manager to automatically query the browser and ask it how many images, scripts and links it finds, so we can send this information off to Google Analytics.

  1. Go into the "Variables" section of tag manager
  2. Create a new "user defined variable"
  3. Set the type to "JavaScript Variable"
  4. Specify a global variable name
    • Number of images is - document.images.length
    • Number of links is - document.links.length
    • Number of scripts is - document.scripts.length
  5. Name it something logical
  6. Save the variable

Google Tag Manager variable for number of images in a page

Now what will happen is upon tag manager loading on the page, it will look through the document body (the page code) and return the number of items that are of the type images/links/scripts.

Configure the custom metrics in Google Analytics

By default Google Analytics has a set of metrics like pageviews, time on site etc, but there is no in-built metric for this information, so we need to create it.

  1. Log into your Google Analytics account
  2. Go into the "Admin" section
  3. On the relevant property, click into "Custom Definitions"
  4. Click into "Custom Metrics"
  5. Click "+ New Custom Metric"
  6. Specify a name for your custom metric - this is what is shown in reports, I normally just re-use the global variable name from above.
  7. Scope is "Hit" (it's sent with each pageview)
  8. Formatting type is "Integer"
  9. Minimum & Maximum value can be left blank - this is where you can set a minimum or maximum values for it to show up in reports
  10. Ensure "Active" is ticked on
  11. Click Create
  12. Repeat these steps above for each metric

Google Analytics custom metrics for number of images/links/scripts

Configure Google Tag manager to send the data into Google Analytics

Now that we have configured the custom metrics in Google Analytics, and we've set up Google Tag Manager to read the information out of the browser, we need to configure it so that they talk to each other.

  1. Go into Google Tag Manager
  2. Go into your "Tags"
  3. Go into the Google Analytics tag that tracks your pageviews
  4. Go into the "Configure Tag" section
  5. Click to expand "Custom Metrics"
  6. Add custom metrics for each of these values
    • For the "Index" value, you will be able to see this in Google Analytics by going into the custom metrics section in Admin, then looking at the index column
  7. Click "Continue"
  8. Click to "Save Tag"

Google Tag Manager tracking custom metrics on a pageview

Preview/debug/launch

Now that we've configured everything, we should make sure it's all working as expected.

  • In Google Tag Manager click to "Preview and debug"
  • Load the page where Google Tag Manager is running

Ensure the variables are being populated

  1. In the preview window that shows up at the bottom click into the step on the left where your pageview is being fired (probably "2 Pageview")
  2. Click into the "Variables" section (at the top)
  3. Scroll down to find the variables you specified in tag manager
  4. Ensure there is a value shown

Google Tag Manager custom variable values

Ensure the variables are being sent to Google analytics

  1. Click into the "Tags" section (at the top)
  2. Click the pageview tag that's being fired
  3. In the Properties section, click the "Show More" link
  4. Look for the "Metric" row, and make sure you see 3 different values being sent off to Google Analytics with the pageview

Google Analytics custom pageview metrics being sent

Seeing this information in Google Analytics reports

Because this is a custom metric, it doesn't show up in any of the standard reports, you'll have to add it to a custom report, or copy an existing report and add this data.

  1. Go into Google Analytics
  2. Navigate to a report you want this information on, and click the "Customize" link below the report name or go into "Customization" and click to create a "+ New Custom Report"
  3. In the "Metric Groups" section, click to "+ add metric"
  4. Click into "Custom Metrics", and select the metric you'd like.
  5. Save your report

Now because the metrics are all just totals, you'll have to export this to work out the average value of these metrics, since we want to know how many images/scripts/links there were on each page on average, rather than the total.

Take your custom metrics, and divide them by the Pageviews metric to get an accurate figure.

Useful Reports

So now you've been recording this for a while, you can get some really interesting answers and insights.

  • Look at average page load time vs number of scripts/images on the page
    • Is there a threshold where you see once the number gets high enough there is a slowdown of the page?
  • Is there a trend over time of more links/images/scripts?
    • Why is this? can you ensure this is providing value to your users?
  • Find your pages that have the most links
    • Can you minimise how many links there are?
  • Find your pages that have the most images
    • Are all those images needed?
  • Look for pages that have an unusually high number of scripts
    • See if there are un-neccesary scripts you can remove
    • Are there old pages that don't have the right scripts?
  • Look for pages that have an unusually low number of scripts
    • Ensure they are working, is something not being included correctly