Optimizing your mobile site is more than just search engine optimization (SEO) or making sure your content looks acceptable on mobile devices. There are a number of specific areas in which a little attention to how your website’s mobile counterpart is created can go a long way towards improving performance as well as ranking. From the common sense to the not-so-obvious, these seven tips cover a cross-section of areas where you can make measurable gains.
1. Use Google's “Mobile-Friendly Test” to check your site.
Google’s Mobile-Friendly Test is a fantastic tool and a good place to get started. After giving your site’s URL, the tool will tell you if your site is mobile-friendly as well as show you how Google sees your page through the eyes of a mobile browser. It will even alert you to page elements that cannot be loaded, allowing you to quickly ensure your mobile display is as complete as possible.
2. Optimize for search engines.
True of non-mobile sites as well, but especially important for mobile, always ensure that search engines can crawl your content. Many webmasters will block images, CSS and JavaScript from search engines in their robots.txt files. This prevents crawlers from seeing them, however, and rendering your mobile site as intended. Google provides a tool called “Fetch As Google” that can help.
Advanced tip: Don’t presume that search engines will be able to identify your mobile site. Include viewport data in your HTML to remove any doubt.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Test all of your media on mobile.
Some video files are blocked from mobile playback or may use a format not supported by many devices. Don’t presume that because it scales it will also play. These days, it’s also advisable to use HTML5 for media playback.
4. Check your redirects!
If your desktop site redirects users to the mobile site when it detects that they’re on a mobile device, ensure that the redirects -- including paths and query string arguments -- are correct. Simply redirecting every desktop page to the mobile home page results in search engines having just a single point of entry to your mobile site; this can sometimes confuse their crawlers.
5. Serve mobile content before ads.
This tip can be argued, but adding a mobile ad page before serving mobile content is generally a bad idea. This includes both advertisements and pleas to download a mobile app before proceeding to the actual mobile site. Many users will abandon a mobile site when presented with such a “speed bump.” Resist the temptation. Instead, use a banner rather than an interstitial or popup page.
6. Optimize your mobile pages.
Remember that a large number of your users on mobile devices are also on slower and sometimes unreliable connections like cellular. While desktop web pages should be well optimized, mobile pages demand it. Images should be as small as possible. Be mindful that the resolution of a mobile device may be significantly smaller than a desktop site. Take advantage of this fact and serve smaller images.
Advanced tip: If you have dynamic content generation for desktop and mobile, add a “Vary” header to your output to signal to search engines that they should re-crawl with mobile settings.
GET /page-1 HTTP/1.1
Host: <a href="http://www.example.com/" data-wpel-link="external" rel="nofollow noopener noreferrer" data-eid="publishing.library.7-tips-improve-mobile-sites-performance.external.link.click">www.example.com</a>
...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
6. Optimize your mobile pages.
Yes, this is the same tip as the previous one, but it’s so important that we felt it necessary to say it twice.
7. Think about URLs.
Google and all major search engines do not give any extra benefits for using separate URLs for mobile. That is, if your site is on www.example.com but your mobile site is m.example.com, Google neither penalizes nor rewards your search engine ranking. Use separate URLs if that is your architecture, but don’t feel that you must to get better ranking.
That said, remember, if your mobile and desktop sites are on separate URLs, search engines are going to index them separately. That also includes your reputation scores on these pages, which will be calculated separately. Higher-traffic websites might not care about this, but smaller ones might. You might want to avoid separate URLs for this reason.