Tips for Mobile Site Optimization

If you haven’t done so already, where can you go for some tips that will help make your site mobile friendly and improve the user experience?

One good place to start is the Google Developers Mobile Guide. Google has done its best to make the site work well for beginners and developer pros alike. The site is organized into three basic sections:

  1. Links to check to see if your site is mobile friendly. Even if your site passes the test, if there are issues with how Googlebot loads the page during testing, specifics will be provided.
  2. A section on customizing sites that use popular Content Management Systems (CMS). The Guide includes specific tips for Joomla, WordPress, Magento, Drupal, Squarespace and many others.
  3. A section devoted to implementing best SEO practices for mobile. Once your page layout is considered mobile friendly, one key area you need to keep an eye on is making the mobile site as fast as possible. Slow site speed can have a negative impact in your search rankings, regardless of device. But, because mobile connection speeds are often slower than desktop connections, slow mobile sites can lead to high bounce rates, low user engagement and poor conversion rates.
  4. A few mobile speed tips:

  5. Focus on the speed of the “above the fold” content. While you can call cascading style sheet (CSS) files and external JavaScript files for other parts of the page, compact above the fold styles and JavaScript can be included right in the code of the page to eliminate the need to fetch additional files until after the content above the fold loads. Content needed below the fold can be rendered with external files – just be sure to keep their size to a minimum. The user experience is that the page seems to load faster because the above the fold content is visible sooner.
  6. Optimize images to make their file size as small as possible while not sacrificing image quality. See 18 Image Compressors to Speed Up Your Website for some useful tools.
  7. Avoid CSS import (@import) directives. These allow one stylesheet file to import rules from another stylesheet. In doing so, they require additional roundtrips to the server. The CSS stylesheet with the @import rule itself has to be received and parsed first before fetching the referenced import file(s) from the server.

More resources for mobile optimization:

Leslie LewisAbout Leslie Lewis, Director of Paid Search – @Website Publicity

As  Director of Paid Search, Leslie Lewis leads the agency’s efforts in all online marketing, overseeing campaign management and strategy for search, social and mobile media buys.

Be Sociable, Share!