Forum Moderators: not2easy
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css"/>
<![endif]-->
</head>
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload="1"/>
<!-- <![endif]-->
</body>
<script src="example.js" type="text/javascript" async="true"></script>
his information is based on something written in 2011Yeah, the Conditional Comments were kind of a dead giveaway. I especially like
You can just do it in the HTML:
Yeah, the Conditional Comments were kind of a dead giveaway. I especially like
[if !IE]
since no browser but MSIE ever recognized Conditional Comments, and even they abandoned the idea with MSIE 10.
AFAIK, the async attribute only works on <script>.
I'm on CentOS 6 as well, and HTTP/2 works just fine
<link rel="preload" as="stylesheet">
Still unclear why you'd want your stylesheet to load asynchronously with other resources.
<?php
$nocookie = false;
if (!isset($_COOKIE['first_time'])) {
echo "<style>\n";
include '/home/example/www/stylesheet_just_for_this_section.css';
echo "</style>\n\n";
echo "<script>\n";
include '/home/example/www/javascript_just_for_this_section.js';
echo "</script>\n\n";
$nocookie = 1;
setcookie('first_time', '1', time() + (86400 * 365), '/');
}
else
echo <<<EOF
<link rel="stylesheet" href="https://www.example.com/styles.css">
<script src="https://www.example.com/javascript.js"></script>
EOF;
// blah blah blah
// Footer
if ($nocookie)
echo <<<EOF
<link rel="stylesheet" href="https://www.example.com/styles.css">
<script async src="https://www.example.com/javascript.js"></script>
EOF;
echo <<<EOF
</body>
</html>
EOF;
?>
Won't you be executing the Javascript twice?
I'm not sure what happens when you put <link rel="stylesheet"> in the <body>. Does the browser fetch the file? If so, does it do anything with the stylesheet? If it does, isn't that a costly re-paint? Have you tested it yet? I'm curious.
Inlining CSS/JS can certainly speed things up on the first request, but I think I'd defer loading the .css and .js file to after the page has finished loading (using preload or a simple GET request); right now they'll potentially be blocking other resources.
Nice work! A 1 second improvement is awesome.
Is this a page with ads? The load times seem to vary so much. I tend to disable them for myself, based on my IP address or an admin session, so that they don't interfere with my audits.
The only downside is that you're blowing up your HTML with the embedded CSS and JS, increasing the download time of the initial request, but that should be off-set by the fact that there are no external dependencies required for the First Meaningful Paint. Also, bots are generally stateless so you'll probably waste some additional bandwidth on them.
Now see if you can find more improvements to get to <1s :-)
Relevant: The future of loading CSS [jakearchibald.com] (expected in Chrome 69)
I was concerned that it might affect search engine placement negatively by pushing the real content lower down the page. That USED to be a concern, but I don't know if it's really relevant anymore?
I'm not sure if any "good" bot will take a cookie... if not then every page would have the CSS and JS inline.
Am I right in understanding that DOM load refers to when the page is usable, and "Load" refers to when the images and Ajax scripts are loaded?
it looks like things are swinging back in the other direction again
