Frage zu Bildgröße / Websitegröße

[Maetzzen]

Hallo zusammen,

ich versuche mich zurzeit an etwas Neuem. Und zwar möchte ich Eine Seite mit Anchors erstellen die etwa so funktioniert. Das habe ich auch ganz einfach hingebracht, indem ich mit meiner Navigation auf die einzelnen articles verweise.

<ul class="topnav" id="myTopnav">
    <li><a href="#top">🔝 TOP</a></li>
    <li><a href="#top">ÜBER MICH</a></li>
    <li><a href="#hobbys">Hobbys</a></li>
    <li><a href="#studium">Studium</a></li>
    <li><a href="#gaestebuch">Gästebuch</a></li>
    <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">∨</a></li>
 </ul>

<article id="hobbys">
        <h1> Hobbys </h1>
        <p>Hier steht Text.</p>
</article>        

Zwischen den einzelnen articles habe ich Hintergrundbilder, die über die ganze Breite gehen und fixed sind mit Hilfe von einer solchen div:

<div class="spalte3"></div>

.spalte1, .spalte2, .spalte3{
    height: 30em;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    box-shadow: inset 0 0 10px 2px #000; 
}
.spalte 3{
    background: url(bilder/landscape3.jpg);
}

Nun zu meiner eigentlichen Frage:

Meine Seite besteht nun aus einer css Datei, einer index.php, ein paar kleinere JS Dateien, damit die Navigation schön angezeigt wird (je nachdem wie Weit gescrollt wurde) und zu guter Letzt einigen Bildern.

Da die Bilder ja über die ganze Breite gehen und somit relativ groß sind, ich aber dennoch eine gute Qualität möchte, weiß ich (noch) nicht, wie sich das auf die Ladezeit auswirkt. Dass es langsam wird ist klar - aber wie langsam.

Es befinden sich ja alle Inhalte auf einer Seite (es gibt ja keine Verweise auf andere Seiten, es wird lediglich weiter runter gescrollt).

Wie groß sollte eine solche Seite denn maximal sein? Die Bilder habe ich schon sehr stark komprimiert auf je rund 300-400 KB - was in Vergleich zu meinen bisher eingesetzten Bildern riesig ist, aber da sie so breit sind weiß ich nicht wie klein ich sie machen soll, damit sie noch in angemessener Qualität vorliegen.

Es befinden sich 4 Bilder ~400 KB und ansonsten kaum Daten. Insgesamt werden wohl so 2MB geladen.

Außerdem würde mich interessieren:

• ob es richtig ist, mehrere articles zu benutzen
• ob man solche Hintergrundbilder mit Hilfe einer Div einfügen kann (oder ob es bessere Lösungen gibt)
• ob meine Vorgehensweise mit den "Anchors" stimmt

Vielen Dank im Voraus für die Antworten. Ich hoffe dass meine Problembeschreibung passt.