Mobile Website Optimization Tips

13 Tips To Make Your Website Mobile Friendly

Hey guys, as you probably heard about Google will release “Mobile Friendly” update on April 21. And If you think your website will be ok after the update then you are wrong!

According to Zineb Ait Bahajji, (she is the webmaster trends analyst at Google) the mobile update will be bigger than the Panda and Penguin updates.

Half of Residual Incomer blog visitors are using mobile devices. And about 30% traffic to niche websites coming from mobile as well. If my website isn’t mobile friendly after new Google update, then I will lose 30%-50% of my traffic! Or I will crush some competitors!

Are you listening to me now?

I did in-depth research and analyst of all of my website and decided to write some tips how you can prepare for the mobile friendly update.

In this article you will know:

  • Why should you optimize your website for mobile users?
  • My mobile optimization tips.
  • And things to avoid when you are creating a website for mobile.

I will do a case study here by optimizing and improving the page load size of the home page with one of my niche websites for mobile users. And here are the stats from PageSpeed (mobile: 37/100, desktop: 69/100), GTMetrix and Pingdom against the tested niche site after I updated the theme:

Mobile Optimization Case Study PageSpeed Before

Mobile Optimization Case Study Pingdom Before ResultsMobile Optimization Case Study GTMatrix Before Results

5 Reasons Why Should You Optimize Your Website For Mobile?

1. Increase Mobile Visits

If your website mobile friendly then you will beat your competitors and will rank better. This mean more traffic to your website.

2. Reduce Bounce Rate

If your website wasn’t mobile friendly yet, then you probably have huge bounce rate from mobile users. Update your website and you will see a big drop in bounce rate.

3. Higher Mobile Rankings

You won’t rank higher in desktop SERP, but you will rank better in mobile. Wait a second! This algorithm change won’t affect ranking in desktop!

Yes, according again to Zineb: if your website is not mobile friendly then it won’t impact desktop ranking!

4. Increase Conversion Rate

Don’t waste your mobile traffic! Take a look at your mobile website. Does your visitor can easy find and claim your offer?

Make your offer more visible for mobile visitors and make sure then can easily get it (press button, enter email and press button, call and so on).

5. Increased Revenue From Mobile Users

Here is not brainer! Better ranking, more visitors, better conversion rate leads to increase revenue!

How Can You Check if Your Website is Ready for Mobile Update?

Mobile-Friendly Test

Google was kind and release their mobile-friendly tool in 2014. Just enter your website address and click analyze. Google will right away tell you if your website is mobile friendly or will give suggestion what you should to improve.

Check Your PageSpeed Score

Google has another tool to help you! You can check website PageSpeed Score and tool will tell you what score your desktop, and a mobile website is. It also will give User Experience Score for Mobile version of your website.

If your score is too low, don’t worry because it will tell you what and how you will need to improve it.

13 Mobile Optimization Tips

1. Choose Correct Mobile Website Design Type For You

There are three ways how you can make mobile website:

  • Responsive Design – If you are using WordPress then the easiest and fastest way will be to find a fast, responsive template. It is a flexible layout that automatically  respond and resizes to the screen of device being used. (recommended)
  • Separate Mobile Website – You can setup a duplicate mobile site on a different URL. For example when people visit your website from mobile devices then it will redirect them to sub-domain for example “m.example.com” instead of “www.example.com“.
  • Dynamic Serving – It’s when each page of your website has different HTML and CSS files and depend on user agent requesting URL from the server it will serve specific HTML and CSS files.

If you are creating a website from scratch, then you can follow my article about how to build a website.

I found interesting flowchart from Distilled! The chart is showing when you should use which type of mobile website. Just share this page to unlock the flowchart. 

2. Get Responsive And Fast Template

Choose quickest responsive for your website. And you can find a lot of them for free. I just made a list of the best free responsive themes, and you can get it below.

Get the list of Free Fastest Responsive Templates!

3. Reduce Website Load Speed

Since mobile data is still expensive and Google considering your website load speed as well for ranking. You should minimize load speed of your website below 1 second! To check your current website speed, you can use Pingdom or GTMetrix tools.

Both of this tools will give your suggestion list of what you should add or improve.

Let’s talk about what you do to improve your website.

Below you can find results from PageSpeed (mobile: 44/100, desktop: 78/100), GTMetrix and Pingdom against the tested niche site after I updated the theme:

Mobile Optimization Case Study GTMatrix After Changing Theme

Mobile Optimization Case Study Pingdom After Changing Theme

Mobile Optimization Case Study GTMatrix After Changing ThemeHosting

First get fast hosting server. I suggest you to get HostGator or BlueHost. Why? Because there were the fastest hosting services for me.

