Demystifying JavaScript: Tips & Tools for Testing Rendering
You'll discover how to enhance the crawlability, indexability, site performance, accessibility, and other technical aspects of your website.
You'll discover how to enhance the crawlability, indexability, site performance, accessibility, and other technical aspects of your website.
Come along as we reveal the tried-and-true Google AdWords tactics from Redesign that have revolutionized their lead generation approach.
Come learn about a thorough method for evaluating the success of your content projects so you may allocate resources as efficiently as possible for the greatest possible effect.
Come learn about a thorough method for evaluating the success of your content projects so you may allocate resources as efficiently as possible for the greatest possible effect.
Come learn about a thorough method for evaluating the success of your content projects so you may allocate resources as efficiently as possible for the greatest possible effect.
You can check whether the JavaScript on your website renders correctly by following the instructions in this guide. Plus: 7 JavaScript testing and debugging tools.
Many various aspects on a website might be broken by JavaScript, which affects both users and search engines.
Because of the possible harm that JavaScript as a programming language may cause to their websites, a lot of SEO experts and digital marketers have misgivings about it.
This skepticism is exacerbated by the fact that JavaScript and rendering are frequently shrouded in obscurity.
For that reason, I've created this tutorial to walk you through the process of determining whether or not the JavaScript on your website renders correctly.
Before getting into the specifics of JavaScript auditing, make sure to review this guide on JavaScript foundations if you would like to brush up on some of the important phrases and ideas.
Any JavaScript audit's top goal should always be to identify any serious problems that are preventing visitors and search engines from viewing your content.
Other search engines are unable to render JavaScript at all or index the content that it creates; Google is limited to indexing stuff that it can render.
It's critical to check if vital content is being served instantly without rendering and if pages with JavaScript functionality are being prevented from indexing.
Slow-loading webpages can hinder search engine crawling as well as have a detrimental effect on user experience.
Google indexes content in two waves; first, it crawls pages and then, in the first wave, indexes HTML content.
Rendering pages containing JavaScript puts them in a queue that may take several days, weeks, or even months to complete.
This means that Google will be receiving contradicting signals about the website if there are variances between what is found later after the page has been produced and what is supplied in the HTML for initial indexing.
The device being utilized will have an impact on rendering because of variations in viewports, CPUs, and other elements.
Additionally, different rendering engines and rendering capabilities are used by different browsers. Because of this, it's critical to evaluate your website's rendering performance across a range of settings that correspond to the ones in which your users are likely to browse.
The answers to these queries will provide valuable information about whether the content on your website is interpreted and used by search engines as well as by users.
After discussing the primary JavaScript rendering problems to look out for, let's take a closer look at a few of the various tools available to assist in your study.
Google Search Console's URL Inspection Tool provides details on whether Google was able to crawl and index a page.
The tool displays information about problems that are blocking an indexation of a page, such as unloaded resources and unprocessed JavaScript.
The URL Inspection Tool's standout feature is its real-time JavaScript console messages.
You may also do live checks for URLs with the help of the URL Inspection Tool, which displays real-time JavaScript issues and warnings that Google found that may be blocking the content of your pages from being viewed and indexed.
This part of the program is particularly helpful for troubleshooting JavaScript.
Unlike the URL Inspection Tool, the Mobile-friendly Test does not require a Google Search Console account in order to be used. It allows anyone to test how their pages appear on mobile devices.
This tool demonstrates in detail how Google renders pages using the user agent of a smartphone. Additionally, it displays blocked resources and JavaScript issues that may prevent search engines from accessing the content of your website.
The mobile-friendly test's standout feature is the HTML snapshot of the rendered page.
The HTML portion displays the rendered code of the full website, letting you to see exactly what output code Googlebot smartphone was able to see and index, whereas the snapshot of the rendered page simply reveals the content that is above-the-fold.
To record a page's speed and performance, Google's PageSpeed Insights tool combines lab data from Lighthouse with field data from the Chrome User Experience Report.
It also has several JavaScript reports that demonstrate how the page could be made better by minifying JavaScript, cutting down on JavaScript execution time, and other ways.
The Opportunities area is PageSpeed Insights' standout feature.
This tool ranks a list of opportunities according to how much time each fix could save on the total load time of the page.
This is an excellent location to search for JavaScript problems that need to be fixed and are substantially slowing down page loads.
Diffchecker allows you to analyze a page's displayed code side by side with its original source code. This makes it possible to compare in-depth how the content of a page changes after it has been produced.
Try copying and pasting a page's source code into the Original Textbox to get Diffchecker going.
Next, make a duplicate of the page's outer HTML, then paste it into the Changed Text field.
Next, select Find Differences to compare the two code sets.
Diffecker's standout feature is the summary of additions and deletions.
Prior to delving into specifics and comparing the two page versions side by side, the tool offers broad estimates of the number of edits and deletions made to the page after it was rendered.
This provides a quick indicator of how much the page has changed since rendering.
WebPageTest provides information on the many resources available on a page and their respective loading times. It breaks down a page's load time into the various steps and operations needed to process it, like parsing, painting, and scripting.
This helps you identify performance bottlenecks and patterns by giving you helpful insights into the various steps involved in processing JavaScript and which ones are generating the most problems.
WebPageTest's standout feature is the Request Map.
One of my favorite features I've seen in a speed testing tool in a long time is the Request Map in WebPageTest.
It displays the relative sizes and load times of each resource together with a map of the dependencies between all of the requests that are made on a given page.
The greater the circle, the greater the amount of data that must be downloaded for that specific resource and the greater the impact on the total page weight.
The resource host colors the Request Map by default; however, you can color-code the resource type by appending the short parameter?group=mimeType to the end of your URL.
This greatly accelerates and simplifies the process of spot-checking JavaScript resource load times.
Make sure you take advantage of Chrome DevTools' JavaScript testing and debugging features if Chrome is your primary browser. Numerous reports, including ones on JavaScript faults, network conditions, performance monitoring, and much more, are available in the DevTools dock.
This application maps out resource file sizes and load times using a variety of waterfall and timeline charts.
The Performancetab, for instance, provides an overview of the amount of time used for loading, scripting, rendering, and painting a page. Orange and purple spikes should be avoided because they correspond to rendering and scripting, respectively.
The Networktab, which displays the scripts that were executed and in what order, together with the Load Event—which is shown by a red line—is another useful visualization.
This is significant because Google completes their rendering and takes a snapshot of the HTML during the Load Event. After this, there is no guarantee that Google will find any scripts you run.
To simulate rendering on several devices, you can also use the Device Mode in the Chrome DevTools.
Other browsers, like Firefox, Opera, and Safari, also provide JavaScript debugging capabilities through their own developer tools. It's not necessary to utilize Chrome to obtain significant rendering insights.
The Coverage report is the standout feature of Chrome DevTools.
By comparing the amount of JavaScript that was actually executed with the amount that was loaded overall, this report can be used to identify any unnecessary JavaScript code on a page. This provides a priceless window into the code required in order for users to access your content.
DeepCrawl (disclosure: I work for DeepCrawl) may be used to render JavaScript across all of the different pages of a website, just like Google does, while the other tools mentioned above offer more detailed insights on a page-by-page basis.
With the help of this tool, you can test and observe rendering at scale and determine whether search engines can crawl and index links and material created or controlled by JavaScript.
DeepCrawl's standout feature is custom script injection.
A unique JavaScript feature in DeepCrawl lets you insert code into a website as it's being crawled. Using this technique, you can evaluate the effects of rendering by adding, removing, or altering items in the DOM (document object model).
A custom script injection can be used to find external files, gather Chrome speed metrics, and verify which frameworks, iframes, and scripts are being utilized and where.
Regardless of your experience level with JavaScript testing—you may have been struggling with JavaScript bugs for years—hopefully, this article has taught you something new that you can apply to future audits.
Covering every possible application for these tools to test and debug JavaScript is difficult. The most of the enjoyment is in experimenting with them and learning what's inside each new report and tab.
To make sure your website keeps performing well in searches, you need to continuously crawling, watching, and testing for JavaScript bottlenecks and mistakes. The greatest way to stay on top of things—or at least stay current—is to do this!
Rachel works as a Technical SEO Consultant for Builtvisible, where she studies and shares the most recent advancements in search,...
With daily search marketing news, take control of your day.
Sign Up for Our Newsletter.
Get your fill of search expertise every day.
In an algorithmic world, SEJ provides entrepreneurs, marketers, and SEOs with up-to-date, pertinent information to help them grow and optimize their companies and professions.
No comments:
Post a Comment