We Keep Coding

Using PageSpeed to eliminate render-blocking JavaScript for jQuery

I have jQuery added at the bottom of the page. However, when I run my site on pagespeed insights (Mobile), I get the error:
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 2 blocking script resources and 1 blocking CSS
resources.
This causes a delay in rendering your page. None of the
above-the-fold content on your page could be rendered without waiting
for the following resources to load.
Try to defer or asynchronously
load blocking resources, or inline the critical portions of those
resources directly in the HTML.
See: http://learnyourbubble.com and https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile
However, the jQuery is added at the bottom of the page. So it should be below the fold.
How can I remove this error?

It has to do with your font files.
Look at request 19 and 20 in the waterfall. These font files are considered CSS.
Notice how first paint (green vertical line) does not happen until after the font files are loaded?
Then notice the 15 JS files were loaded prrior to the font (CSS) files.
That is what Google is taking about.
Having 16 JS files is beyond excessive.
Try this: Disable JavaScript in your Browser. Notice the only change is in the menu header. Is 16 JS files worth that? I think not.

This article should explain a lot of what's happening: https://varvy.com/pagespeed/critical-render-path.html
In short though the problem is that chrome will need to load your jquery and your foundation javascript to give the initial render of the page. This is why its blocking. Just because the javascript comes after the html, does not mean that the html can be displayed yet. The rendering of the DOM is still going to block while the jquery/foundation is being loaded because chrome thinks they're vital to the page being displayed correctly. Pagespeed complains on these particularly because they're large. To alleviate this problem, there are a few things you can do, some of them detailed in the article above, some of them in here https://developers.google.com/speed/docs/insights/BlockingJS. The easiest way to tell chrome that these scripts are not vital and can be loaded "below the fold" is to add a defer or async tag to them.

I see an error calling foundation() but I will assume that you have removed it to rule it out, but it could be that this same call happens prior to load. Try to always enclose your code like:
(function($) {
// DOM ready
})(jQuery);

Have you tried loading async
Make JavaScript Asynchronous By default JavaScript blocks DOM
construction and thus delays the time to first render. To prevent
JavaScript from blocking the parser we recommend using the HTML async
attribute on external scripts. For example:
<script async src="my.js">
See Parser Blocking vs. Asynchronous JavaScript to learn more about
asynchronous scripts. Note that asynchronous scripts are not
guaranteed to execute in specified order and should not use
document.write. Scripts that depend on execution order or need to
access or modify the DOM or CSSOM of the page may need to be rewritten
to account for these constraints.

Please try with defer tag it's working for me.
<script src="filename.js" defer>

How do I replace the background image of a webpage in Javascript before it's loaded?

I am currently overwriting the CSS of a webgame I play to give a more pleasant user experience. The only thing that I am having difficulty with is replacing the background image correctly, as the original background image loads onto the screen before the script replaces it to a solid color. The solid color that I am replacing it with loads, but not until after the page loads.
Here is a gif of the issue I am running into.
I have tried using document.onload, .onDomContentLoaded, .ready, etc, but for some reason none of these are working. Is there any way I can prevent the background image from loading before the script is run?

window.onload will wait for all the resources to load.
However, it sounds like you should just add a background-color to the element and let the background render beneath it.

Have you tried the property as important? background-color: gray !important
I think this should prevent the image from showing up at all

Place this in an external Javascript file, and make a request for it before anything else in your head.
var myImage = new Image();
myImage.src = 'your_image_here';
What happens is that an external Javascript file blocks the rendering of the page. And the script itself will not finish till the image has been downloaded. So there won’t be any delay when you do switch the background.

You could use:
document.style.backgroundImage="url('img.png')";

I believe AmmarCSE is hinting at a possible answer, but the cause is unknown.
You should first review your HTML for the order in which your resources are loaded. The CSS is a loaded resource and can specify background colors and images. This will possibly explain the following:
If your CSS specifies colors/image resources, and the HTML loads the CSS resource prior to executing your document functions, you will continue to get this behavior.
You should review the CSS for the background image/color and change it there instead of attempting to override it with document functions.
This is an assumption of the problem. You should provide some HTML, JavaScript, and CSS in your original post to help others answer and review.

Load order of js files

I can't seem to get the preloader (Query Loader 2) to load before everything else on the page.
When I refresh the page the images in the full screen slider display block down the page, then the query loader starts.
Is there a way to start the preloader before everything else on the page?
I use stack overflow alot and normally find the answer to my question but with my limited knowledge of javascript this one has got me stumped. Things I've tried:
Putting the call to queryloader2 right at the top of the page in the header.
Putting the call to the slider scripts at the bottom of the page so they load after the preloader.
Changing the z-index of the preloader to higher than the slider.
jQuery.getScript() which loaded the scripts in order but the slider still displayed block down the page and then the preloader started.
I'm thinking its to do with the load order but if you have any ideas as to what I'm doing wrong here your help would be much appreciated.
I've put a link to my site as I didn't know which piece of code to put on here and so you can see the way the preloader and slider load the wrong way round http://stavriaphotography.com

