GTmetrix Performance Blog

News, updates and guides on GTmetrix and general web performance

How to Simulate Devices with GTmetrix

See how your site could display and load on over 20 different devices and variants

Your visitors may reach your website in a variety of different devices and screen resolutions. GTmetrix now allows you to test your page’s performance on them by modifying the screen resolution, user agent and device pixel ratio to each device’s technical specifications – only available with the Developer Toolkit.
 


 

What does Simulate Device do?

Simulate Device works by passing parameters to the GTmetrix browser to present itself as a specific device when it requests your website.

With Simulated Devices, GTmetrix poses as the device you select.

 

When your server receives this request, it treats GTmetrix as the device specified and delivers assets, layouts, etc intended for it.

Three parameters are changed in order for GTmetrix to simulate a device:
 

  • Screen Resolution – An iPhone 6 for example is 375×667 (GTmetrix default is Desktop – 1366×768)
  • User Agent – An identifying string that tells your server what is requesting your site.
  • Device Pixel Ratio – Tells the browser how many actual pixels the device is going to use to draw a single CSS pixel.

 

We’re releasing this feature with over 20 popular devices (and variants) available for simulation, including:

Phones

  • Apple iPhone 4/4S
  • Apple iPhone 5/5C/5S/SE
  • Apple iPhone 6/6S/7/8
  • Apple iPhone 6/6S/7/8 Plus
  • Apple iPhone X
  • Google Nexus 4
  • Google Nexus 5
  • Google Nexus 5X/Pixel
  • Google Nexus 6/6P/Pixel XL
  • Nokia Lumia 520
  • Samsung Galaxy Note 3
  • Samsung Galaxy Note 4/5
  • Samsung Galaxy S4/S5
  • Samsung Galaxy S6/S7
  • Samsung Galaxy S8
  • Samsung Note 8

Tablets

  • Apple iPad 2/Mini
  • Apple iPad 3/4/Air/Air 2/2017
  • Google Nexus 10
  • Google Nexus 7
  • Samsung Galaxy Tab 4
  • Samsung Galaxy Tab A 10.1
  • Samsung Galaxy Tab S3

We’ll be adding more over time, to ensure the most up to date and commonly used devices are represented.

 

Why Screen Resolution matters

Screen resolution is the size at which a website is rendered. Desktop monitors have larger resolutions than mobile devices, and due to responsive design, varying resolutions will trigger varying layouts and styling.

Different screen resolutions trigger different layouts with responsive design.

 

Because your website could be visited from devices of all sizes, it is important to ensure that it is optimized for screen sizes most used by your visitors.
 

Why Device Pixel Ratio (DPR) matters

Device Pixel Ratio in simplistic terms is how many pixels are packed in a screen. Different mobile devices have different Device Pixel Ratio – from Quad HD displays, to Apple’s Retina Display.

Different devices have difference device pixel ratios – from Quad HD displays, to Apple’s Retina display.

 

This feature ensures that if your responsive design uses the device -min-device-pixel-ratio: value media query, the proper assets/layouts will be rendered for the GTmetrix analysis.

You may want to serve a higher resolution photo for higher pixel density displays for example.
 


 

What doesn’t it do?

…it is still recommended to test your page on the actual device…

Simulate Device does not simulate hardware performance, and thus actual loading behaviour may differ on an actual device.

Devices have a varying range of hardware specifications and performance, which all contribute to the loading speed of a website. We’re simulating the resolution, user agent and device pixel ratio of the device – many of them are the same (ie. iPhone 6 and iPhone 8).

Because we cannot simulate the hardware performance for each device, it is still recommended to test your page on the actual device in order to get real world performance benchmarks. Naturally, an iPhone 8 would load a modern website faster than an iPhone 6, because it has a better processor, more memory, etc.

Our Simulated Device feature gives you a good starting benchmark to gauge your performance with on these devices, but they should not be regarded as 1:1 comparisons.
 


 

How to use it

To simulate a device, enter a URL into the Analyze field, and expand the Developer Tookit in the Analysis Options.

The Developer Toolkit is located in the Analysis Options on the Dashboard.

 

Select a device in the “Simulate Device” dropdown.

The screen resolution, user agent and device pixel ratio settings will be prefilled to that device’s specifications and locked (you cannot change these values).

Options will be set to your selected device’s specifications.

 

Click “Analyze” – GTmetrix will test your page with the simulated device settings.

New Simulated Device Reports

 

A report will be generated with the site screenshot at the correct screen resolutions and details of the page load.

 
 

Test as a Desktop Device

For you to test as a Desktop device and have access to all Screen Resolutions, you’ll have to change the Simulate Device option to “Custom Device”.

Access all Screen Resolutions by: 1. Selecting “Custom Device”; 2. Selecting your Screen Resolution.

 

You can leave Device Pixel Ration (DPR) as blank (default) or set it to 1.

 

More Usage Scenarios

Here are some more ways to use Simulate Device to get even more insights:
 

Change the Connection speed to 3G/2G as well

To even further simulate a mobile experience, you can change the connection speed to reflect what users would likely be experiencing.

Use GTmetrix’s throttled connection options to pair up your Simulated Device with appropriate connection speeds!

 

Now you can test your page performance for an iPhone 6 using a 3G connection, or an iPad.

 

Simulate a device around the world

You can simulate a device in all of our global test regions. Monitoring and API usage is also supported.

You a simulate a device in all of our global test regions!

 

In addition to monitoring your default Desktop view, we recommend also monitoring for various simulated devices around the world.

 

Test sites that use browser detection/user agent sniffing

Overriding the User Agent will lets you collect the various results that may be delivered if a site uses browser detection or user agent sniffing.

This is good for sites that use “m.” prefixes for mobile versions of the site (e.g. m.example.com).

Sites may deliver different versions depending on your User Agent.

 


 

Benefits

Our Simulate Device feature gives you insight on your page’s performance with the most used devices today. Visitors may be coming from all types of devices and screen resolutions, so it’s best to test for the most commonly used.

Look for common devices used in your analytics to test and monitor.

 

Your website analytics can give you a idea of which devices are used the most.

With monitoring and alerts, you can ensures that you keep consistent performance for your entire user base.
 


 

Simulate Device is only available with the Developer Toolkit

GTmetrix Developer Toolkit

The Developer toolkit is included in Bronze, Silver and Gold plans, or you can get it as add-on to PRO Custom plans.

For a limited time, we’re offering a $15 coupon towards any PRO plan – try the Developer Toolkit today!

Use code: TRYDEVTOOLKIT

 
As a PRO user, you’ll get an enhanced GTmetrix experience with: Priority access for tests, More monitored/saved URLs, Hourly monitoring, Remote location monitoring, and more!


Go PRO and try the Developer Toolkit Today!