I started out in the SEO world back in 2007, wow, that was 12 years ago!?
Back then things were a lot easier, a lot more simple. Websites in particular were coded in HTML and CSS, and really that was all an SEO would need to learn.
In 2019 websites have moved into the modern era and with more websites using interactive features, the need for JavaScript has soared. It’s not just used by Developers anymore, SEO’s need to also embrace it and move with the times.
So first let’s explore the differences between HTML, CSS and JavaScript. The standout point is that HTML and CSS isn’t that hard to read for a search engine crawler, they can read it directly. However, with JavaScript its not all that straight-forward, as the crawler has to analyse the DOM (Document Object Model) before they go on to render a website.
Think of it like this: HTML = Structure, CSS = Appearance, JavaScript = Dynamics
The DOM is what Google is using to analyse and understand web-pages. When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages:
> JavaScript can add, change, and remove all of the HTML elements and attributes in the page.
>JavaScript can change all of the CSS styles in the page.
>JavaScript can react to all the existing events in the page.
>JavaScript can create new events within the page.
Why Do I Need To Be Concerned SEO Wise?
There are three reasons to be concerned about JavaScript on your site:
> Crawlability: Google bot’s ability to crawl your site.
> Obtainability: Google bot’s ability to access information and parse your content.
> Perceived site latency: Rendering Path (see below).
Types of JavaScript Rendering
Server Side Rendering (SSR)
Essentially all of your resources are housed on the server, so when a page is requested by a visitor the HTML is first rendered, while the JavaScript along with CSS is downloaded and then presented under a final render.
Client Side Rendering (CSR)
Bringing us into modern times is JavaScript that uses a Framework (see below) and is executed within the browser. The bot or visitor will request the source code and then make a second request for a JavaScript file which will contain all the HTML code formatted in JavaScript strings.
JavaScript Frameworks
There are 9 core frameworks, which include the likes of Vue, Polymer and Meteor, with perhaps Angular being the largely most popular framework for single page applications.
How To Improve Site Latency: Page Speed Insights
Page Speed Insights is a great way to fine tune your website’s load time, and gain insight into areas of improvement. One of the biggest issues to come across is the render-blocking JavaScript issue, and here are three potential solutions:
> Inline: Add the JavaScript in the HTML document.
> Async: Make JavaScript asynchronous (i.e., add “async” attribute to HTML tag).
> Defer: By placing JavaScript lower within the HTML.
One thing to take into account, and it will pay to work closely with the web development team here, is to understand that scripts must be arranged in order of precedence. I spoke to our senior web developer Andy Clarke who delved deeper into this section below.
Removing Render Blocking Scripts and Styles
When either a script or a stylesheet is loading, by default, it is render blocking. This means that it will block the any content being rendered to the screen while that script or stylesheet loads.
In order to provide a better user experience and improve perceived loading time of the webpage, all of the content above the fold should be loaded (and rendered!) as fast as possible. As already mentioned, this is extremely important for the SEO value of a page. As we know, rankings are weighted on loading speeds but there is also weight in providing Search Engines with the same experience as website visitors. By rendering the above the fold content faster it will really help boost you in the SERPs.
One of ways to mitigate render blocking behaviour is to either load scripts ‘async’ or ‘defer’ them.
You will need to decide whether it is important that the script loads before or after the HTML on the page. If the JavaScript is adding in some additional UI/UX functionality then it is probably a good candidate to be loaded async or deferred. If the JavaScript is connecting to an API to retrieve data or content which is essential for what is displayed on the page, then you may block the rendering on purpose, or load it async.
It is also important to note that the order in which these scripts are loaded is important. For instance, scripts to display above the fold content should not be deferred. Also scripts which reply on another script should be loaded after the dependency has loaded.
Async
This property will execute the script asynchronously (at the same time) as the page renders.
To use it, simply add the async property to the tag:
<script src="async-demo.js" async></script>
This essentially equates to async="true". If you were to use async in XHTML it would need to appear as async="async".
Defer
This property will defer the execution of a script until all of the content on the page has loaded and rendered. In other words, it will wait until everything is done and on the page and then run the script. It is also good practice to put these scripts after all other scripts.
The syntax is very similar to async.
<script src="defer-demo.js" defer></script>
This essentially equates to defer="true". If you were to use defer in XHTML it would need to appear as defer="defer".
CSS
I’ll be brief here, as this post is primarily about how JavaScript is important in SEO. To achieve the same can be a little tricker with stylesheets, but a common workaround is to inline all essential CSS for above the fold content, and then load the stylesheet using media queries (CSS Tricks featured an awesome guest post by Ben Edwards about this).
Ilya Grigorik published a great post about render blocking CSS and summed it up brilliantly:
- By default, CSS is treated as a render blocking resource.
- Media types and media queries allow us to mark some CSS resources as non-render blocking.
- The browser downloads all CSS resources, regardless of blocking or non-blocking behavior.
Frontend Developer at US Digital.
Senior Digital Account Manager at US Digital with over 10 years’ Digital Marketing experience. Specialising in SEO and PPC.