Is the Page Indexable?
What Is the Impact on Page Load Speed?
Having pages that render slowly will negatively impact user experience, and can also prevent search engines from being able to crawl them.
Are There Any Differences Between Unrendered and Rendered Content?
Google has a two-wave indexing process, meaning that it indexes HTML content in a first wave after initially crawling pages.
This creates problems if there are differences between what’s presented in the HTML for initial indexing and what’s found at a later date after the page has been rendered, because Google will be receiving conflicting signals about the page.
How Does Rendering Differ Across Devices & Browsers?
Rendering will be impacted depending on the device being used due to differences in their viewports, CPUs, and other factors.
Browsers also have varying rendering capabilities and use different rendering engines. This is why it’s important to test how your website renders across a variety of environments that reflect what your users would be browsing within.
The answers to these questions will give powerful insights into whether your website’s content is accessible to the users and search engines that need to interpret and use it.
1. URL Inspection Tool
The URL Inspection Tool within Google Search Console shows information on whether Google was able to crawl and index a page.
2. Mobile-Friendly Test
One benefit of the Mobile-friendly Test is that you don’t 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 how their pages render on mobile.
Highlight feature of the Mobile-friendly Test: Rendered page HTML snapshot.
While the screenshot of the rendered page only shows above-the-fold content, the HTML section shows the rendered code of the entire page, allowing you to see exactly what output code Googlebot smartphone was able to see and index.
3. PageSpeed Insights
Highlight feature of PageSpeed Insights: The Opportunities section.
This tool prioritizes a list of opportunities in order of how much time could be saved on overall page load by fixing each issue.
With Diffchecker, you can perform an analysis of a page’s original source code side-by-side against its rendered code. This allows for detailed comparisons into how a page’s content changes once it has been rendered.
To get started with Diffchecker, try copying a page’s source code and pasting this into the Original Text box.
Then copy the outerHTML of the same page and pasting this into the Changed Text box.
Then press Find Differences to compare the two sets of code.
Highlight feature of Diffecker: Removals and additions summary.
The tool provides top-level figures on how many removals and additions were made to the page after rendering, before having to drill down into detail and analyze both page versions side-by-side.
This gives an immediate indication as to how drastically the page is altered after rendering.
WebPageTest reports on the different resources on a page and how long each one takes to load. It splits out the load time of a page into the different stages and events required to process a page, such as scripting, parsing, and painting.
Highlight feature of WebPageTest: Request Map.
The Request Map within WebPageTest is one of my favorite features I’ve come across within a speed testing tool in a long time.
It visualizes all of the different requests that are made on a page, maps out the dependencies between them and shows the load times and relative size of each resource.
The larger the circle, the more bytes of data that will need to be downloaded for that particular resource, and the bigger the contribution to overall page weight.
The Request Map is color-coded by the host of the resource by default, however, you can add the simple parameter ?group=mimeType to the end of your URL to color-code by resource type instead.
6. Chrome DevTools
This tool uses a number of different waterfall charts and timeline charts to map out load times and file sizes of resources.
For example, the Performance tab shows a summary of how long is spent loading, scripting, rendering and painting a page. Watch out for spikes in orange and purple, as these colors relate to scripting and rendering respectively.
Another good visualization is found in the Network tab which shows the scripts that were run and in which order, as well as the Load Event which is displayed as a red line.
This is important because the Load Event is the point when Google finishes rendering and takes a snapshot of the HTML. Any scripts being run after this point have a low chance of being seen by Google.
You can also use the Device Mode in Chrome DevTools to emulate rendering across different devices.
Highlight feature of Chrome DevTools: The Coverage report.
Highlight feature of DeepCrawl: Custom script injection.
You can use a custom script injection to collect speed metrics from Chrome, check which frameworks, iframes and scripts are being used and where, locate external files, and more.
All screenshots taken by author, March 2019