@markn is on the money, this is one of the sweet spots where SSJS makes the old Design Area nonsense completely defunct.
If you’re on 5.4.2.2+ you can use the keyword replacement as is to generate both the visual and the JSON-LD breadcrumbs in a paint layout.
<ol class="breadcrumb">
%globals_asset_linking_lineage^as_asset:asset_name,asset_url%
<script runat="server">
const lineage = %globals_asset_linking_lineage^as_asset:asset_name,asset_url%
for (var i=0;i<lineage.length-1;i++) {
print('<li><a href="' + lineage[i].asset_url + '">' + lineage[i].asset_name + '</a></li>')
}
</script>
<li>%globals_asset_name%</li>
</ol>
%asset_contents%
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
<script runat="server">
for (var i=0;i<lineage.length;i++) {
print('{"@type": "ListItem","position": ' + (i+1) + ',"name": "' + lineage[i].asset_name + '","item": "' + lineage[i].asset_url + '"}');
if (i!=lineage.length-1) print (',');
}
</script>
]}
</script>
If you’re between 5.4 and 5.4.2.2 you can still do it, but you need print() globals keywords which will then get replaced (like Hierarchical asset list with server side javascript (SSJ)) instead of using the ^as_asset:asset_name trick.
As for performance, I haven’t checked but I’d be surprised if the Design Area option was faster than SSJS.