Defer Trip Advisor script

Question

I'm trying to defer or asynchronously load a Trip Advisor widget but for some reason it's not working.

I think it async or defer may not work because the Trip Advisor script then executes a document.write command.

Here is the widget JS from Trip Advisor: https://www.tripadvisor.co.uk/Widgets-g186338-d187591-The_Ritz_London-London_England.html#w-selfserveprop

Can anyone advise how to make this script more performant?

Here is the script in a JSBin sandbox — https://jsbin.com/cawivusecu/edit?html,output

If you try out Defer or Async you'll see they seem to break the widget.

Here is hte code from Trip Advisor for reference:

<div id="TA_selfserveprop20" class="TA_selfserveprop">
<ul id="wzAgNPZ2m6a" class="TA_links TEBLjL9Mu">
<li id="Cp4AmQch" class="w7hHfpS">
<a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=20&amp;locationId=187591&amp;lang=en_UK&amp;rating=true&amp;nreviews=5&amp;writereviewlink=true&amp;popIdx=true&amp;iswide=false&amp;border=true&amp;display_version=2"></script>

Answer 1

You cannot defer the loading of as script that uses document.write(). The very nature of document.write() means that it has to be executed when the parser is at the proper place in the document which means you often can't change where the script using it is located and when it is loaded.

In addition, once the document has been parsed, the document object is closed and then any future document.write() clears the current document and opens a new empty document. So, that's what would happen if a document.write() is executed in a deferred script.

If you can't eliminate the document.write() by modifying the script, then you likely can't defer its loading.