Simple way to determine the percent of various screen real estate commitments in competition?

In short, I want to analyse a number of web pages, let's say, specifically homepages of Vox and HBR (but also a dozen others).

1) I want to figure out how much screen real estate they're giving to different categories, mediums, ads, navigation, etc. Eg, 25% of a the page is dedicated to featured stories, 15% is dedicated to audio/video.

2) I might break it up between above and below the fold, or hypothetically even try ways of weighing it according to a scroll map.

What's one way to do (1)? What might be a simpler way?

• Simplest way is to take a screenshot and use Photoshop/Paint/etc to count pixels. If you are looking for an application to do that for you, software recommendations are considered off-topic on this site. Jun 25, 2018 at 12:09

As far as I am aware there is no quick and easy tool to do this for a bunch of pages - just patience and mathematics

Grand a screenshot of the page you want to analyse.

Calculate the full area in pixels of the page that you want to analyse (width px * height px).

Calculate the area in pixels of the element you want to analyse.

100 divided by the full area will give you the percentage covered by a single pixel - then multiply that by the element area to get the percentage of the page used by that element: (100/page)*element = % used by element.

In the example images above, the banner is roughly 13.5% of the page area

If you're thinking of doing this as a part of a design/ux audit then I would suggest doing both the full page and the 'above the fold' areas.