>How do you not sacrifice initial load speed if on initial load you need to load extra Javascript?

Add the "defer" attribute to the script tag. This will cause the script to be ran after initial page load, and nothing will be waiting on it. This (along with NoScript, browsers that don't fully implement JS, etc.) is the reason for including anchor link fallbacks in the initial HTML payload. If the user clicks a link before the script is ran, the site behaves acceptably.

>How is subsequent speed increased? In case of static pages everything but content is already cached.

Let's say a user is browsing a blog they've never been to before, going between posts. There's a blogroll on the side of the layout that doesn't change between posts. Every time the browser requests a new static page it has to request this blogroll (as well as everything else) and render it all over again. Any images, scripts, and stylesheets used between pages will be cached, but the browser won't know which bit of text was for the blogroll versus the content; there's no real distinction in the DOM. Even for the elements that are cached, they'll be rendered all over again. The request time is practically nothing (just a cache check), but it's more time consuming to have the DOM render a cached image than it is to do nothing to an image that is already rendered and sitting in front of the user. Changing less is is less expensive than changing more, in terms of render time.