Issue:
I have a specific script below that I am looking to either append to the bottom of my code or remove it entirely before it is able to load. The code that I am able to enter runs before this script is loaded. This is causing the defer method not to appear changed on the document html. Is there a way to add "defer" before this is loaded?
Goal:
Why do I want to achieve this? I am looking to prevent render blocking JavaScript on my landing page. Unfortunately I don't have control over the system that inserts it into the page.
Question:
So is it possible to find this script and remove it before it is fully loaded (or add "defer"), or is there another way to go about doing this? I am open to any suggestions and thank you for your time!
<script type="text/javascript" src="https://img.en25.com/i/livevalidation_standalone.compressed.js"></script>
The short answer is no. Long answer kinda, but it will actually make the problem worse.
As the html is loaded into the DOM, when it finds scripts, it stops parsing the html while it downloads and runs the script, then continues to parse html. This means that the other scripts won't exist in the DOM when your script runs. Your script will be the last item in the DOM. And there is no event to tie into to interrupt script loading.
I did see one solution where someone effectively commented out the page using an html comment, allowed the page to "load", then used regex to change things, then uncomment the page again. This actually slows down rendering more, however, and is buggy if you actually have comments elsewhere in the page.
Other than defer or async, or moving all the scripts to the bottom of the page, there's also this solution [https://varvy.com/pagespeed/defer-loading-javascript.html], but there really isn't a good solution to this.