Mobilegeddon: Be prepared for the Epic Battle with Google

Today is the day Google plans to unleash the mobile algorithm update. Google’s recent announcement of this stated “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.” This release quickly became dubbed intimidating names like Mobilegeddon and Mobile-pocalypse, and is expected to have a bigger impact on search rankings than previous algorithm updates like Panda and Penguin. In a research study by Potent, they tested the top 250,000 sites as ranked by the Majestic Million and Alexa and 10,000, or 40% failed in mobile-friendliness. *cue dramatic music*

Mobile Friendly Test

At Delphic, we’re not intimidated by Google’s bold statements or the already important consideration for mobile UX. We’re coding for mobile first, mobile search friendly, as a practice. We want to share our knowledge, tools and recommendations to help every site achieve the mobile-friendliness relevant to its audience. What follows is:

  • A review of what Mobilegeddon is
  • An outline of what data to measure and where to find it
  • Tests to conduct to get an idea of how much your site will be affected
  • Tips and best practices to enhance your site’s mobile-friendliness

Mobile Algorithm Key Information

Here’s a few key things to keep in mind before we get started.

  • All about mobile; but keep an eye on desktop rankings. The update is focused on making mobile search and browsing easier for the mobile user, but mobile friendliness may affect desktop rankings as well. *Update: Google released an FAQs document on 4/21 that states that desktop rankings will not be affected.
  • It’s unknown how long it can take to recover after a hit from Mobilegeddon. According to Brian McDowell, Director of Search Intelligence at Conductor, you may have to wait for Google to re-crawl all of your newly optimized pages again, which could take weeks or months. *Update: Google says the site will automatically be re-crawled and indexed after your site becomes mobile-friendly, but you can use Fetch as Google to expedite the process.
  • Google has released tests to see your site’s mobile-friendliness (test), tools to point out areas to fix (GWMT, PageSpeed Insights), and ways to measure impact (Google Analytics)

We’ve tapped a cross-section of Delphic experts to help shed light on this topic. So, without further ado, let’s get started.

Check Yo’self before you Wreck Yo’self

Brought to you by Chloe Yeung
Twitter: @seo_chlo

If you already have a responsive site or a separate mobile dedicated site, you’re on the way to achieving ultimate mobile-friendliness. However, it’s still important to do some recon to find your weak points #NeverStopImproving.

If you don’t have a website that is optimized for mobile (meaning your desktop site looks exactly the same on a mobile device but shrunken until its illegible) – creating a mobile-friendly site should be added to the top of your to-do list, right after running this next set of tests.

Step 1: Check your site on the Google Mobile-Friendly Test
The Google Mobile-Friendly Test identifies if a URL is mobile-friendly or not based on criteria such as how close the links are to each other, how large the text is, if flash is used, and other items. Note that this test is for a specific URL, so each page may have a different score (note: it may not be practical for large sites).

Step 2: Use Google Webmaster Tools’ Mobile Usability Checker
The Mobile Usability report in Google Webmaster Tools checks all the same things as the Google Mobile-Friendly Test, but for your entire domain. It tells you how many errors there are and which pages those errors occur on. Here’s a sample view.

Step 3: Check Your Site on PageSpeed Insights
Run a free PageSpeed Insights test to see how long a page of your site takes to load. There’s even a Chrome browser extension that is free to use. Take note of results of the homepage and other important pages, especially pages mobile visitors might find. The optimum page load speed on mobile devices is less than one second. Note that optimizing items “above the fold” takes precedent to things lower on the page, so progressive image rendering might be a reasonable option.
Some items that you should look at:

  • Image compression
  • Javascript and CSS file reduction
  • Multiple server requests for assets

Step 4: Check Your Site on WebPageTest.org
The WebPageTest will give you detailed information, even a recording, of how your site loads. It’s like the Page Speed Insights test with a grading scale we can all understand A – you’re awesome!, F- Fail!. It also will provide more detail about the files that a visitor has to load to view a page in a special “Waterfall” view which helps you identify where a slow-down occurs and more. Here’s a guide Nicole Hess has previously shared for some of the great findings from this tool. Also, the following section about “optimizations” is in large part to analyzing the results from this tool.

