Force Browsers to Load CSS Before Showing the Page

HTML loading first before loading all the page

The reason you are seeing your unstyled HTML load first is simply because your stylesheets are not getting loaded first. You need to place your external stylesheets in the head section of your HTML so that it gets loaded first.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!-- Load your style sheets here -->
    <link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>

</body>
</html>

How can I force the browser to load the html and css pages from server rather than from cache?

There are a lot of different options here, but the idea is to append some kind of dynamic value to the end of the path when you include it.

For example:

<link href="styles.css?test=123" rel="stylesheet" />

That would force the browser to load the stylesheet from the server once, but then that version would be cached.

If you are using some kind of server-side language like PHP or .NET, you can put a dynamic value at the end that will be different every time the page loads for a user.

In PHP:

<link href="styles.css?test=<?=(new DateTime())->format("YmdHis")?>" rel="stylesheet" />

CSS not rendered correctly on page load/reload

It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.

If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are

Is there a way to apply custom CSS before printing a page in a browser?

The extension User CSS from the chrome web store (free) allows me to add custom css rules to whatever page is loaded. It is possible to import and export CSS rules and the extension allows to store the custom CSS on a per site base.

This is exactly what I was looking for, since it makes it easier and quicker for me to remove unwanted sections before printing.

Do browsers pre-load images in the CSS file, regardless of use on page?

The browser will generally only load what's actually shown in the page. (There may however be exceptions in some exotic browsers, like Opera Mini.)

The WebSiteOptimization tool will only look at what images are referenced in the HTML and in the CSS, not which images are actally used in the page.

When I analyse my own webpage, which has eight different background images that are shown one at a time by random pick, the tool says that all eight images are loaded, just because they are in the CSS. Checking the network traffic in Firebug and IE developer tools shows that they aren't.