Google page speed insights want me to fix "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fexam-paper.net%2Fqa&tab=desktop
When I moved js and css to the footer and checked with chrome inspect elements it shows a lot of function not defined error which I guess is happening because the js required for those function are loaded later.
So can I ignore those errors or they could affect my site functionality ?
My site http://exam-paper.net
It happens cause you have some scripts within body. For example:
<script type="text/javascript">
$("#quick_login input[name='url']").val($(location).attr('href'));
</script>
This code provokes error if jQuery not loaded yet. And it will affect your site functionality of course.
Related
I am using a banner ad from an ad service provider, similar to google adsense.
Instruction from their site state clearly and simply that all we need to do is to copy the below code to the body of our webpage
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript"><!--
hsoub_adplace = [my account id];
hsoub_adplace_size = '728x90';
//--></script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
I have copied and pasted into my rails app, inside a body of a view file but the banner is not getting displayed and I can see javascript error (with browser inspect source)
TypeError: document.getElementById(...) is null
ps: On old browsers the banner is getting displayed but never on recent versions of browsers.
ps2: The support of hsoub confirmed multiple times, there is no problem from their side (their code is fine and working on thousands of websites, and my account is active with no issues). And it must be a problem from my code.. I am thinking the way Rails handles javascript...
Can you please help me solve this error and get the banner displayed.
ps3: I am using rails 6.0.1 and turbolinks 5.2.0
you can check the error/source code online at https://tafqit.com/
The problem is caused by Rocket Loader feature of CloudFlare cdn service
Rocket Loader improves paint times for pages that include Javascript.
Visitors will have a better experience by seeing content load faster
and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your
Javascripts, including third party scripts, so that they do not block
rendering the content of your pages.
I disabled it and banner is appearing now.
I am going to guess that this is a script positioning issue. It looks like the script is possibly looking for elements that are not rendered yet, i.e. the document and document body is not ready. Move the scripts to the end of the page i.e. after the body tags and see if that helps. Otherwise please add the exact error and perhaps show a condensed view of your page and the scripts relative to the other elements.
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Hello world</h1>
</body>
<script type="text/javascript">
hsoub_adplace = 12345;
hsoub_adplace_size = '728x90';
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
</html>
I managed to get the iframe to load by moving the scripts
Scripts are (still) inside the body tags.
Firefox 24.0 and the most recent Chrome both seem to refuse to load my leaflet map...but low and below -- it loads on Safari on my Iphone (not useful, but interesting to note).
This is my first stab at Leaflet and Bootstrap...other then the .container working unpredictably when I called it from localhost...I haven't had any problems until I tried to load it onto a webpage...
I am mostly curious why this is, I haven't seen something like this before...
Thanks!
Site: Link to Leaflet Map
Any thoughts maybe?
Ok the issue is probably related to cdn and security. When I open your sample site in Chrome it gives me a warning that a script is being loaded from unauthoriced sources.
Since FF23 these scripts are also blocked directly in the browser, and you get error messages as such:
Blocked loading mixed active content "http://code.jquery.com/jquery-1.10.1.min.js"
When I allowed to load unauthorized scripts in chrome, (there is a little shield icon in the address bar) it worked without a problem!
So try to provide these scripts locally, it might have something to do with google drive, that it is more restrictive because of javascript threats as such.
I hope it helped, and if you think this is the solution please mark it as an answer.
Thanks
You are loading leaflet.js before jquery, I get 9 js errors on the page.
One of them says:
ReferenceError: jQuery is not defined
Is leaflet dependend on jquery? Then you should load it first...
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I have installed the Google code for Remarketing Tag on my website. I have placed it in the footer of my site. The tracking is working fine, however, I have discovered a piece of the code is causing extra whitespace at the footer of my site. The snippet of code causing this is:
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
I have tried applying different CSS properties to it, but nothing seems to work. How would I keep the script on the page but it not effect my design?
I have figured it out:
<div style="display:none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
</div>
Thanks to this posting: Google AdWords: remove iframe added by tracking conversion code
In jQuery Mobile, I can define "mobile pages" as divs with data-role=page.
These can be stored in other HTML files, and injected ad-hoc into the main HTML page.
In such a div I can put a script tag, and that script will also be injected into my main page.
The script does not appear as a script tag in my DOM, but rather seems to be injected inline, and thus it does not appear in a standard way in a debugger e.g. FireBug's script panel.
Has anyone found a normal way to debug these scripts (Hopefully in FF or Chrome) ?
EDIT:
Just to clarify - The script tag in the "other" page is not an inline script. It is a:
<div data-role="page" id="some_id">
<script type="text/javascript" src="MyScript.js"></script>
...
</div>
Still, it is injected as an inline script to the DOM.
BTW - if I put the script tag in the HTML's HEAD it is not loaded at all.
EDIT 2:
More clarifications:
I'm writing a framework into which "extension modules" will be plugged on customer site and decision which module (i.e. additional "pages" with scripts) to load is a runtime decision. Therefore I have no prior knowledge in my main page which scripts to load, and must defer loading to "module load" time.
My end goal here is to allow "module" developers to debug their scripts. For this I would like a solution where the references script files are available in FireBug/ChromeDevTools like any other script.
It seems like it's standard jquery (core, not mobile) behavior to remove the script tag from a AJAX-loaded html and eval it inline, instead of leaving the script tag there and letting the browser load it normally.
I don't really fully understand the motives behind this, and it really hampers my debugging options :-(
BTW, I'm using jQuery 1.5.2 (same behavior with 1.5.1) and jQuery Mobile alpha 4 (same with 3)
The script is appended to document on the fly and therefore it's not normally visible to firebug.
There was an add-on that handled debugging dynamically loaded scripts. Inline Code Finder for Firebug but it's last release was in 2009. You probably can use it if you modify the supported versions.
BTW. I belive you should not use that feature of jquery mobile. It's there for a basic support of huge projects with lots of inline script blocks, etc.
You should include your scripts on every subpage and make it work that way
or
Dynamically load your scripts when needed with .getScript() if they're too big to include all the time.
[edit]
Yes, if you put the script in the head it will not be loaded. I repeat: Put the script in the head of EVERY page and bind pageshow of the right page instead of a normal document.ready
Note: If you are reading this for the fist time, you may jump directly to the UPDATE, since it addresses the issue more accurately.
So I got a web-page.
In the head I have a CSS background-image:
<style>
#foo { background-image:url(foo.gif); }
</style>
At the bottom of the page I load my scripts:
<script src="jquery.js"></script>
<script src="analytics.js"></script>
Since the scripts are located at the bottom of the page, and the CSS at the top of the page, I assumed that browsers will load the image first. However, this seems not to be the case.
This is a screenshot from the Chrome Dev Tools:
http://www.vidasp.net/media/cssimg-vs-script.png
As you can see, the image loads after the scripts.
(The vertical blue line is the page load DOMContentLoaded event. The huge 45ms gap is the time in which Chrome parses the jQuery source code.)
Now, my first question is:
Is this standard behavior in browsers? Do CSS background-images always load after all the scripts on the page?
If yes, how could I make sure that those images load before the scripts? Is there an easy and convenient solution to this problem?
UPDATE
I made a test case. This is the HTML source code:
<!DOCTYPE html>
<html>
<head>
<style> body { background-image: url(image1.jpg) } </style>
</head>
<body>
<div> <img src="image2.jpg"> </div>
<script src="http://ajax.googleapis.com/ajax/.../jquery.min.js"></script>
<script src="http://vidasp.net/js/tablesorter.js"></script>
</body>
</html>
As you can see, I have one CSS background-image, one regular image, and two scripts. And now the results:
INTERNET EXPLORER (9 beta)
http://www.vidasp.net/media/loadorder-results/ie2.png
http://www.vidasp.net/media/loadorder-results/ie1.png
Internet Explorer requests the regular image first, then the two scripts, and the CSS image last.
FIREFOX (3.6)
http://www.vidasp.net/media/loadorder-results/firefox2.png
http://www.vidasp.net/media/loadorder-results/firefox1.png
Firefox is doing it right. All resources are requested in the order in which they appear in the HTML source code.
CHROME (latest stable)
http://www.vidasp.net/media/loadorder-results/chrome2.png
http://www.vidasp.net/media/loadorder-results/chrome1.png
Chrome demonstrates the issue that made me write this question in the first place. The scripts are requested before the images.
OPERA (11)
http://www.vidasp.net/media/loadorder-results/opera1.png
http://www.vidasp.net/media/loadorder-results/opera2.png
Like Firefox, Opera is doing it right, too. :D
To sum up:
Firefox and Opera are requesting the resources as they appear in the source code.
Exceptions so this rule:
Internet explorer requests CSS background-images last
Chrome requests scripts before images even when the scripts appear later in the source code
Now that I laid out the issue, let me move on to my question:
How to make IE and Chrome request the
images before the scripts?
Most latest browsers to this kind of unpredictable parallel preloading of stuff these days, for performance reasons and basically ruining any chance of creating an order for loading components. This of course happens once the full DOM has been loaded.
Same story as with JQuery lazy loading of images, which has been broken for a while now.
Use image preloading capabilities through rel="preload" attribute
<link rel="preload" href="images/mypic.jpg" as="image">
The as attribute indicates the kind of object the browser should expect. So this adds highest priorities among all images you load on page, but not change priority "JS -> Image"
<link rel="preload" href="images/mypic.jpg">
Declaration without as allow to preload images even before js load, increasing Image loading priority.
Preloading feature
A possible option is to load all those images that you need at the start of your script. See this TechRepublic article for more info.
Consider that the browser can't do anything till it builds the DOM. So first it parses the whole page, THEN it loads the images (even if they're from the CSS).
You could load the images in DATA segments inline in the CSS or the page, that might speed those things up, or you could inject the jQuery reference after the page is loaded (say set a timer for 500 ms) but obviously that will affect usability to some extent.
Now, I'm pretty sure this is all implementation dependent, you could always find a browser that would load images as it came to them, but consider what it means to build a DOM and then to fill it in.
http://en.wikipedia.org/wiki/Data_URI_scheme
If SO doesn't strip it, there should be a red dot between here and the code :\
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4Tzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
So that's what I meant, use the DATA URI scheme
We solved this problem using .load inside the .ready jquery call
something like:
jQuery(document).ready(function($){
jQuery('#my_container img').load(function($){
/* SCRIPT */
});
});