The following external CSS files were
included after an external JavaScript
file in the document head. To ensure
CSS files are downloaded in parallel,
always include external CSS before
external JavaScript. 1 inline script
block was found in the head between an
external CSS file and another
resource. To allow parallel
downloading, move the inline script
before the external CSS file, or after
the next resource.
My HTML is:
<head>
<link rel="Stylesheet" href="gStyle.css" />
<script type="text/javascript" src="gMain.js"></script>
<script type="text/javascript" language="javascript">
// Your chart object(s)
var myChart;
// Function to hold all chart creation
function initCharts() {
myChart = new ganttChart("chart1");
myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
myChart.gLoadData("Going to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END INPUT*1/3/2010*9/3/2010");
myChart.gDraw();
myChart.gChangeBarColour(1, "#dd2200");
myChart.gChangeBarColour(2, "#9900ee");
myChart.gChangeBarColour(3, "#00dd00");
myChart.gChangeBarColour(4, "#ffbb00");
myChart.gChangeBarColour(5, "#00aa99");
}
</script>
</head>
<body onload="initCharts()">
<div id="chart1" class="gContainer">
</div>
<div id="db"></div>
</body>
Is it getting confused between the body inline script?
Inspect the page elements. Probably your Chrome extensions are dynamically adding scripts to the page in HEAD.
I think that when javascript is downloaded the browser must wait to get it all and then run it - this stops it going to the next line directly and getting it. I guess styles all get downloaded and then computed down to inheritance position and importance etc...so they can download in parallel.
This kind of thing is hard to regulate in a CMS with components that load their own style and js.
For me, Google Analytics library inserted scripts before the rest of mine.
Related
So I made a page that utilizes some javascript and also loads a js file. However, I need to move that code to a template file. When I do so, that script tag and the file are not loaded. And I don't get any error messages during page load in the browser, the file does not exist in browser, and there are no build errors or log messages. Here are snippets of code.
The following works in my "addUser.jsp" file.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" th:src="#{/resources/js/selectListSort.js}"></script>
</head>
<body>
...
<script th:inline="javascript">
// several event listener loaders
</script>
</body>
But when I move it to my officeAccess.jsp file, it fails to load.
In addUser.jsp, I make the call:
<div th:replace="administration/fragments/officeAccess :: officeAccess ( userForm = ${userForm} )"></div>
All the html in officeAccess is loaded as expected, just the javascript and file fail to load.
From everything I've researched, what I'm trying to do isn't possible.
Since I'm loading the template, the new code is loaded in the body and belong outside the body. Or... they're ignored when loaded via the template engine. I'm not sure which.
In any case, I'll just load the scripts in the parent page as needed for the templates (since this does work).
Okay so how can I use loadCSS (https://github.com/filamentgroup/loadCSS/blob/master/README.md) to allow the browser to asynchronously load CSS and JavaScript?
I have this in my head tag:
<link rel="preload" href="http://zoidstudios.com/assets/css/main.css" as="style" onload="this.rel='stylesheet">
<noscript><link rel="stylesheet" href="http://zoidstudios.com/assets/css/main.css"></noscript>
And this at the bottom of my html file :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/eb515f50a5.js"></script>
<script src="http://zoidstudios.com/assets/js/functions.min.js"></script>
<script src="http://zoidstudios.com/assets/js/loadcss.min.js"></script>
<script>
loadCSS( "http://zoidstudios.com/assets/css/main.css" );
</script>
Have you looked into loaders like RequireJS or webpack? Most loaders will support CSS natively and/or offer CSS plugins to load CSS, JS, etc. asynchronously all while ensuring dependencies. If you have many files to load I would suggest looking into a loader of your preference.
The problem is not with the CSS. If PageSpeed thinks your page load is bogged down, it's probably the result of all those <script> tags at the end of your <body> tag. Just because they are placed in the body tag does not mean they are asynchronous.
You can leave them all in the <head> tag. You can include the attribute async or defer to get asynchronous loading: have a look at this explanation.
So, something like this should do:
<script
src="http://zoidstudios.com/assets/js/functions.min.js"
defer>
</script>
Note that if any of those scripts expect the DOM to be parsed (i.e., they expect certain elements to exist already), you should use defer instead of async, as explained in the linked article. Or, you can leave those in the <body> tag, and use async.
Update
If my hypothesis is correct (that PageSpeed does not support rel='preload' on <link> tags), notice that the documentation linked in your question advises you to
include the loadCSS script, as well as the loadCSS rel=preload
polyfill script in your page (inline to run right away, or in an
external file if the CSS is low-priority)
You may be able to eliminate the final warning by using the recommended polyfill.
The general problem, "how do I load CSS asynchronously?" has been asked and answered many times on StackOverflow, as I'm sure you know!
What's the best way to load fast javascript in different pages ? Should my custom javascripts go separate for each page or all custom javascripts should be present only in 1 common custom.js file and include this file in footer ?
require_once($header);
include_once($page2.php);
require_once($footer);
<script src="js/custom-page2.js"></script>//separate for each page
require_once($header);
include_once($page1.php);
require_once($footer);
<script src="js/custom-page1.js"></script>//separate for each page
OR
//in footer.php include all js in 1 file
<script src="js/all-custom.js"></script>
If all pages share the same scripts using one script will be better.
If they use different scripts you can cut out what each page DOESN'T need and save on HTTP requests.
Or a mixture of the two.
So...it depends?
Basic rule: If you don't need it, don't load it.
I advise you to create your html page by including in this order :
HTML wrap all
Head (with style in one page for example)
Body with:
Javascript modules
Main HTML DOM
Javascript DOM modifiers and launchers
Same like this :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="modules.js"></script>
<div class="body"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
it's good idea to put all js in header (browser will not render page until all header files are loaded, at least in theory).
browser (proxy etc) will cache your js, so it's not going to be fetched from your site on every request. browser will only check if file has changed.
in most cases browser will keep single connection for all requests, however it still has to ask for every single js file if it hasn't changed. i keep js logic in small seperate files during development, but then i merge them for production.
If I have,
<script src="jquery.js" ></script>
Then any script after this will allows you to use jQuery($) variable. I need to mimic this behavior in javascript. What I need that add my script file,
<script src="myscript.js" ></script>
which will load jquery.js using javascript and any script after this tag will allow you to use jQuery($) variable. I have no control beside myscript.js file. So I need to make sure that jquery.js must be loaded before allowing the browser to run/execute/render next tags.
What you are trying to achieve is not possible. When loading scripts dynamically you need to use callbacks to ensure that those scripts are loaded and use them only inside those callbacks. You cannot have sequential <script> tags in which one of the scripts loads dynamically some other scripts such as jquery and have subsequent scripts use jQuery. Browsers load script tags sequentially and guarantee that they will be loaded in the same order, but once you start injecting dynamic scripts into the DOM the only way to ensure proper load is to use callbacks. Take a look at the following article for more details.
Splitting it up in two parts should work:
index.html:
<html>
<body>
<script src="myscript.js"></script>
</body>
</html>
myscript.js:
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>');
document.write('<script src="myprog.js"></script>');
myprog.js:
$(function(){
alert('jquery ready');
});
I currently am working on a large site with many different issues to contend with. One being that I have no easy way to include a script into my <head> without manually doing it for 500+ pages.
I have the possibility to include jQuery.min just inside the <body> tag from an include located there.
My question is, aside it not being a standard implementation, would there be any negative effects from not loading jQuery within the <head> tag? Will all the functions be available?
I am aware that if I do this, I will not be able to call jQuery from within the <head> or before this include... that's okay.
example:
<head>
Standard Head Stuff
</head>
<body>
<div>Some Content</div>
<!-- My Include is roughly here -->
<script type="text/javascript" src="jquery.min.js"></script>
<div>More content</div>
<script type="text/javascript">
$(document).ready(function(){
// Put my jQuery commands here
});
</script>
</body>
The only issue is that a page is loaded from top to bottom and so if you were to place the include statement into the header than you would be assured that the library would be loaded immediately. Otherwise the library may only be loaded at a later time which can cause a delay in some effects potentially.
Head or body, inline code will execute when phrased. Code is generally placed in the head so external libraries can be loaded before the page is (so effects can be run on dom ready). Code in the body will be run once the dom is done with the header code, and done loading page elements (once in the body, elements are loaded from top to bottom). So any code in the body will be executed once the page had loaded (up to that point)