Google’s New PageSpeed Insights Tool: Bringing Performance to Responsive Web Design
Last week, Google announced an update to their PageSpeed Insights tool in an effort to “speed up the mobile web.” With this new version, their tool will now compare the speed of your website on mobile versus its speed on desktop and assign a score to each based on their performances. As a developers tool, Google’s PageSpeed grader performs key analyses on a website’s coding techniques, and provides suggestions for improvement based on your results. Web developers and marketers should take note of these criteria, as this update represents an important shift in how websites will be built in the future.
Google has already made it known that they think websites should be built using responsive design (RWD). However, with this update, they’re also putting an emphasis on performance and leveraging coding techniques to optimize responsive websites. Building a responsive website is no longer as simple as developing a responsive presentation layer template (which only solves how your site looks). While that is an important component, it’s equally important to address overall performance by combining server-side coding techniques in order to cut-down on page load times, and deliver the optimal code-base for each device type. This approach is known as RESS design, or Responsive with Server-Side components.
RESS can be considered a “next generation” of responsive design because it combines both a responsive presentation layer with server-side coding techniques. By using server-side coding, a web server can detect what kind of device is accessing your url, and then deliver an appropriate experience based on predefined factors (device type, screen size, connection speed etc.). For example, if a smartphone is coming to your website, you want to deliver much smaller image sizes (usually no more than 250 KB) and less HTML/CSS files, so that your website loads as fast as possible. However, when a desktop/laptop device is coming to your website, you want to deliver much larger images so that they look crisp on a bigger screen. A RESS design is smart enough to detect these different devices and deliver an optimal experience for the end user.
Taking a look at Google’s PageSpeed Insights Tool
We ran www.bostonglobe.com through Google’s speed tool and received the following results. We can ignore the scores for now, but what’s important to notice is Google’s strong emphasis on performance based on the website’s code. All of the tests performed analyze the Globe’s coding techniques directly (leveraging browser caching, optimizing images, minimizing HTML and JavaScript etc.). This tool is very developer focused, and provides direct feedback and techniques, which developers can use to improve their website’s performance.
A complement to Google’s Tool: Mobilegrader.com
Mobilegrader.com is a tool built by Bluetrain Mobile that focuses more on the business value of web performance, rather than the hard code of a website. This is a great tool to complement your use of Google’s Page Speed grader, because it gives key metrics that marketers want to know, like page load times and a thorough breakdown of your scores (see below).
Here you see a breakdown of your website’s metrics, along with an explanation of what it means for you as a marketer or business owner. By evaluating your page load times compared to other popular websites, and checking for hover states or Flash, Mobile Grader gives you clear insight into how your website is performing and where you can make improvements for the end user. More test results seen below.
Conclusion
Using both Google’s Page Speed tool and Mobile Grader, developers and marketers can identify key areas of improvement on their website and focus on making their site perform across any device. As responsive web design continues to gain in popularity, it’s increasingly important to include server-side coding in your designs. This will enable you to focus on your site’s performance, not just how it is displayed across different devices. Both factors are equally important, and both should be equally considered in any web design.
Try out both tools and let us know your thoughts below.
