Google Analytics Viewport or Browser Size
Viewport or Browser Size Report
Also see our screen resolution video here.
Test Viewport Sizes
You can test how your website looks at different viewport sizes by using a tool like Screenfly , as shown in this video. It is available at https://screenfly.org/. Note that a new version is available at https://bluetree.ai/screenfly/.
- The screen resolution represents the size of the visitor’s screen, which may not be the total screen used to view your website.
- The amount of screen used to display your website is called the viewport.
- You need to know the common screen resolutions and viewports your visitors use when designing and optimizing your website. Be sure to test your website at these sizes before any major design change.
- To find browser sizes in Google Analytics, you first go to Audience, then click on Mobile and then Overview. From here, add a secondary dimension of Browser Size. You can search to a specific device type to view mobile, desktop or tablet browser sizes.
- Bonus tip: Viewport relates to Core Web Vitals and you’ll want to understand your viewports when measuring those key metrics.
In this video, we’re going to look at the size of a visitor’s browser. This is also referred to as the viewport. Now, in a previous video, we discussed screen resolution and screen resolution is a way of looking at the size of the screen visitors use, not their browser. You can click the link to the right of the screen or in the description below to view that video.
So I think the first question we need to figure out here is what’s the difference between viewport and screen resolution? Say this box represents the screen resolution. This is the entire amount of width and height that a visitor has available on their screen. However, part of that screen includes things like the start bar and within the browser, there’s also things like an address bar or other tool bars which fill up some of the space. There’s also the scroll bar over to the side and that takes up even more space so after all of that, you’re left with a much smaller part of your screen that visitors can use to load your website. And of course, people can resize their browser which makes the viewport or browser size even smaller.
So the screen resolution is a measure of the entire screen and the viewport is a measure of how much of that screen is available for loading your website. But together, these two metrics can help you understand your visitors and how you should design your website. In particular, knowing these two things can help you decide where you should position elements to make sure everybody can see everything that they’re supposed to see on your website.
Let’s hop over to Google Analytics and talk about where exactly you find this report. Once in Google Analytics, go to the left sidebar, click on Audience, Mobile, and Overview. This will load a report telling you all the devices people use. To find viewport size, we want to add a secondary dimension of browser size. This report will tell us all the browser sizes for each different device type. You can scroll through and look at all the different sizes people use. Within here, you can see the total sessions for each size and you can also see behavioral metrics like the bounce rate or pages per session for each browser size. And of course, you can also view conversions or goals per device.
Now one thing you may want to do is look at browser sizes for certain device types. Say you want to see all of the browser sizes for people visiting your website from a desktop or laptop computer. For that, we can search for the word desktop. Once we search for that, we can see all the browser sizes people used from a desktop or laptop computer. Similar to screen resolutions, the question becomes, “what does the browser size actually mean”? “What does it look like?” And like with screen resolution, we can use a tool called Screenfly to picture our site at that size.
So one tool we like to use here at Elementive is Screenfly. Now one of our top browser sizes in Google Analytics was 1370 x 660. We can go up to the Custom Screen Size tool and enter those dimensions in. This then lets us see what our website looks like for people who are visiting at 1370 wide and 660 tall and from here, we can start to ask ourselves questions about what kind of changes we might want to make or what kind of problems exist. So in this example, things like the Signup box are getting cut off so maybe we need to bring that up a little bit more to really support people who are visiting our website at this size.
If you have other questions about Google Analytics or other aspects of measuring your website’s performance, please contact me.