By:Gediminas Stanaitis Posted On: Topic:Engineering

The Devbridge mobile performance tool: get on Google's good side

Over the summer, Google released an update for its search engine algorithm to boost the ranking of mobile-friendly websites. This update had such an effect, in fact, a few names were thrown around to illustrate the gravity of the situation: "mobilegeddon", "mobilepocalypse", or maybe even "mopocalypse". While none of these monikers caught on, simply calling it a "mobile-friendly update" is probably too innocuous. The Google search algorithm update, to be stated simply, judges your site as either "mobile-friendly" or "not mobile-friendly", and your search engine rank is thusly affected. While over 200 different factors are taken into account, there aren't any degrees of mobile friendliness; you're either in or out.

The importance of being mobile-friendly

The shift of the majority of internet access from desktop computers to mobile devices took place in 2014. Google obviously took notice; we've talked about it before, particularly in this post back in March, which referenced the impending algorithm change directly. The statistics can be devoured ad infinitum, but the conclusion will always be the same. The need for a mobile-friendly web presence is not going away as far as overall web success and current trends is concerned. In essence, Google is technically enforcing a mobile internet strategy you should be implementing already.

To check if your page is mobile ready, Google has provided the Google PageSpeed Insights tool. It’s a very useful tool when you need to quickly check your page score, but if you have several pages and you want to compare their scores before and after optimization, things get a little more difficult. To make the entire process easy and to help keep our own work mobile-friendly, we've created a tool that would automate mobile-friendly testing.

Enter the Devbridge web performance testing tool

The performance tool we've created collects various information about your pages and displays it in an easy-to-digest manner on the reports page. 

The Google PageSpeed insights you'll see include desktop and mobile page scores, as well as recommendations for improvement. In addition to this and a whole bunch of other useful information, a few of the highlights provided by our tool are as follows:

  • The ability to set your own threshold for scores
  • Reports from previous tests
  • Comparison of scores from all pages
  • HTML error reports
  • A count of external resources

So, how do I use it?

To build our performance tool, we used the "w3cjs" module for "w3c" validation, "grunt-devperf" for performance analysis and, as previously stated, the Google PageSpeed Insights tool. To get started testing the mobile-friendliness of your website, first download the tool.

Once downloaded, install the "devbridge-perf-tool" package to your project root directory by running the following:

npm install devbridge-perf-tool --save-dev

Add the following code to your "gulpfile.js" file:

require('gulp').task('perf-tool', function () {
   var options = { 
       siteURL:http://www.bbc.com, 
       sitePages: ['/', '/about']
    }; 
    return require('devbridge-perf-tool').performance(options); 
    });

Once the "perf-tool" task is executed, a report will be generated and placed in your "/perf-tool" directory. If you want to change the default output directory, just add the following option to your task configuration:

resultsFolder = '/your-dir-name';

To see the report, open your hosted site in your browser and navigate to your report directory (e.g. localhost/perf-tool). You should see the following list of available options:

  • options.siteURL: used for site base url. If left empty, the option "options.sitePages" must have absolute urls.
  • options.sitePages: list of pages to test.
  • options.runDevPerf: enables or disables performance analysis.
  • options.runHtmlTest: enables or disables w3c analysis.
  • options.runGoogleSpeedTest: enables or disables Google PageSpeed Insights analysis.
  • options.resultsFolder: changes the report output directory.
  • options.smallerDevperfOutput: enables or disables the writing of the "devPref" report to the console.
  • options.minimumPassScore: controls the "pass score" threshold.

Summary and final thoughts

In summation, our performance tool not only speeds up our testing process, but also helps locate and fix the problems on your pages. With this tool, your entire team can have quick access to page performance reports. Having a quick and easy way to ensure mobile-friendliness for your web presence is a powerful tool in the face of Google's continued emphasis on mobile-friendly websites. As long as mobile access to the web continues to trend up, and there's no reason to believe it won't, ensuring a mobile-friendly website will remain a key aspect to direct SEO and SEM success, and in turn the overall success of your website and business.

Gediminas Stanaitis

Want more industry news?

comments powered by Disqus
Let's Talk