Google is now factoring in mobile friendly web designs and mobile site speed into their search engine rankings. With the growth of mobile devices surfing the Web (some sites we’ve tested have more than 40% of their traffic from mobile devices) Google wants its search engine users to experience the full richness of the Web by rewarding sites with fast mobile-friendly designs.
Mobile Sites and Google Search Rankings
In June, Google’s own official blog mentioned future changes in search rankings for “misconfigured” sites for mobile users. Google outlines some common problems with mobile sites (or the lack thereof):
- Avoid faulty redirects (all mobile browsers to mobile home page)
- Smartphone-only errors (404 for smartphones only)
- Unplayable videos – avoid Flash, use HTML5
- App download interstitials
- Irrelevant cross-linking
- Slow page speed
Developers have reported that not having a mobile-friendly site could harm your search engine rankings.
Mobile Site Speed and Search Rankings
Google already factors in site speed in their search engine rankings. In August Google’s Matt Cutts confirmed that page speed affects search rankings across the board (meaning both desktop and mobile), according to an Examiner story. However, one empirical study from the Moz Blog found that search rankings correlated with time to first byte (TTFB) but not with page load time.
Google has updated their Pagespeed tool to help analyze mobile site speed, and gave some guidelines on making mobile sites fast. While mobile sites have gotten about 30% faster from 2012 to 2013, the mean load time for mobile sites is about 7 seconds. Like their desktop site speed rule, mobile site speed is now a factor in search rankings.
CSS @media Rules and Mobile Sites
Ideally web sites are designed in a “mobile first” fashion, with the mobile site designed first and the desktop second, not the other way around. A responsive site is one that “responds” to a mobile device and morphs the same content into a mobile-friendly format, linearizing the content and hiding some elements to better fit in mobile-friendly form factors. The preferred method of this hide and seek dance is @media rules. Display:none; and visibility:none; may hide elements, but used improperly still cause the target resources to download, slowing down the mobile experience.
CSS@media rules are the preferred method to dynamically adjust for mobile form factors using conditional CSS rules. By using these techniques and designing for mobile first you can help speed up the mobile Web, and ensure your mobile site isn’t penalizing your rankings.
Further Reading
- Cell Internet Use 2013
- 63% of adult cell owners use their phone to surf the Web.
- Changes in rankings of smartphone search results
- How website speed actually impacts search ranking
- Found that Google search rankings correlated with time to first byte in an empirical test, but not to page load time.
- Is the Web Getting Faster?
- Google Analytics Blog
- Making Smartphone Sites Load Fast
- Mobile sites load in 7 seconds, Google’s Webmaster Blog
- Mobile Analysis in Pagespeed Insights
- Same Site Speed Ranking Factor for both Mobile and Desktop Says Google
- Google’s Matt Cutt’s confirms mobile site speed factored into search rankings.
- Velocity 2013 NYC Highlights
- Shows how mobile performance has become popular, and gives @media rules examples.
- Why Your Site Needs to Be Optimized for Mobile