This week I've started working on my first WordPress site for a family member who operates a travel company and has a very outdated website that I've decided to build from scratch.
Everything was going well until I decided to add some of his TripAdvisor widgets to the page.
The widgets load excruciatingly slow which is annoying, but the worst part is they execute the before the page loads which causes an extremely noticeable hang and bad "popping" effect as where the page can finally finish loading after the widgets.
This is an example of a TripAdvisor widget
<div id="TA_rated837" class="TA_rated">
<ul id="MpoP9sbYWV" class="TA_links Zw2KlSEGHzT">
<li id="qvZzYWwC2J" class="3qkrdfE">
<a target="_blank" href="https://www.tripadvisor.co.uk/"><img src="https://www.tripadvisor.co.uk/img/cdsi/img2/badges/ollie-11424-2.gif" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://www.jscache.com/wejs?wtype=rated&uniq=837&locationId=3507299&lang=en_UK&display_version=2"></script>
That tag leads to another script wrapped in a document.write that can only execute on page load which I gather is to remove any existing HTML?
document.write( '<script src="https://www.tripadvisor.com/WidgetEmbed-rated?amp;locationId=3507299&lang=en_UK&display_version=2&uniq=837"></script>' );
I thought I'd found a way to fire the script when I discovered PostScribe which can be used to trigger docment.wite after page load. But as the page has already loaded none of the script can't trigger anyway.
I've also tried to copy the final function that's pulled in and wrap it in my own function to trigger after the page loads. however to get it this execute I have to start editing TripAdvisors widget code which is against their terms of use.
They do have an API but it is only accessible to extremely large businesses.
My site is still local for the moment but I've created a fiddle to demonstrate my problem.
https://jsfiddle.net/9z1r77Le/
I'm hoping someone here has found a workaround and the past, as I've definitely seen sites with these widgets loading asynchronously.
Thanks in advance!
Moving the TripAdvisor '' to the end of the page solved my problem....
</body>
<!-- //end of body-->
<script src="https://www.jscache.com/wejs?wtype=...></script>
<script src="https://www.jscache.com/wejs?wtype=...></script>
<script src="https://www.jscache.com/wejs?wtype=...></script>
</html>
<!-- //end of Document -->
I feel like an idiot for how long this took me to work out, but hopefully this will help someone else at some point.