Mobile-First Indexing & JavaScript
If you have not heard about Mobile-First Indexing then you are by no means the only one. Outside of digital marketing circles, terms like SEO, site rankings, and page speed mean next to nothing. As a programmer, however, I would argue that it is in your best interest to learn more about how your websites are understood by search engines and affected by Search Engine Optimization. I believe doing so will expand your skill sets, improve your ability to communicate with marketing departments, and make you a more valuable hire. So, on that note, let’s take a look at Mobile-First Indexing and what that means for you as a coder.
What is Indexing?
Indexing is how search engines organize information about websites in order to serve up relevant webpages as quickly as possible. In order for a site to show up on Search Engine Result Pages(SERPs), it needs three things:
- To be found (via crawling)
- To be understood and analyzed (via indexing)
- To be served to the world (via search results)
Most of the magic happens during indexing when Google tries to understand the page by analyzing the text, metadata, tags and attributes, images and videos. Nearly every part of the webpage gives Google some clue as to what that page is about. All of this is in service of offering the most relevant and accurate SERP result possible based on the user’s query and intent.
Without indexing, search engine results would be slow and inaccurate, and no one wants that.
Mobile-First Indexing
With all of that in mind, mobile-first indexing is Google prioritizing mobile sites for their initial analysis and cataloging. They start by assessing the quality and authority of your mobile website first; if a mobile site does not exist, Google will then assess the desktop version of the website. Initially, Google had evaluated desktop versions first and ranked them accordingly, but in 2016, Google announced they were beginning to experiment with their indexing algorithms to make them more mobile-focused. They encouraged webmasters to start implementing more responsive websites, using structured markup on both mobile and desktop versions, and including more content on the mobile sites. It was not until July of 2019, that Google officially started using mobile-first indexing for all new sites. Then in September of 2020, during the height of the pandemic, they made a full transition to using mobile-first indexing on all websites. Any webmasters and SEOs who had not seen the writing on the wall prior to this point certainly saw the impact in their analytics dashboards. For some businesses the drop in organic rankings happened nearly overnight.
Simply put, Google prefers mobile-friendly sites. If there are two high-quality sites on identical topics, but one has a mobile version and the other does not, the former will rank higher for the relevant keywords.
How JavaScript Can Impact Indexing
If Google cannot access and render your content, then your mobile site (or desktop site for that matter) is unlikely to get thoroughly indexed or deemed relevant to search queries. This is where web developers can play a key role as many of the best practices require someone knowledgeable of how things work under the hood, so to speak.
Generating Content with JavaScript
Any content that is generated by JavaScript adds an additional step in the crawling / indexing cycle as Google must first render the content in order to analyze it. An example of JavaScript generated content would be a list of items that is populated with data in a database.
let section = document.querySelector(‘.section’);
let h2 = section.querySelector(‘h2’);
h2.textContent = ‘Loading Content’;
let p = section.querySelector(‘p’);
p.innerHTML = ‘Here is the content!’let ul = document.createElement(‘ul’);
main.appendChild(ul);
Because it can be resource-intensive to render a page, Google will often put JavaScript generated content in a queue to be rendered and indexed later. This can mean that on first pass through Google misses all of that valuable content found in those unrendered list items, ultimately resulting in the webpage taking longer to show up in SERPs.
JavaScript is costly because it first needs to be downloaded, parsed, and then executed. So it is best practice to not code vital information that is dependent on JavaScript. Google recommends instead that developers use code splitting which only sends the code when the user actually needs it.
Get Bethany Jones’s stories in your inbox
Join Medium for free to get updates from this writer.
Taking up Too Much Memory
When your JavaScript file has an abundance of variables and references, it can consume quite a bit of memory, resulting in memory leaks and slowing down the rendering of your site.
window.countNCrooks = function (n) {
let solutionCount = 0;
let board = new Board({n: n});
let allRows = board.rows();
let rowIndex = 0;
let colIndex = 0;
let visited = [];
let forksBoards = [];
let forksCoordinates = [];
…
return solutionCount;
};When coding, it is best to be as efficient as possible and avoid convoluted code filled with unnecessary variables, as seen above.
Slowing Down Execution with Unused Code
Often developers will use package installers like npm to quickly download and install dozens of libraries that they may not even need.
The downside to this is that these unused files take up valuable space and slow down the execution of your site or app. Developers can rectify this by using bundle analyzing tools to investigate what files and libraries their project does not need.
Not Minifying
All of those tabs and spaces make code much easier for developers to scan and interpret, however, much of it is unnecessary for browsers. Minifying is the process of removing all of that whitespace and unused code to make smaller file sizes which in turns improves rendering time and site speed.
You can see how much of a difference minification can make in just one file; imagine the impact it can have across an entire site.
Other Common JavaScript Indexing Issues
There are many other ways that JavaScript can impact the way a website or app is rendered and indexed, just a few of which are
- Using JavaScript versions or APIs that crawlers do not recognize
- Blocking files with robots.txt no-index directives
- Serving JavaScript files through HTTP while the website uses HTTPS
- Missing JavaScript bugs that stop the site from loading
- Serving wrong status codes that result in error pages becoming indexed
This list is not comprehensive in the slightest, but it gives you an idea of the various ways that your JavaScript can impact a site.
Why Should You Care About SEO as a Developer? (Isn’t that the Marketing Department’s Job?)
While much of on-page SEO falls under the purview of digital marketing professionals, the reality is that it is a team effort between both the marketing and dev departments. Understanding how indexing and SEO works means that you will make smarter decisions when planning your projects. It also helps you if you are ever running your own business or trying to get a website or app discovered online. Lastly, it never hurts to stand out from other applications. A web developer who understands SEO could be integral to smaller businesses who often want (or demand) that their employees wear multiple hats. Suffice it to say, it never hurts to know just a bit more.