Suggestion: If you have shared hosting then make sure you don’t have a bunch of different website shares the same IP address with you. Ask technical support to move you to the different IP address or get dedicated IP for your website.

Add Lazy Load Plugin

Lazy load plugin will help to load website before it will start load all images and pictures will be loaded only when they will be visible in the viewport.

Add Cache Plugin

Add and configure cache plugin like W3 Total Cache and you will able to combine and minify CSS and Javascript files, enable browser caching and etc.

Cache plugin will help you reduce HTTP requests, reduce page size and page load:

  • It can combine all CSS files into just one external file and load it ones.
  • The same it will do for all internal JavaScript files and place it on the bottom of the code so it will not block your content to load till this files loaded.
  • It will minify CSS and JavaScript files to reduce file size. What is minified? It’s the method when the tool is removing all spaces and comments in CSS/JavaScript files.
  • Enable browser cache and it will server to you cached html page version instead of PHP.
  • Optimize DB queries.

After I installed Lazy Load, W3 Total Cache plugin and configured correctly then I got amazing results from PageSpeed (mobile: 73/100, desktop: 91/100), GTMetrix and Pingdom:

Mobile Optimization Case Study GTMatrix After Installing Plugins And Configuring Cache

Mobile Optimization Case Study Pingdom After Installing Plugins And Configuring Cache

Mobile Optimization Case Study GTMatrix After Installing Plugins And Configuring Cache

Amazing! Isn’t it?

Why the page size numbers are so different? The theme I used serving cropped and not scaled images.

Can I achieve higher score? Yes, I can. In order to do it I will need to modify the theme and some plugins.

Content Delivery Network

CDN is basically hosting service which spread out your website content by different location around the world and page load increase since you will get page served from a server near you.

And if you already have hosting and you don’t want to change it then you can get some CDN service. I started using CloudFlare and it did speed up my website load by 20%, but I also tweaked each javascript file when and how to serve on page load.

4. Clean Up Code Errors

Maybe this is obvious, but you should check website code and clean up yourself if you have experience in coding or hire developer. Messy code usually means a slower website because browser will take more time to render page correctly.

5. Improve Your PageSpeed Score

Like I wrote above just go to Google PageSpeed Tool and check list of suggestions to improve for your website. And here is some of them you should to fix:

  • Logo – Website logo should fit in mobile screen and don’t mess the layout.
  • Menu – Should have different layout for mobile devices so it won’t mess the rest of layout. And people should easily click on each element of the menu.
  • Touch elements  – Touch elements shouldn’t be too close. Google wants space between minor touch element 12px to 20px and 32px spacing between major touch elements.
  • Font Size – It should be 16 pixels. Adjust the size as needed based on properties of the font being used.
  • Number of Fonts – You should restrict number of fonts used on your website (will help reduce speed as well). Otherwise it will lead to messy layout.
  • Vertical Space – General recommendation is to use the browser default line-height of 1.2em.
  • Screen Layout – Make sure website layout fits in mobile device screen and user won’t need to scroll side-to-side to read pages.
  • Links are too Close – On mobile devices links should be easy to tap with your fingers and this means the links should be big enough and accessible for user to click on it with a thumb.
  • Mobile Viewport isn’t Set – Your website width should automatically adjust based on device it’s loading.

6. Optimize Images

Did you know that you are serving the same exactly images to your mobile and desktop visitors? You don’t need to load 800px x 600px for mobile users and instead you should use smaller version of the image.

I can suggest you to use one of this plugins: WP Smish.IT or EWWW Image Optimizer.

But I prefer to use GIMP tool and manually change size and quality of each picture to maximize my results.

7. Access Your Mobile Web Search Visibility & Traffic Behavior

Go to Google Analytics (if you don’t have it yet then you should set it up account) and check your mobile search traffic. You can track what queries are they using, on which page user landing, where do they click and so on.

You can just optimize or adjust most popular pages for mobile traffic for better conversion.

For example they are looking for a phone number of your service, move call button or phone number above the fold (area on the top of the screen which fit on the screen).

8. Using Mobile Friendly Pop-Ups

Some pop-ups don’t work correctly on mobile devices. Most of them won’t fit correctly on the screen or it will be hard to click on action buttons, exit buttons or text won’t be displayed correctly and you will lose your potential customers!

I suggest you to use mobile friendly popups plugins like OptinMonster and you will increase you conversion rate!

9. Add Structured Data

Have you ever heard about structured data and rich snippet schemas? You can improve website look in search and get boost in ranking and click through rate with structured data. Just use Google Data Highlighter tool to highlight element to be visible in Google SERP (Search Engine Results Page).

10. Optimize for Mobile Local Search

Google Local Business SERPGet Listed in Google, Yahoo, and Bing Local Section

