Why would a local html file with remote scripts and css links take a long time to load
For example,
<script src="example.com/ajax/font.js" type="123-text/javascript"></script>
<link href="example.com/ajax/Ajax.css" type="text/css" rel="stylesheet"/>
There are 10 or more of each in the head tag
If I remove the head tag and its contents it takes less than a second to load the file
Leave them in and it can take close to a minute
Is it trying to connect to these files?
Yes, resources that are referred to through external Urls (that is, resources on the public internet) will be loaded from there, using a pair of http request/response each, and all the latency and handshakes that are involved in doing so, add to the total loading time. Not necessarily the time to first contentful paint, but certainly the time until document.onload triggers.
To speed things up, download those resources, save them along with the html file, and adjust the URLs in the section to just the file name, without http:// schema prefix and without host name and directory parts.
Another way to speed things up is to embed resources like <img src="..."> tags in the html file itself, using base64 encoding.
Another factor: if the HTML file is local, not served from a webserver but simply stored on disk and opened from there, CORS preflight requests may fail and there may be additional latency caused by this. To diagnose, use the Developer Console of your browser to inspect the network traffic. Requests involving a CORS preflight handshake will come in distinct pairs and the network traffic inspector pane will detail all parts of the timing for you.
