A New Way to Audit Your Responsive Mobile Site Performance

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.).

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

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.

The following devices and resolutions are currently supported:

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.