Get your Data

Step 1: Estimate How Much of Your Traffic is in Jeopardy
Go to your Google Analytics account and look at organic traffic coming from mobile to estimate how big of an impact Mobilegeddon will have on your site. For these purposes I took a 3 month sample of data, but it may be more valuable to review a longer timeframe.

Navigate to Source/Medium, change the Primary dimension to Medium, and select Organic. Next, select Device Category as the Secondary dimension.

In this example, organic traffic accounts for 47.65% of the site while mobile traffic accounts for 10.84%. By multiplying (47.65*.1084), you’ll receive the percent of total website visits (5.17%) that comes from organic mobile traffic.

Step 2: Meas
ure Mobile Engagement
Below are links to two Custom Mobile Dashboards for Google Analytics to help interpret how mobile users interact with your website. This is important not only to measure potential impact of Mobilegeddon but to also develop targeted plans to optimize to mobile visitors.

Mobile Code Optimization

Brought to you by Nicole Hess
Twitter: @nicolecherieh

and

Bryan Bohl

If your site is deemed not mobile friendly, there are a few quick updates you can make to improve your mobile friendliness and mitigate the damage to your rank. These steps are also must-do’s to ensure your site is mobile friendly, so worthwhile a quick check either way.

1. Blocked Resources

When Google crawls a website it needs to be able to access the files and assets that a typical visitor uses to view the page. This includes text, images, styles (CSS), JavaScript (JS), among others. This is different than in the past and given that Robots.txt files aren’t frequently edited, chances are many Robots.txt files may still be blocking these resources.
Recommended Action
Ensure there is no line in the Robots.txt file (mysite.com/robots.txt) blocking these resources. For example, the line “Disallow: /images/” is blocking the images from GoogleBot and should be removed.
Impact: High; Priority: High

2. Set a Meta Viewport

A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen (meaning teeny-tiny print and a hard time clicking on any one item). Setting a viewport gives control over the page’s width and scaling on different devices.
Recommended Action
The best fix is to develop a mobile optimized version of site and ensure the proper meta viewport is set for mobile devices. Secondarily, and how a “quick fix” can be done, is the meta viewport can be set to a specific (fixed) width, such as width=320 or width=1024. Google acknowledged this option stating that “While this is generally discouraged, it can be a useful stopgap to ensure pages with fixed dimensions display as expected.”
Impact: Low; Priority: High (Specifically identified by Google for mobile-friendliness)

3. Mobile 4XX or 5XX errors

Having missing content (404 or 410 errors) or blocking content via a 5XX status code is an issue on desktop as well as mobile devices. Simple as that.
Recommended Action
Review smartphone identified 4XX or 5XX errors in Google Webmaster Tools. The Screaming Frog website spider tool can also crawl the site from GoogleBot for Smartphones to find any such errors.
Impact: High; Priority: High

4. Image Compression

All too often the process of adding an image to a site goes something like this – photo is taken, photo is uploaded to computer, retouched in PhotoShop, file is “saved for web” and the content manager adds photo to website. Done, yes, but not optimized. In fact, there are many easy solutions to optimization at any stage, we’ve summarized them in a previous blog post.
Recommended Action
Review results from PageSpeed Insights and WebPageTest. If they both point to the need for optimized images, you can download the optimized images right from either test. To continue to ensure your images are optimized, SmashingMagazine also has a great blog on it.
Impact: High; Priority: High

Website Speed

The ideal time it takes for a website to fully appear “render” in a browser on a smartphone is within 4 seconds. This is relatively the same for desktop sites, however the website speed can vary depending on if a visitor is on desktop or a smartphone, because a smartphone has the additional limitations which may be caused by a phone’s memory and CPU. Thus, it is important to optimize the site, server, and content to be delivered as quickly as possible leaving ample time for a mobile phone’s network connection and processing speed, as these can vary greatly. Below are common areas of optimization that can be identified through the aforementioned tests (PageSpeed Insights and WebPageTest).

