up

Zoompf's Web Performance Blog

Note: Archived Content

This is the archived version of the Zoompf blog. Since our acquisition by Rigor, all our new research and posts on web performance are being published on The Rigor Blog

A New Way to Audit Your Responsive Mobile Site Performance

 Mark Isham on December 2, 2014. Category: announcements, Product Release
Samsung Galaxy S5 vs iPhone 5S by Kārlis Dambrāns

Samsung Galaxy S5 vs iPhone 5S by Kārlis Dambrāns

While responsive website design can be a great way to simplify your website code across multiple form factors, it does come at the cost of extra complexity in your CSS and Javascript. As the browser type and viewport sizes change, different CSS rules are applied, different javascript lines may be executed, and even different images may be loaded – all to provide the most optimal viewing experience for your mobile, tablet or desktop device.

As you can imagine, testing these different configurations for optimal website performance can be challenging. What may be acceptable on a desktop browser may be sluggish and jittery on a mobile phone.

For quite some time now, Zoompf has supported performance auditing of mobile websites through 2 primary mechanisms: (1) impersonation of a specific browser and device type using custom user-agent strings and (2) comprehensive crawling of all CSS rules for all @media resolutions (in other words, scanning all CSS rules at all resolutions and reporting performance problems found in ANY resolution).

While these 2 approaches were effective in finding the majority of mobile website performance problems, they did not address conditional javascript execution that can occur at lower mobile screen resolutions. This use case has become increasingly common as mobile websites become more sophisticated and utilize conditional lazy loading of smaller, mobile friendly images for their page content.

Device Type Scan Options

For our Zoompf WPO Commercial customers, there is now a new option available to select “Device Type” when you initiate a new performance scan. This selection not only performs the user agent impersonation and full media CSS crawls discussed above, but also executes all javascript triggered by onload and scroll events, using a viewport size matching the selected device type. So in other words, if your javascript performs conditional execution based on screen size, the appropriate code will now be run and audited for performance defects.

To enable, first select “Conduct Scan” and then the appropriate scan type of interest (web page, full website, etc.).

ConductScan

From here, expand the “Options” section and then select the Device Type of interest: ConductScan2

Click the scan button. When complete, the audit results will include results specific to your selected device type, as well as a screenshot showcasing the resolution and orientation of your selected device.

ConductScan3

The following devices and resolutions are currently supported:

 

Device Type Logical Resolution Screen Resolution
Desktop Chrome (Default) 1440 x 990 1440 x 990
iPhone 5 Portrait 320 x 568 640 x 1136
iPhone 5 Landscape 568 x 320 1136 x 640
iPhone 6 Portrait 375 x 667 750 x 1334
iPhone 6 Landscape 667 x 375 1334 x 750
Android Galaxy S5 Portrait 360 x 640 720 x 1280
Android Galaxy S5 Landscape 640 x 360 1280 x 720
iPad Portrait 768 x 1024 768 x 1024
iPad Landscape 1024 x 768 1024 x 768

 

See also iOS Resolution Quick Reference

With more to come in the future. And if we’re missing a form factor that’s critical to your website, Contact Us and we’d be happy to discuss.

If you want to see what performance optimizations are possible for your site, check out our Zoompf Alerts, now available for free. Zoompf Alerts monitors your website for the common causes of slow performance, alerting you to specific code and configuration level changes introduced over time that slow down your website performance. Free to join and no installation required.

Comments

Have some thoughts, a comment, or some feedback? Talk to us on Twitter @zoompf or use our contact us form.