Loading the stylesheets and scripts on my website I have made a simple website and I have tried to reduce load times as much as possible. All the content that is loaded is necessary.

Is there anything thing I can do to my code, such as structurally, to make it load even faster?

Side Note

I do not want to minify the HTML, as I want it to remain legible and I am not concerned about the content in the body, I am only concerned about the content in the &lt;head&gt; and the scripts at the bottom of the &lt;body&gt;.

The website is hosted at http://discourse.rf.gd.

&lt;!DOCTYPE html&gt;

&lt;html lang="en-GB"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1"&gt;
        &lt;link rel="manifest" href="./manifest.webmanifest"&gt;
        &lt;link rel="stylesheet" href="./src/stylesheet.css"&gt;
        &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i,900,900i&amp;display=swap"&gt;
        &lt;title&gt;Discourse&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;fieldset&gt;
            &lt;legend&gt;Login&lt;/legend&gt;
            &lt;label for="username"&gt;Username:&lt;/label&gt;
            &lt;input type="text" name="username" id="username"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;label for="password"&gt;Password:&lt;/label&gt;
            &lt;input type="password" name="password" id="password"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="button" value="login" onclick="login()"&gt;
            &lt;span id="status"&gt;&lt;/span&gt;
        &lt;/fieldset&gt;

        &lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous" async&gt;&lt;/script&gt;
        &lt;script src="./src/script.js"&gt;&lt;/script&gt;
        &lt;script src="https://kit.fontawesome.com/17c5f15e6c.js" crossorigin="anonymous" async&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
While your code is technically review-able, any review won't help you with your request, because the limited example page doesn't provide a realistic use case for your site, mostly because it doesn't have a style sheet and doesn't actually use any of the fonts, so they won't be downloaded.

Why do want to have the HTML "remain legible"? (Minifying HTML usually doesn't help much with performance anyway, but it's a strange reason for not wanting to do it).

There are automatized performance tests out there, which should be your first stop. For example, Google Chrome's Lighthouse: https://googlechrome.github.io/lighthouse/viewer/?psiurl=http%3A%2F%2Fdiscourse.rf.gd%2F%3Fi%3D1&amp;strategy=mobile&amp;category=performance&amp;category=accessibility&amp;category=best-practices&amp;category=seo&amp;category=pwa&amp;utm_source=lh-chrome-ext

One big resource hog is jQuery. Unless you are using every single feature it provides multiple times, you shouldn't be using it, if performance is important to you.

Make sure you are actually using the fonts and corresponding style sheets.



Some remarks to the HTML:


Don't use on* attributes to add JavaScript event listeners. You generally want to keep HTML, CSS and JavaScript separate. Event handlers are part of the JavaScript and don't belong in the HTML, just like you don't use style attributes to assign CSS in the HTML. See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_dont_use_these
Don't (only) use JavaScript to handle the login. Use a normal HTTP POST from the form.
Don't use &lt;br&gt;s for line breaks or spacing. They are for logical line breaks such as lines in a postal address or in the stanzas of poems. To separate the input fields of a form wrap each label/field  pair in a block element, such as a div, or put the input inside the label and give the label display: block.