1. Resources Delaying Rendering

The homepage content above the fold should not be delayed due to the rendering of resources, such as CSS or JavaScript. When the above-the-fold content is delayed a second or more, a visitor potentially sees a blank page until after the content below the fold or features (such as image sliders) load. You may find individual JavaScript files that take much longer to load than others, that go through redirects (highlighted in yellow in WebPageTest) or appear to completely block other resources for loading until they are fully loaded.
Recommended Action
Move any resource that seems to be getting blocked to the bottom of the . Also if it’s allowed on a client’s site to use CDN (Content Delivery Network) to bring in specific resources (mostly JavaScript). This will allow the files to be brought in off-site and load in parallel with the rest of the JS files.
Impact: High; Priority: High

2. Reduce Client-Side Processing

Each request of a mobile device to process elements (such as JavaScript) slows down the loading of the content depending on the element.
Recommended Action
The use of JavaScript and function of each element should be reviewed to ensure it is absolutely necessary and is inlined if possible as well as being the most optimized version to ensure the quickest loading and the fewest server requests.
Impact: Medium; Priority: High

3. Reduce Dependencies

Fewer files to download means fewer HTTP requests and faster loading times. As previously noted there are many JavaScript files that not only are loaded before content but also create the need for individual HTTP requests.
Recommended Action
Combining and optimizing files could reduce the number of requests which can even further improve the page speed.
Impact: Low-Medium; Priority: Medium

4. Optimize CSS Files

Compacting CSS code can save many bytes of data and speed up download and parse times.
Recommended Action
Minifying CSS resources. CSS files may also be inlined in the file to reduce file length and potentially save load time.
Impact: Medium; Priority: Medium

5. Leverage Browser Caching

Repeat visitors anticipate a website to load faster than the first time they v
isited the site. Thus, it is recommended to optimize for this expectation.
Recommended Action
One method to reduce page load time for repeat visitors is to reduce the load times of pages by storing commonly used files from your website on your visitor’s browser.
Impact: Low; Priority: Low

6. Reduce server response time

Ensuring your server responds in a timely matter is much the same for desktop as it is mobile visitors. There’s many different types of server and hosting solutions so its best to start with 1.) identifying how quickly your server responds and 2.) identifying what type of server/hosting solution you have if it needs to be faster. Google recommends your server should respond in under 200ms. Anything slower than that, look into upgrading your server solution.
Recommended Action
Test your server response time via WebPageTest. This blog offers a great analogy of hosting solutions compared to homes (from apartments to condos to single family homes) so we can all understand what our IT professional wants to tell us.

7. Use legible font sizes and appropriate tap sizes

Lucky #7. Using smartphone legible font sizes and appropriate tap sizes usually means your site is responsive or mobile already. However, sometimes links are placed too closely together, navigation drop-downs are too small or other website features aren’t built mobile friendly and cause a red flag.
Recommended Action
Develop a mobile optimized version of site and ensure legible font sizes.
Impact: High; Priority: High (Requires dedicated mobile site solution)

Next Steps

Ultimately, creating a site that is optimized for mobile (whether it is responsive or a dedicated mobile site) and implementing SEO for the mobile site will ensure your site is as mobile-friendly as possible. Even if you already have what you think is a mobile-friendly site, start with the following checks:

  • Google Analytics – Measure mobile traffic and mobile visitor site engagement
  • Google Mobile Friendly Test – Determine likelihood of being hit by mobile algorithm
  • PageSpeed Insights and WebPageTest – Find quick wins to help your site be quicker and mobile-friendly

Then move on to the “Mobile Code Optimizations” such as checking the Robots.txt file, setting a Meta Viewport and Image Optimization. After that, you should be on your way to creating the ultimate antidote to Mobilegeddon, a fast, mobile-friendly site.

 

 

« Prev Article
Next Article »