Is Mobile Friendly “Friendly” Enough?

Is Mobile Friendly “Friendly” Enough?

As of April 21st Google started considering mobile friendly as a search ranking factor, which is wonderful news! With majority of the world viewing websites on mobile devices this is a great way to encourage those that haven’t made the jump to mobile to join the rest of the Internet. While talking with a co-worker today we were discussing a site and wondering why the page was so slow on a mobile device. The performance metrics were satisfactory for a cable connection speed, but on mobile connections it was considerably slower. It didn’t take long to realize that while the site was mobile friendly in the sense of design, it wasn’t mobile friendly in the sense of data/network usage.

Takeaways

  • Mobile friendly is about design AND data/network usage.
  • We have tools available to us now that will help measure data/network usage.

We know already that Google is gearing up to consider site performance as a factor in search results and that they care deeply about making sure that websites load fast for people, based on the new tool they are using to strip down sites for people with slow connections. This is also made clear through the numerous articles about performance best practices that they provide. Majority of these articles talk about reducing the file size and optimizing the network usage for the site to allow the “critical path” content to load as fast as possible. This seems to be a recurring theme for Google and may end up being what they use to determine if a site a “slow site".

While there are plenty of questions we can toss around, one thing is certain: in order to create a great user experience a website needs to be mobile friendly in terms of design and data/network usage. Two questions came to mind:

  1. How do I make sure that my site is holistically mobile friendly?
  2. What tools do I use to ensure that I’m achieving a mobile friendly website?

Questions to Ask

The best way to implement a mobile friendly site is to have performance in mind from the beginning. When first start talking about the project, have a thorough conversation with the developers and designers about these questions:

  • What’s the performance budget for the project?
  • From the total budget, how much is dedicated to images, fonts, CSS, JavaScript, etc?
  • How many HTTP requests should be made and can we reduce the total # of requests?
  • How can we reduce the page size for mobile devices? (Reduce # of image requests, fonts used, etc.)
  • Can you export small icons, logos, and other smaller images as SVG?
  • Should we implement <picture> for responsive images or <img srcset>?
  • If you have an image rotator or large hero image at the top of the page can you use WebP?

These are all great questions to get the team thinking about their impact of the performance of the project. After the page size discussion it’ll be just as important to talk about network usage:

  • Can we implement CDNs to serve static content?
  • Are we using browser caching?
  • Is GZIP compression being used?
  • Are only the resources needed being downloaded?

These questions are a great way to make sure that the user’s network usage is optimized for the project. To dig in a bit deeper with the developers you may discuss any AJAX loops and if they are needed, especially for mobile devices. Every request made has an impact on the network utilization for the user and reducing network utilization will help with their monthly data bill and device battery life.

Tools to Use

Asking these questions and implementing these techniques is wonderful but there’s nothing like see a huge drop in metrics data to satisfy the inner performance beast in you. To do that there are a couple of tools we can use to test data/network usage:

Chrome Dev Tools

Chrome dev tools has an incredible feature that I’ve discovered over the last couple of months. Open up chrome dev tools and choose the Audits tab at the top. There you’ll see a couple of options: Network Utilization and Web Page Performance. Live on the wild side and choose both, choose the Reload Page and Audit on Load option below, and hit that Run button. Once it’s finished you’ll see different suggestions on how to improve network utilization and web page performance. The Network tab in dev tools also provides great information on how the page loads, what resources are taking the longest to load, which resources are heavier to load in terms of size, and what resources are being cached. You can even get a filmstrip view of the page loading in Chrome Canary, which I wrote about in my previous blog post.

Image of dev tools Audit tab.

WebPageTest.org

WebPageTest.org can give you information about CPU utilization and Bandwidth In. Just run a test by inputting a URL and clicking Start Test. After the test is done running click on the waterfall image and scroll down to the Connection View. You’ll see plenty of information about each connection and see if any resources are causing network issues. You can also use WebPageTest.org to see how much it costs on a mobile connection to view the page by clicking on the $ signs under the Cost colmun of the metric data. WebPageTest.org also shows you a lot of data on the page size of your site, what percentage of the page size is images, JavaScript, CSS, etc., and the waterfall chart is especially helpful in determining which resources could be optimized further.

Image of WebPageTest.org network data.

The New Mobile Friendly

For grins pull up your site and use the dev tools and WebPageTest.org tool to see how your site is doing with data/network utilization! It’s a safe bet that we will be seeing a move towards this frame of mind over the next year or two. In order to have an amazing mobile user experience it’s important that the design and data/network utilization are mobile friendly!

Share with me your thoughts by using the Comment on Twitter link below. What did these tools reveal to you?

Web Performance IO
Hey There!
What is This?