//Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello
1552678959 demystifying javascript tips and tools for testing rendering by rachellcostello 760x490 - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

 

 

demystifying javascript tips and tools for testing rendering by rachellcostello - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

demystifying javascript tips and tools for testing rendering by rachellcostello - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello & # 39;);

h3_html = & # 39;

& # 39; + cat_head_params.sponsor.headline + & # 39;

& # 39 ;;

cta = & # 39; & # 39; +
atext = & # 39;

& # 39; + cat_head_params.sponsor_text +

& # 39 ;;
scdetails = scheader.getElementsByClassName (& # 39; scdetails & # 39;);
sappendHtml (scdetails [0] h3_html);
sappendHtml (scdetails [0] atext);
sappendHtml (scdetails [0] cta);
// logo
sappendHtml (scheader, "http://www.searchenginejournal.com/");
sc_logo = scheader.getElementsByClassName (& # 39; sc-logo & # 39;);
logo_html = & # 39; - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello & # 39 ;;
sappendHtml (sc_logo [0] logo_html);

sappendHtml (scheader, & # 39;

ADVERTISING

");

if ("undefined"! = typeof __gaTracker) {
__gaTracker ('create', 'AU-1465708-12', 'auto', 'tkTracker');
__gaTracker ("tkTracker.set", "dimension1", window.location.href);
__gaTracker ('tkTracker.set', 'dimension2', 'seo');
__gaTracker ("tkTracker.set", "contentGroup1", & # 39; seo & # 39;);
__gaTracker ('tkTracker.send', 'hitType': 'pageview', page: cat_head_params.logo_url, & title> #:; Cat_head_params.sponsor.headline, & # 39; sessionControl & # 39 ;: & # 39;
slinks = scheader.getElementsByTagName ("a");
sadd_event (slinks, click & # 39 ;, spons_track);
}
} // endif cat_head_params.sponsor_logo

JavaScript has the ability to break many different things on a website, for both users and search engines.

So, many SEO professionals and digital marketers are wary of JavaScript. as a programming language because of the potential negative impacts that it may have on their websites.

There is often an atmosphere of mystery around JavaScript and rendering, which only adds to this mistrust.

That's why I wrote this guide in order to explain exactly how you can test whether your website's JavaScript code is correctly rendered … or not.

If you want to refresh your memory on some key terms and Before diving into the details of JavaScript auditing, be sure to check out this guide JavaScript Basics .

JavaScript related issues you need to test (19459014)

. priority for any JavaScript audit, we will always look for critical issues that prevent users and search engines from seeing your content.

To be able to identify areas where JavaScript could affect the performance of your website, you need to focus. your analysis to answer the following questions:

Is the page indexable?

Google can only index content that it can render, but other search engines can not render JavaScript or index content. it generates.

It is important to check if the indexing of a page powered by JavaScript is blocked and if essential content is served immediately without rendering.

What is the impact on the speed of loading pages

Making pages slow has a negative impact on the user experience and can also prevent the engines to explore them.

Are there differences between rendering and not rendering? d Content?

Google uses a two-wave indexing process which means that it indexes the HTML content in a first wave after the initial crawling of pages.

Pages with JavaScript that require to be rendered are added to a queue to be returned a few days, weeks or even a month later.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello This creates problems when there are differences between what is presented in the HTML code for the initial indexing and what will be found later after rendering the page, because Google will receive conflicting signals about the page.

Difference in rendering between devices and browsers?

The rendering will be affected according to the device used borders in their windows, processors and other factors.

Browsers also have variable rendering capabilities and use different rendering engines . That is why it is important to test how your website renders in a variety of environments reflecting the browsing conditions of your users.

The answers to these questions will help to better understand if the content of your website is accessible to the public. users and search engines who need to interpret and use it.

The tools to use to test JavaScript

Now that we've discussed the main JavaScript rendering issues to test, let's look at some of the different tools that can help you in your analysis.

1. URL inspection tool

The tool URL inspection of the console of Google search indicates whether Google was able to parse and index a page.

The tool displays details about problems encountered. prevent the indexing of a page, including resources that can not be loaded and JavaScript that can not be processed.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297791 size-content_large_1x b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg 20xmlns% =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20454%22%3E%3C/ svg% 3E "alt =" Screen capture of the URL inspection tool "width =" 760 "height =" 454 "data-data-src =" https: / /cdn.searchenginejournal.com/wp-content/uploads/2019/03/url-inspection-tool-768×459.jpg[19459031_rev[19459011hnersCharacteristicsofhighlightlighting&#39;outild&#39;inspectiond&#39;URL: Console Messages JavaScript in real time.

The URL inspection tool also allows you to run real-time tests for URLs, which display warnings and real-time JavaScript errors encountered by Google that could prevent the content of your page from being viewed and indexed.

This section of the tool is particularly useful for JavaScript debugging.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "size-full wp-image-297793 aligncenter b-lazy pcimg" src = " data: image / svg + xml,% 3Csvg 20xmlns% =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20397%20503%22%3E%3C/svg%3E "alt =" URL inspection tool screenshot of JavaScript console errors "width =" 397 "height =" 503 "data-data-src =" https://cdn.searchenginejournal.com /wp-content/uploads/2019/03/url-inspection-tool-javascript-errors.jpg[19459031(english)1919(english)Testfittedmobiles19459003]

One of the advantages of test Mobile friendly is that you do not need a Google Search Console account to be able to use it as you do with the URL inspection tool. Anyone can use it to test the rendering of their pages on their mobile.

This tool shows you exactly how How Google is able to render pages with its smartphone user agent. It also displays JavaScript errors and blocked resources that can prevent search engines from accessing your site's content.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297795 size-content_large_1x b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg% 20xmlns =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20420%22%3E%3C/svg%3E "alt =" Capture of the game. user-friendly test screen "width =" 760 ". height = "420" data-data-src = "http://weinternetmarketing.com/wp-content/uploads/2019/03/1552678956_662_demystifying-javascript-tips-and-tools-for-testing-rendering-by-rachellcostello.jpg[19459031Letter-19579011/mobile-friendly-test-768x424jpg[19459031Truthfulnessofsecurityandmobility: HTML snapshot of a rendered page.

While the screen capture of the rendered page contains only content over the fold, the HTML section contains the rendering code of the whole page., allowing you to see exactly which exit code the Googlebot smartphone was able to display and index.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

3. PageSpeed ​​Insights

The Tool from Googl e The PageSpeed ​​Insights Tool uses a combination of Lighthouse laboratory data and Chrome User Experience Report field data to document speed and performance. One page.

It also includes a number of JavaScript reports showing how to improve the page by reducing the runtime of JavaScript, reducing JavaScript and more.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

Highlighting PageSpeed ​​Insights: Section" Opportunities "

This tool prioritizes a list of opportunities in order of time saving. on the global page load by solving each problem.

This is a good place to look for JavaScript issues that contribute significantly to the loading time of pages that need to be fixed.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello <img class = "aligncenter wp-image-297811 size-content_large_1x b-lazy pcimg" src = " data: image / svg + xml,% 3Csvg 20xmlns% =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20478%22%3E%3C/svg%3E "alt =" Screen Shot of Diffchecker "width =" 760 "height =" 478 "data-data-src = "http://weinternetmarketing.com/wp-content/uploads/2019/03/1552678956_316_demystifying-javascript-tips-and-tools-for-testing-rendering-by-rachellcostello.jpg[19459031hootingde19459031TostartwithDiffcheckertrytocopytheCodeSourced&#39;unepageanddelastintheoriginalndeletedZone

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello <img class = "aligncenter wp-image-297817 size-full b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg% 20xmlns =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20757%20288%22%3E%3C/svg%3E "alt =" Capture screen of the source code "width =" 757 "height =" 288 "data-data -src =" https://cdn.searchenginejournal.com/wp-content/uploads/2019/03/source-code. jpg [19459031HER19459011hnencopierensuiteleouterHTMLdelamêmepageetlecollerdansletextemodifiéboîte

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostellogif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello1919909011Then click Find Differences to compare the two sets of code.

Main characteristic of Diffecker: Suppressions and summary of additions.

The tool provides encrypted data on the number of deletions and additions made to the page after rendering, before having to detail and analyze both versions of the page side by side. .

This gives an immediate indication of how the page is changed drastically after rendering.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

5. WebPageTest

WebPageTest indicates the different resources of a page and their loading time . It divides the loading time of a page into different stages and events needed to process a page, such as scripting, analysis and painting.

This provides useful information about the different steps in JavaScript processing and which are the ones that cause the most problems, allowing you to detect bottlenecks and performance patterns.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297825 size-content_large_1x b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg% 20xmlns =% 22http: / /www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20326%22%3E%3C/svg%3E "alt =" WebPageTest screenshot "width =" 760 "height =" 326 " data-data-src = "http://weinternetmarketing.com/wp-content/uploads/2019/03/1552678957_427_demystifying-javascript-tips-and-tools-for-testing-rendering-by-rachellcostello.jpg[19459031unsetdelacharacteristicbyWebPageTest: Request the card “/>.] The query map in WebPageTest is one of my favorite features I've encountered for a long time in a speed test tool.

It shows all the different queries that are made on a page. they and displays the load times and the relative size of each resource.

The larger the circle, the larger the number of bytes of data to download for this particular resource will be important, and the more the contribution to the weight of the page will be important.

The green circle of this application card was: a JavaScript file that was the largest resource of the entire page:

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297827 size-full b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg% 20xmlns =% 22http: // www .w3.org / 2000 / svg% 22% 20viewBox =% 220% 200% 20756% 20629% 22% 3E% 3C / svg% 3E "alt =" WebPageTest & # 39; Request Map & # 39; screen "width =" 756 "height =" 629 "data-data-src =" http://weinternetmarketing.com/wp-content/uploads/2019/03/1552678957_136_demystifying-javascript-tips-and-tools-for-testing-rendering-by-rachellcostello.jpg[19459031Fairedelacarteandthecolorandcolourparl&#39hostnameofyourdefaultyoucanthenaddobeadddingthesimpleparameters?group=mimeTypetothefindofourURlafindoffinishingthecomponentsourcecolour

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297829 size-full b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg 20xmlns% =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20765%2026%22%3E%3C/ svg% 3E "alt =" WebPageTest request plan with type by parameter parameter screen shot "width =" 765 "height =" 26 "data-data-src =" https: //cdn.searchenginejournal.com/wp-content/uploads/2019/03/request-map-resource-type-parameter. jpg [19459031☎1919909089CelarendlePhysicalRecordingProcessforJavaScriptWhenResourcesoftheSimpleRecordingLow

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello 19199090.15. Chrome DevTools

If you are using Chrome as the primary browser, be sure to use the JavaScript testing and debugging features of Chrome DevTools . The DevTools dock contains a wide variety of reports, such as performance monitoring, network conditions, JavaScript errors, and more.

This tool uses a large number of cascading charts and time tables to map load times and file sizes. resources.

For example, the Performance tab displays a summary of how long to load, script, render, and paint a page. Pay attention to the orange and purple tips, because these colors relate respectively to the script and the rendering.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostellosvg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

You will find another good visualization in the Network tab, which displays the scripts run and in what order, as well as the Load event, displayed as a red line .

[1945

This is important because the loading event is when Google completes the rendering and takes a snapshot of the HTML code. Scripts executed after this time are unlikely to be seen by Google.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297839 size-full b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg% 20xmlns =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20494%20607%22%3E%3C/svg%3E "alt =" Capture & Chrome DevTools Network Cascade Screen "width =" 494 "height =" 607 "data-data-src =" https://cdn.searchenginejournal.com/wp-content/uploads/2019/03/chrome -devtools-network-waterfall.jpg [19459031statementde19459011You'llalsousetheinterdifferentemodelinChromeDevToolforemultizingdifferentperipherals

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

D & # 39 other browsers also offer f JavaScript debugging features via their own development tools, such as Firefox Opera and Safari . You do not need to use Chrome to get important rendering information.

Chrome DevTools Main Feature: Coverage Report.

This report reveals unused JavaScript code on a page because it shows how many JavaScript was executed and how much was loaded in total. This provides an invaluable insight into the code needed for users to access your content.

7. DeepCrawl

While the other tools mentioned above provide detailed information on a page-by-page basis, DeepCrawl (discloser: I work for DeepCrawl) can be used for rendering JavaScript on all pages of a website. in the same way as Google.

This tool allows you to test and monitor large scale rendering, and tells you whether links and content generated or moderated by JavaScript can be crawled and indexed by search engines.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

svg%3E - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello1919909011Highlight feature of DeepCrawl: Custom script injection.

DeepCrawl has a custom JavaScript feature that allows you to inject code into a website being crawled. This method means that you can add, edit, or delete elements in the DOM (document object model) to test the effects of rendering.

You can use a custom script injection to collect speed metrics from Chrome. Check which frames. , iframes and scripts are used and where, locate external files, etc.

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Demystifying JavaScript: Tips and Tools for Testing Rendering by @rachellcostello

<img class = "aligncenter wp-image-297847 size-content_large_1x b-lazy pcimg" src = "data: image / svg + xml,% 3Csvg % 20xmlns =% 22http: //www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20536%22%3E%3C/svg%3E "alt =" Screen Capture JavaScript DeepCrawl Custom "width =" 760 "height =" 536 "data-data-src =" http://weinternetmarketing.com/wp-content/uploads/2019/03/1552678958_94_demystifying-javascript-tips-and-tools-for-testing-rendering-by-rachellcostello.jpg [19459031TeachingforecommentstotakeyourJavaScriptfromyearyearsyou'velearnedsomethingnewthatyoucantryandaddtoyourauditingprocessinthefuture

It's hard to cover all the different areas – ways you can use these tools to test and debug JavaScript – the most fun thing is to try them yourself. same and discover the content of each new ngo let and report.

The key to keeping your website running in search is to continue to explore, monitor, and test JavaScript errors and bottlenecks. This is the best way to stay ahead of the curve, or at least follow!

More Resources:

Credits Image