The site is quite heavy on external scripts. Here's how loading resources in browsers work:
Images are loaded asynchronously, this means browser doesn't wait for the image to load before continuing further down the DOM, however
JavaScript is loaded synchronously and you can not load the next one before the previous is loaded.
jQuery $(document).ready() function fires only when the DOM is completly loaded.
Here's what going on, on your site:
You load jQ and queryLoader in the head and prepare to call it when DOM is ready. The scripts in the footer take time to load and are delaying the $(document).ready() function call. In the mean time you have images in your body and since they are loaded asynchronously the browser begins loading them before the queryLoader is ready to execute.
The most simple solution in your case would be to move all the external scripts to your html header, however not a very practical one.
I'd suggest reading up a bit on JavaScript and splitting up you site into multiple files for faster loading.
Some pointers: jQuery.ajax() and Handlebars.js or if you really want to go crazy dive into Backbone.js with RequireJS for asynchronous javascript loading.
Hope this helps!

Put Jquery Library first
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
then add your other JS files

Unstyled text flashes before page fully loads in Firefox

I have a web page which loads inside of a JQuery UI Dialog. When the page loads in Firefox, the plain text appears for a second before all the css and javascript runs. Once everything loads, the text appears properly. Is there a way to prevent the text from showing until all the CSS/JavaScript runs? I have tried turning on and off the visibility but that did not work correctly.
This only seems to happen in Firefox, and not in other browsers.

Some people like to call this the FOUC (Flash Of Unstyled Content). If you are using Google Fonts embedded via javascript (resource) then it adds a class to the html tag that allows you to hide content whilst the scripts are loading using normal rules like html.wf-loading #content{display:none}.
However, in my experience this isn't bombproof though. The only way I've found to fairly consistently achieve no FUOC during is to convert your fonts to BASE64 and embed that directly in your CSS (Font Squirrel provide a great resource for doing this). This way your fonts will wait before the CSS has loaded before revealing themselves.

Create a class that hides elements. Add that class to the elements that you want to hide initially. Remove the class after you've run the javascript that you want executed. Something like the following should help you.
.js-needed
{
display: none;
}
//Add this line after you've run the code you want executed
$(".js-needed").each(function() { $(this).removeClass(".js-needed"); } );
<div class="js-needed">Stuff to hide initially</div>

As javascript in <head> blocks HTML rendering, is it not the case with CSS also?

As JavaScript in blocks HTML rendering, and it's good practice to keep JavaScript at bottom, just before closing body tag , is it not the case with CSS also?
I know we can't keep external CSS outside .

CSS does not block in the same way JavaScript does
To quote Yahoo's Developer Network Blog
With stylesheets, progressive rendering is blocked until all stylesheets have been downloaded. That’s why it’s best to move stylesheets to the document HEAD, so they get downloaded first and rendering isn’t blocked. With scripts, progressive rendering is blocked for all content below the script. Moving scripts as low in the page as possible means there's more content above the script that is rendered sooner.
In addition, when CSS is added to the head, it is parsed first, and results in the HTML being styled even as it is downloaded. This avoids the Flash Of Unstyled Content that happens if you place style tags at the bottom of a large page of HTML.

Not only does CSS not block the way Javascript does, but also some browsers will do strange things if you put CSS anywhere but the <head>, like ignore it, or apply it incompletely. HTML5 actually prohibits <style> from appearing outside <head> (except with the "scoped" feature, which AFAIK nobody implements yet).

CSS stylesheets are loaded using the <link> element, this element is only valid when it is in the head of the document. As for CSS blocking HTML rendering, this isn't the case because the CSS is applied once the browser is loaded just like the other <link> elements. JS blocks HTML because the browser assumes the JS wants to take control and actually do something before loading the DOM fully, basically JS is executed and then left alone.
Think about it, if CSS was loaded the same as JS, no element would be styled because it would be referring to elements not yet loaded, therefore it is applied afterwards and doesn't block loading.

No, css is apply to DOM element right after the browser read the css.
In case of javascript you can keep the script at read, since you make it run after all html loads, like:
window.onload = function (){
//here we start
}

JS
Since JS can change your web page (modify the DOM) browsers wait for all external JS to be downloaded (parallely), interpreted and executed before continuing with the rest of the HTML that comes after <script src="..." >
Therefore it's a good practice to put all external JS at the bottom of the <body>. This way your HTML gets parsed and rendered and your user has a feeling that something is happening...
CSS
CSS on the other hand cannot change the DOM, cannot make any "heavy" changes on the page and that is why the browser doesn't block download, parsing of the rest of the HTML, and progressive rendering as is case with the JS. It seems that it does block the rendering, but it is still better to put it at the top and avoid the long FOUC . It doesn't block download, though
Now, seems that with the rise of mobile devices putting your CSS to your HEAD and JS at the bottom is not enough... You will want to put the ATF (above the fold) CSS inline and the rest of your huge minimized CSS together with your JS - at the bottom / defered and async
Take a look at this: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/

Why would it be a good practice to keep Javascript at the bottom?
I'd say that it's best practice to put CSS as well as Javascript in separate files and include them in your HTML document using the <head> section.