If your website is a Local Business and you won’t to rank high across your competitions then you definitely should list your business in Google, Yahoo and Bing at least. This will help people easily to find you when the are looking for service which you are offering to them.

Usually search engines will display information like business phone number, address and etc.

And of course it will boost your ranking since your business will rank on the top of first page.

Suggestion: Add your website also to different business listing directories like:

Yelp, Merchant Circle, LinkedIn, YellowPages, Whitepages, Supermedia, Yellowbook, CitySearch, Mapquest, Biznik, Foursquare, ThinkLocal, CitySlick, YellowPages, SuperPages, Outside, Dex, BizJournals, TeleAtlas, JustClickLocal, Discover our Town, Metrobot, EZ Local and many others. And It will help you to spread backlinkins for your website too.

11. Make it Easy for Mobile Searchers to Call or Find You

Similar like in previous tip visitors should find information easily on your website. Make sure call button, phone number, address or other infiltration visible above the fold.

The tip #12 is new to everyone and this will help you increase your ranking! Just click like this article and unlock the content!

13. Optimize For Mobile Assistants like Google Now

You should utilize Google Now feature and markup your pages for easily interaction. I am not specialist in this area, but I found this presentation with slides and I think this definitely need attention to implement. Voice operated website or blog it’s pretty cool, isn’t it?

Avoid Next 7 Mistakes

1. Duplicate Content

Don’t implement mobile website on a different domain, subdomain, or subdirectory from the desktop site. If you went this route then you should mark them as rel=”canonical”.

2. Blocking JavaScript, CSS, and Image Files

Check your “robots.txt” file on your hosting to ensure Google bot has full access to these elements.

3. Unavailable Videos or Content for Mobile Users

Make sure all your videos are playable on mobile devices because Google doesn’t wants to see is a video that is unavailable to mobile users. Many content types like for example Flash, don’t work on all mobile devices and it cause unplayable content.

Suggestion: You can use HTML5 standard tags for animation and use video embedding that is playable on all devices. Also Google Web Designer can help you to create animations easily in HTML 5 and your content will be more widely accessible.

4. Faulty Redirects

If you are one of this unluckiest people who have separate parallel mobile website when mobile users must be redirected to the corresponding mobile version of each page. And if your site redirects mobile users to the mobile site’s homepage (example below), this is a problem—for the Googlebot and your users because Google will demote your mobile page if it has faulty redirects.Example of Bad Mobile Users Redirection

5. Ignoring Mobile Friendly 404 Page

Of course you should show custom 404 page for desktop users, but if you have parallel mobile website then you should make one 404 page for mobile users as well.

6. Inappropriate Cross-Linking

Again this is another message to users owners of parallel websites when you do cross-linking then you should link mobile pages to another mobile page and don’t interlink to mobile pages with desktop pages.

7. Serving Desktop Optin Forms to Mobile Users

Stop serving your desktop pop-up optin forms to users and use mobile friendly popup like I mentioned in tip #7.

Conclusion

At the end I want to cover the major steps that you need to do:

Now with this ultimate mobile optimization guide your are ready for next Google update!

And If you have any other tips to add please share with audience in comments below!

Summary
Article Name
13 Tips To Make Your Website Mobile Friendly
Description
Are you losing big chunk of your traffic because your website isn't optimize correctly for mobile users? I made a guide how to optimize your mobile website.
Author

  6Comments

  1. Derek Smith   •  

    Nice Post Yaro, What is the best way to find if a plugin fits a mobile device BEFORE adding it? I have tried several plugins that I really like for my site, but once I look at it on my phone it does not work properly. Not sure if there is a good answer for this, but I usually will always test it out with a sample page before proceeding.

    Great article,

    Derek Smith

    • Yaro   •     Author

      Thank you Derek.

      You can’t really test it out before installing it if plugin developer didn’t provide any demo, but there is one way you can do.
      You can have test website for example http://test.example.com and place the same theme and plugins over there which you are using on your website, then block all bots and traffic through robot.txt and .htaccess.
      And here you go, you have test website where you can test plugins before installing on main website.
      I am doing this approach to test my plugin which I am developing before deploying on main website.

      Cheers,
      Yaro

  2. Derek Smith   •  

    Thanks Yaro, I have never tried that but that sounds like a great idea. I know myself I have a couple of random domains that I bought that I haven’t used yet, I have just been testing it on those sites, but your way seems much better.

  3. cheat of dragon city   •  

    If you’re in the market for a lawn mower, a new desk or a bike, you might
    consider buying used.

  4. clindamycin buy   •  

    Actually when someone doesn’t know then its up to other people that they will help,
    so here it takes place.

  5. unblocked games 666   •  

    If you are dreaming of becoming a surgeon, this surgical game Dark reduce 3
    gives you a golden chance.

Leave a Reply

Your email address will not be published. Required fields are marked *