Reputation: 13
I have a major issue with my page load method, whenever my page start loading I can see HTML before loading of the page in proper manner.
There I am using cache for HTML, CSS and JS to serve on page for speed, the speed is fast now, but really its looking weird when we can see broken HTML at the time of page load.
I have tried multiple things:
1. Tried unminified CSS
2. Tried JS to show a blank page before full page load
3. Tried uncached CSS
4. Tried to show percentage on page load
But not got success, the issue appears only for miliseconds before page load then start showing percentage or whatever I am trying, but before all of the solutions once it is showing the bad mannered HTML.
Please give me suggestions, why it is appearing with valuable reasons and what exact reason behind this. Click here to view problem when site loads
Upvotes: 0
Views: 3973
Reputation: 12256
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>
Upvotes: 3