Published on April 14, 2023

Mobile-First Indexing and JavaScript—Challenges and Opportunities

Mobile-first indexing

Over the past few years, the use of mobile devices to access the internet has skyrocketed.

According to a report by Statista, as of 2022, mobile devices generated 59.16% of global online traffic.

As a result, Google has made significant changes to its indexing process to ensure that mobile users have a better experience when searching online, introducing a mobile-first indexing approach.

However, what does this mean for websites that rely heavily on JavaScript for their content and functionality? In today’s article will explore the implications of this new indexing approach, how you can take advantage of this new format, and the challenges you’ll need to overcome to maintain performance.

What is Mobile-First Indexing?

Mobile-first indexing refers to a shift in the priority of content indexation. But before we can explain what has changed in this rollout, it’s crucial to understand how Google’s indexing process has worked so far.

Without getting into too many details about crawling (which you can learn more about in our indexing process breakdown), Google can request your pages through two user agents: Googlebot desktop and Googlebot mobile.

Illustration of how Google Indexing System works.

Source: Google’s Documentation

When the crawler finds your pages, it doesn’t need to take the information from both versions because these are supposed to be identical pages. Instead, it only takes into account one version and adds that content to its index. This is why it was a desktop-first approach to indexation. Now, that is not the case.

The shift means that mobile versions are the ones getting indexed and evaluated, and based on your mobile site’s performance, both desktop and mobile versions will be ranked in the search engine result pages (SERPs). (Note: This does not mean that there are two different indexes. It means that, no matter if your desktop’s SEO is on point, if your mobile site is lacking, you’ll be judged by that results.)

Although it doesn’t sound like much, for websites showing less content on mobile or those performing poorly on mobile optimization, it means lower rankings and a big shift in position across the SERPs.

Of course, it also means that those providing great user experience (UX) and content on both versions have a big opportunity to grow their organic performance and secure their positions.

That said, for JavaScript-heavy websites, the story is a little more complicated.

The Challenges of Mobile-First Indexing for JS Websites

When it comes to indexing JavaScript, Google needs to add an extra step.

Before it can actually visualize the page’s content, the crawler will send the URL to a renderer component. This renderer uses an evergreen instance of Chrome and Puppeteer to download all necessary resources (HTML, CSS, JavaScript files, etc.) to render the page.

According to recent studies, JavaScript takes 9X longer to crawl and index than its static counterparts. Keeping that in mind, we also have to remember that Googlebot mobile tries to mimic a common mobile user, which means that, unlike its desktop crawler, it counts with fewer resources to handle your dynamic content. This makes it even more difficult for Google to access, render, and index content.

In addition to it, mobile devices have their own limitations that’ll take a toll on your page speed and core web vitals (CWVs) scores:

  • Mobile devices have less processing power than desktops, taking it longer to render your page.
  • They don’t always count with the best internet connection, so downloading your files takes longer, impacting your core web vitals.
  • Mobile devices can’t multithread, so render-blocking resources like JavaScript are harder to handle.

It’s common for JS sites to suffer on their mobile scores, but in the mobile-first era, low mobile performance equals low rankings.

We’ve discussed several strategies you could implement to optimize your mobile JavaScript performance, but there’s only so much you can optimize before hitting the ceiling.

The good news is that not everything is a con. In fact, SPAs and JS-based websites can take this as an opportunity to take on the competition by using dynamic rendering.

The Big Opportunity For JS Sites in the Mobile-First Indexing Era

Dynamic rendering has been the main recommendation from Bing and Google to handle JavaScript, and with Prerender, it can be accomplished in a couple of hours. After installing Prerender’s middleware on your site, it’ll crawl your site, generate a fully rendered and functional snapshot of your pages, and store it in its cache.

Then, whenever a crawler requests a page, Prerender will identify the user agent and send the corresponding snapshot to the search engine, skipping the entire rendering delay and increasing your site’s indexability to 100%.

The best part is that, as long as your page is responsive (if not, follow our mobile-friendless guide to achieve it), you’ll always get near-perfect CWV scores. Plus, you can enable mobile adaptiveness if you serve a different page to mobile crawlers.

If you want to try Prerender, you can sign up for free and get your first 1,000 pages rendered without any commitment or learn how Prerender works. We pride ourselves on our transparency, so we encourage you to check out our documentation to understand everything Prerender has to offer!

Prerender

Prerender

Table of Contents

Prerender’s Newsletter

We’ll not send more than one email per week.

More From Our Blog

Tips for scaling content with programmatic SEO on JS-based websites.

Increased Traffic and
Sales Awaits

Unlock missed opportunities and reach your full SEO potential. When more web pages are crawled, it’s easier to index more of your site and boost SEO performance. Get started with 1,000 URLs free.