14 Mobile Optimization Best Practices You Need To Know

14 Mobile Optimization Best Practices You Need To Know

By Robert Rhodes 3 years ago

It has been a while since Google began rolling out its mobile-first index.

When this was first announced, SEO professionals were scurrying everywhere to ensure that their site was in compliance with Google’s Core Web Vitals and best practice mobile development guidelines.

Optimizing for the mobile web is an entirely comprehensive sub-field within SEO, requiring specialist-level knowledge and its own best practices in order to be successful.

So much so, that many industries require a full, quality implementation of their website on mobile. And not everyone measures up.

In many cases, sometimes most sites fall short in fulfilling their goal to be compliant.

Clearly, this is a mistake because of the fact that mobile design is such a prevalent part of our digital society:

In order to take advantage of the absolute best possible online presence, you must optimize for many different types of devices and screen resolutions. Not just for desktops.

And now, Google is rolling out their desktop page experience update. But that update is beyond the scope of this article, although it does play into page experience overall.

To achieve the absolute best mobile implementation, it’s important to ensure that you create a mobile site that is in compliance with these best practices, and that also creates opportunities to increase your Core Web Vitals numbers.

By using a responsive design and not an m-dot subdomain, observing best practices with image creation and optimization, and observing compression and minification, you can achieve a quality mobile site that reaches as many people within your audience as possible.

That is where your mobile site is going to be successful.

1. Make Sure All Content Is The Same On Desktop & Mobile

The idea behind this best practice is to avoid duplicate content and accusations of cloaking.

To be safe, always make sure that all content is the same on the desktop version of your site as it is on mobile.

One of the best techniques to use to make sure this happens is responsive design.

Responsive design, for those who don’t know, involves creating a style sheet that uses “media queries” to automatically transition designs between a wide variety of platforms and devices.

If you want to squeeze out all possible speed and make your design lean and mean, consider looking into CSS sprites to reduce server-side requests.

2. Above The Fold Isn’t Gone Entirely

It’s important to remember that in a mobile environment, where things scroll endlessly, above the fold is not gone entirely.

It is still preferable to have at least some of the text content above the fold on a mobile design, to show someone that there is a reason to scroll.

The psychological benefits and desires of wanting to see what you offer are not gone entirely, so you do still have to optimize for this somewhat on many different mobile devices.

3. Use A ‘Top Down’ Development Approach

A “from the top-down” development approach means that you consider all potential consequences of each decision made in a design from start to finish.

You develop for mobile-first, rather than desktop-first, and then tacking on a mobile design after. This development approach is ideal because you don’t introduce issues into the final design.

Here’s an example: You create a desktop website. About three-quarters of the way through the process, you decide that you want to create a mobile site on top of it.

You create the mockup. But, after coding the mockup and moving throughout the transitions, you find a bug here. And you find a bug there. Then you find a bug over there. This is because the bottom-up approach does not work and causes scope creep.

This is the phenomenon where unseen issues crop up at the last minute, causing unforeseen bugs and increases in hours that were not originally provided for when the project was originally scoped out.

The truth is, if the top-down approach for mobile responsive design were considered straight from the beginning, these bugs and things that need to be worked out would not be popping up at the end, causing this dreaded issue.

4. Don’t Focus Exclusively On The Mobile Consumer, Though

As mobile and desktop merge, so too are the goals and desires of the users of these platforms.

When you focus on what your user wishes to achieve based on the platform, you create a holistic approach that reaches customers through your website more effectively.

Whether a user is purchasing a product or performing research on the services you provide, the blend of user goals and client acquisitions of the business will continue.

So much so, that specifically focusing on these ideals and values will become less necessary.

Not less important, mind you, just less necessary as this blend of mobile and desktop continues.

5. Use Responsive Design Techniques

The days of separate m-dot websites (m.example.com) are over.

There is no possible redeemable reason to use such an implementation in the mobile-first era.

The structure can be very messy, with multiple URLs creating duplicate content issues if they are not properly optimized.

There are many techniques available to ensure that an effective transition is completed, but otherwise, m-dot implementations have gone the way of the dodo with the advent of new technologies.

Today, the ideal implementation involves a responsive design. These designs use what are called media queries to define the display resolutions that the design will support.

Each separate resolution is what’s called a “breakpoint” in the design, or the point at which the responsive design transitions from one resolution to the next.

The benefit to using this kind of structure is that you do not run into the duplicate content issues that you would on an m-dot implementation.

Also, your mobile implementation will be on the latest technology.

6. Think ‘Code’ Instead Of ‘Images Everywhere’ To Increase Site Speed

Do you really need to use that two-color background as the 2-pixel wide by 1200-pixel high repeating background?

If you don’t, and you can code it instead, code it instead.

While something so small won’t make a major dent in site speed, the optimizations can add up as they are completed.

Next time you perform a site audit or otherwise create a website, think: “Do I really need this image here or can I simply code it instead?”

