There are 2 things: Preload and HTTP2 Push.
Preload: is a priority mark, the resource is loaded before othres
Push: The resource is delivered by the server at the same time that the html code.
If browser don´t are preload or push capable, the download is done in a standar way.
header or marckup is like the same thing.
So, no, if you use header, don´t need to put it as an html marckup.
With the image, the LCP is the image himself, w/o the image the LCP is a text pieze, so this makes the diff.
Why the image take to much time in appear even if it takes low time to donwload?
Well... the browser need to donwload the html, all css and js files, then construct the DOM, apply the css to the DOM (and repaint the screen) and the apply the changes js code does to the DOM (and again repaint the screen) before the image is showed.
More on this: The images don´t have explicit sizes (width and heigth) so when the images are rendered, the whole DOM es repainted.
This takes time, much time. As explained before, the image is downloaded in the browser about 600ms from the 1st request, but don´t appear in screen until 2100ms aprox.
The js code have a bunch of statements like getElementsByClassName this must traverse the whole DOM to find these elements, and the DOM is very big.
And last. With pagespeed some TTFB increase is spected, but the amount of this increase depends on several factors.
Size of the SHm cache, speed of the filesystem where the filecahe is running, the value of
ModPagespeedRewriteDeadlinePerFlushMs (by default 10, but you have increased this to 20 to get time to optimize more resources in less request)....
complete load takes 2.180ms but the html code takes 701ms, 32% of total time is from donwload the html code and render don´t start until 450-500-ms, so why the page start to download after 400ms? (w/o pagespeed enabled)