How to optimize your site's scripts and improve your SEO performance
JavaScript rendering is usually a complicated and resource-intensive process. It can impact our SEO performance by adding delays in load time if not placed properly.
In this article we will discuss how to use scripts compiled in JavaScript, what are the main problems they can cause, what SEO solutions we have at hand and, finally, how DWX scripts have been thought from an SEO optimization perspective.
What is a script?
On a website, a script is a piece of code that has been inserted into the HTML of the page. Its purpose is to perform or add functions within a web page.
Most server-side scripts are written in languages such as PHP, Python or Perl. On the other hand, from the client-side, the most commonly used programming language is JavaScript.
We will focus here on the problems that a script created in JavaScript (client-side) can offer in terms of SEO performance and what we must take into account when using them.
How can a Javascript script affect our SEO performance?
Here are the main things to watch out for within a JavaScript-powered website that can impact SEO performance:
Rendering speed
The process of rendering a script can be resource-intensive due to the various steps required to download, parse, compile and execute JavaScript.
A JavaScript that renders slowly and/or improperly will affect users' web browsing: it will increase the loading time and the bounce rate of your page. In addition, if it has not been well optimized Google may penalize you in search results.
Solution: apply javascript defer parsing.
Defer parsing of Javascript means using " defer " or " async " to avoid render blocking of a page. This is an HTML command that instructs the browser to execute/parse the scripts after (defer) or asynchronously (in parallel) to the page loading. This allows the content to show without waiting for the scripts to be loaded, thus avoiding long and unnecessary loading times for the user.
defer seems like the best option in general. It would also be the best choice if the script has dependencies with other scripts and the order in which each is executed is important.
async would be ideal for scripts that manipulate or interact with the DOM before DOMContentLoaded and/or have no dependencies on other scripts.
JavaScript is single-threaded
This means that the entire main thread is stopped while the script is parsed, compiled and executed.
Solution: It is important to keep an eye here on how many resources are being executed and where request timeouts are happening, as these can be some of the main culprits which create bottlenecks in load time.
You can use GTMetrix Waterfall chart to identify the main problems on the load progression of a given website.
Scripts located in the head
Most of the scripts on a web page are located below the header. However, there are some scripts that need to be active every time a page is rendered and so they are placed in the header.
Two clear examples of these are the Google Analytics script for its tracking function and, precisely, the DWX script. Both are short and are optimized to minimize load time.
Recommendation: inlining scripts in the header is recommended for small critical JavaScripts. However, it is bad practice to inline large amounts of them because parsing is carried out in the order of appearance so large JavaScripts in the <head> means the page takes longer to crawl.
Blocked scripts
If a script has been blocked (e.g. through robots.txt) the ability to view and render a web page by the search engine may be impaired.
Having scripts unblocked is important, especially for mobile websites, where external resources like CSS and JavaScript help our algorithms understand that the pages are optimized for mobile.”
Google's John Mueller has already made it clear that:
- "Blocking scripts for Googlebot can impact its ability to render pages."
User events
JavaScript elements that involve interactivity with users always present problems for search engines. Google bots do not interact with pages as users do. For example, they do not click or scroll.
Thus, any content that relies on JavaScript interactions to function will not be indexed. Also note that Googlebot and other search engine crawlers delete cookies and local session storage after each page load.
“Any features that requires user consent are auto-declined by Googlebot.” - Google Search
How the scripts used by DWX Inlinks work
DWX Inlinks is an IA driven internal link evaluator that helps your site to improve and boost your organic traffic.
All the scripts it generates are "no page layout imposed" and do not affect page loading performance by taking into account the main elements seen in the previous point.
You will be able to retrieve and embed the data on your site's structure effortless via direct injection of your personalised Javascript snippet or via Tag Managers & CDNs or via our API Rest.
Using our REST API, your site will be able to retrieve the data and embed it on your site's structure, without affecting the normal user experience.
Conclusions to consider
After this review of how JavaScript scripts work, we list the main elements you should keep in mind when applying a script manually on your website:
- Remember to apply javascript defer parsing to avoid problems with the loading order of your website and overall performance, both for the user and for the crawling robots.
- Use tools such as Google PageSpeed Insights or GTMetrix to understand how your website loads and to make improvements.
- Avoid placing unnecessary scripts in the header of your web page.
- Don't block scripts via robots.txt (or in other ways) so that Google can crawl them correctly.
- Any features that require user consent are auto-declined by Googlebot.