If the image really isn’t necessary, coding the object could help increase site speed exponentially, especially on-site designs that utilize an overabundance of graphics.

7. Customize WordPress For Mobile

There are many plug-ins available for WordPress.

So much so, that some even provide functionality for increased mobile compatibility.

The most useful plug-ins for this purpose are Duda Mobile, W3 Total Cache, as well as plug-ins for minifying HTML and CSS.

8. Don’t Use Intrusive Interstitials To Sell Your Product

Yes. We know. Your product is the greatest, most awesome thing to grace this planet. That’s why we are probably visiting your website and doing research on it before we buy.

But, we do not need to have an intrusive ad that blocks our activity throughout your site to bug us on the sale.

Where possible, keep the intrusive interstitials to a minimum, and keep the ads towards the bottom or off to the side with an option to click on the ad and remove it at the very least.

It is important to note that Google does penalize intrusive interstitials.

It is worth reading their developer guides along with their webmaster guidelines on this issue, as well as their blog post on this topic.

9. Check Your Site On Multiple Operating And Display Systems

Any SEO should know how to identify weaknesses in a website’s existing implementation, including where and how to find problems on various displays and devices.

You want to check your site on more than one operating system, as well as more than one display device. Doing this ensures that your site is compatible with as wide a range of displays and platforms as possible.

But, what if you cannot afford a thousand devices in order to check them?

This all comes down to a few applications. Yes! It’s possible to check these types of issues with more than one application.

Google’s Web Developer Chrome Extension

If you’re on a budget, using Google’s Web Developer Chrome Extension can help you examine how your site looks in many different screen sizes and resolutions.

It also offers the ability to see how your site looks through different device orientations, how touch inputs interact through simulation, and much more.

It’s also possible to use their debugging tool to examine a site’s code for problems.

BrowserStack

BrowserStack.com is a great tool for testing on many different browsers, operating systems, and display resolutions. They also have a Google Chrome extension you can take advantage of for this purpose.

You can test any site on over 2,000 real devices, browsers, and operating systems.

By having a paid account, you get unlimited access to their browser extension for testing.

Cross Browser Testing

CrossBrowserTesting.com is an alternative to BrowserStack that you can use for testing browsers and devices.

Offering more than 1,500 browsers and platforms for testing, its product offering is not short on what you can do.

Screenshot comparisons are possible with their tool, along with being able to simulate how your website behaves on real-world devices.

10. Follow Mobile Video Best Practices

Yes, there are mobile video SEO best practices! Google still needs to have some signals embedded on the page so its search engine better understands the video that’s on that page.

This article from Search Engine Journal’s own Matt Southern details Google’s five recommended video SEO best practices.

Things like on-page text, referral links, structured data, and video files are important.

There are also other things you want to watch out for as you create videos

For example, you want to make sure that your videos are accessible to the public. This means making sure that your YouTube privacy settings are set to public, and that you should have a Google-accessible webpage with that video.

With structured data, using the VideoObject data type on Schema.org is recommended.

Google recommends using the following mobile video best practices for a flawless mobile video implementation:

  • Using custom controls with a div root element, along with a video media element, and a div child element that is dedicated to video controls.
  • Using a play/pause video button.
  • Ensuring that the user can seek backward and forward.
  • Their comprehensive technical implementation of a mobile video is second to none and walks you through the process step-by-step.

As Google says:

“If the user’s primary reason for visiting is for video, this user experience must become immersive and re-engaging.”

Aside from the obvious, other mobile video SEO best practices include:

Making it as easy as possible for Google to actually find your videos. This means:

  • Using a video sitemap: If you don’t submit a video sitemap, Google may not be able to find your videos directly. A video sitemap makes it even easier for you to submit this sitemap in Google Search Console, which makes it even easier for Google to crawl and potentially index your videos.
  • Don’t use complex user actions or URL fragments: If these are used to load your videos, it’s possible that Google may not find your videos at all, because these things on your page are too complex for Google to understand.
  • Use an easily-identifiable HTML tag: Some of the valid ones include video, iframe, object, or embed. It’s easier for Google to identify videos when they are embedded within common tags.
  • Make sure your videos can actually be indexed. It happens: sometimes somebody may make a change to a robots.txt file that blocks video files from being crawled (through no fault of your own…hopefully). If your videos were being indexed, and now all of a sudden they are not, it’s worth taking a look at your robots.txt file to make sure they are not being blocked.
  • Use Google-supported thumbnail formats: There are also thumbnail best practices that you need to follow in the above Google web developer documentation

Mobile video SEO is not always as easy as one may think.

While not every single box needs to be checked, there are things that could be detrimental to your mobile video crawling and indexing if they are not.

11. Use Schema.org Structured Data

Schema.org structured data is important for not only identifying pages on your site that have special, structured information the search engines need to see but when the mobile index comes into full play, expect to see an increased reliance on Schema.

