I'm running a simple Flask server on Ubuntu, basically a beginner with web apps. When I request a page through Firefox, the screen flashes briefly with the raw HTML before the CSS is applied.
I thought this was a problem with the way the CSS is specified in the HTML (as I found in a few suggestions) but it doesn't seem to be the case because my other browser Brave doesn't have this problem, not even when the CSS resource is requested for the very first time or if I disable caching from the Network tab and refresh repeatedly. It always loads correctly without any flashing or flickering (to my eyes anyways). Below is the current HTML head.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flask Auth Example</title>
<!-- <div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div> -->
<link rel="stylesheet" href="../static/styles/bulma.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" /> -->
</head>
Has anyone experienced this issue and is it browser specific? What is the simplest way to resolve it?
Related
I'd like to get some help. The problem is that I continue getting a "div" on my web page without even having it in my code. If I style the "div", for some reason, it appears without being even presented in my code, and it appearts at the bottom of the page. And if I add "div" then it's doubled without any spacing.
I know the question might be really stupid, but I don't really know what to do.
Below you'll find the code and the link to the sreenshot.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bullet-icon.css">
<style>
div {
background-image: radial-gradient(red, pink);
width: 500px;
height: 300px;
}
</style>
</head>
<body>
</body>
</html>
I have checked it in last opera, last chrome and ie 9 - there is no this issue. Seems like it is done by some extension of your browser, browser itself, or http server which you are using.
Try to change browser, then:
if issue still here - check your http server
else - check your extensions
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
I created web application using CesiumJS.
On computers its working just fine, but on mobile just Reloading (Safari) and Error (Chrome).
I get Mac from my friend I use developer tools and see error on mobile (see picture)
I tried some solutions for this, to disable iFrame sandbox attribute, but wont works again.
The web site is:
This is my web site
Can you give me a solution please?
Thanks
I spent 30 hours working on different version of my Web site.
I tried without bootstrap, with bootstrap, with scripts, allow-scripts, everything.
I found a solution!!!!!!!!!
I put all my and tags in tag in my .html document.
Also I used tags from Hello world.html document.
My header looks like this now:
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Molim te radi</title>
<!-- LBOOT -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="Cesium.js"></script>
<script src="CesiumBootstrap.js"></script>
<script src="knockout-3.4.0.js"></script>
<link rel="stylesheet" href="Widgets/widgets.css">
<link rel="stylesheet" href="CesiumBootstrap.css" type="text/css">
</head>
Just this tags is all you (I) need!
I've spend evenings on tuning my backend code to be served faster, yet there's a gap in page loading time that am not familiar with.
Attached an image - please tell me what is happening in highlighted time (between recieving HTML and DOM ready).
What I think it is - maybe it's DOM intself generating? But why so long? Theres like 10 HTML tags in this testing page.
That's my markup:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#</title>
<meta name="keywords" content="a, b">
<meta name="description" content="cde">
<meta name="geo.region" content="PL">
<meta name="geo.placename" content="Warszawa">
<meta name="geo.position" content="52;21">
<meta name="ICBM" content="52, 21">
<link rel="stylesheet" href="/Css/_global/Style.css">
<!--link rel="shortcut icon" href="/Gfx/_global/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/Gfx/_global/favicon.gif" type="image/x-icon"-->
</head>
<body>
<ul id="bredcrumbs"><li>domain.com</li><li>Home Page</li></ul>
Content
</body>
</html>
The browser is parsing the dom (as warlock notes) but some javascript may run during this process as well. (See JavaScript: DOM load events, execution sequence, and $(document).ready())
As you have seen some browser plugins can essentially inject some scripts which run pre-dom load which may show up in your load times.
The Browser is parsing HTML and creating DOM
I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode