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:
5 Reasons Why Should You Optimize Your Website For Mobile?
- 1 5 Reasons Why Should You Optimize Your Website For Mobile?
- 2 How Can You Check if Your Website is Ready for Mobile Update?
- 3 13 Mobile Optimization Tips
- 3.1 1. Choose Correct Mobile Website Design Type For You
- 3.2 2. Get Responsive And Fast Template
- 3.3 3. Reduce Website Load Speed
- 3.4 4. Clean Up Code Errors
- 3.5 5. Improve Your PageSpeed Score
- 3.6 6. Optimize Images
- 3.7 7. Access Your Mobile Web Search Visibility & Traffic Behavior
- 3.8 8. Using Mobile Friendly Pop-Ups
- 3.9 9. Add Structured Data
- 3.10 10. Optimize for Mobile Local Search
- 3.11 11. Make it Easy for Mobile Searchers to Call or Find You
- 3.12 12. Create Mobile App
- 3.13 13. Optimize For Mobile Assistants like Google Now
- 4 Avoid Next 7 Mistakes
- 5 Conclusion
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?
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.
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:
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
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.
- 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:
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.
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.
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
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!
12. Create Mobile App
Create mobile app for your website and you will get more traffic from your app and you can get even better conversion in your app. According to this article new algorithm change will start indexing app content and show better your application in search results. It also will impact mobile ranking because your website will tied to the app.
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”.
Check your “robots.txt” file on your hosting to ensure Google bot has full access to these elements.
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.
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.
At the end I want to cover the major steps that you need to do:
- Get fast responsive template (Get list of Free Fastest Responsive Templates)
- Reduce page load speed and page size by enabling cache, minifying CSS/JS files and reducing images size. And consider to get better hosting.
- Make sure your website pass Google Mobile Friendly test and get highest PageSpeed Score.
- And improve user experience of your mobile visitors!
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!