This is a concise, easy method of understanding information that can then be translated into rich snippets in the mobile search results.

But, either way, it is this author’s opinion that Schema structured data be used even on desktop implementations because it can help you appear in rich snippet results based on your targeted keyword. This can help enhance the visibility of your site when implemented correctly.

12. Don’t Block Supporting Scripts Like JavaScript, CSS, Or Things Like Images

This should be common sense when developing sites for any platform, whether desktop or mobile, but some people still do it.

It is important to make sure that supporting scripts for your mobile design is not blocked, because this blockage can result in issues like mobile soft 404s down the line. It can also result in desktop 404s.

But, if you block these files from being crawled by Google, they cannot crawl these files to see that your website works correctly.

When they can’t do this, this can result in lower rankings because they can’t fully understand your website.

13. Image Compression And Optimization

For the mobile web, image optimization is a critical component to get right. This means that you must ensure that images are properly optimized for all image sizes on all possible resolutions.

It’s not possible to create one image and ensure that it is viewable everywhere. Well, you can. But it will look distorted on resolutions it was not made for.

Instead, using holistic SEO best practices and making sure that you create images that are high quality at every resolution but also load quickly is something that is recommended.

This is why there are several responsive design best practices that Google recommends using in order to optimize your images for the mobile platform. They recommend the following:

  • Use relative image sizes. If you use relative image sizes, you end up preventing them from overflowing the container tag that houses the image.
  • Use inline images. It’s possible to reduce page speed by ensuring that inline images are used in order to reduce file requests. These should be used on pages that may not be used elsewhere on your site.
  • For higher DPI devices, use the srcset attribute for images. This helps you add more than one image file for different devices.
  • If you are doing e-commerce SEO, you may want to make your product images expandable. Customers may want to enlarge the image that they are potentially purchasing on their device in order to see it better. So, providing this option makes sense.

The trick to integrating images in your mobile optimizations is: Striking a balance between image size, loading them on a mobile device, and ensuring the right page speed without lowering image quality on any major device that your audience is searching for.

14. Optimize Overall Page Size

Page size is a major consideration for a mobile-friendly website. To be truly mobile-friendly, page size must load fast. To do this, optimizing the overall DOM size is necessary.

To do this effectively, you must take into consideration not only what I discuss in the above link, but also the following:

Don’t Use Unnecessary Custom Fonts

Using unnecessary custom fonts can complicate your page load process and increase the number of scripts that are required in order to process your page.

This translates to increased page load time and can increase your Core Web Vitals scores out of the desirable range.

Where possible, use system fonts instead and you can bring the impact that this causes down to a minimum.

Optimize Your Images

You also want to make sure that you optimize your images while preserving image quality. It’s not a professional result if someone arrives on your site and your image’s quality is grainy because of over-compression, you have not achieved the best result.

Ideally, you should be using image file sizes that are in line with what will produce the highest quality on the mobile devices that your site is optimized for while making sure that you don’t dip below that quality point.

This is a delicate balancing act and requires someone with expertise in optimizing images in order to arrive at the desired results.

Reduce The Amount Of Resources The Overall DOM And Critical Rendering Path Need

The more resources that your page needs in order to render, the higher your page download speed will be. You should never need more than 10 plugins (max) and three to four script files in order to process a webpage.

This author has seen situations where there are 160 plugins loading and the page file size is 10 MB. This is absolutely not where you want to be.

To be the most effective, this author’s opinion is that pages on a WordPress site should never exceed 150-250 KB – on average – and should not include more than five to seven resources max (CSS, external font if needed, an ad file, a JavaScript file, and three plugins). If you require more, then you may not be as optimized as you think.

And, don’t underestimate the savings that utilizing system fonts over external web fonts will save you.

Minify Your Pages

The process of minification on your pages involves compressing your files in order to save space and reduce their overall page load times as a result.

Using minification as a process will help you get rid of unwanted white space in your code, and compress that code so that it takes up the absolute least possible space necessary.

Ideally, the best process will involve no plugins. You would want to hire a developer to manually minify your pages.

If you’re already overloaded with plugins, adding another one to minify your pages is a bad idea. In these cases, you would want to use a professional-level developer in order to ensure the best result.

If you have minimal plugins already, then using a professional developer for this task will help you achieve even better page load times and Core Web Vitals scores.

If you absolutely must use a plugin, just be sure to use it as a temporary measure until you can have a professional developer go in and manually minify your code.

Mobile-First Is Here; The Need For Implementation Has Reached Critical Mass

With the arrival of Google’s mobile-first index, implementing your cross-platform, cross-device, cross-compatible website has now reached massive priority.

This means that the longer you delay, the more that not having just a mobile implementation, but not having the right mobile implementation is going to cost you in many ways.

Not just rankings.

If you haven’t yet made the jump to mobile, why not?

More Resources:

Featured Image: Dragana Gordic/Shutterstock

Tags: , ,