I have tested my page on Google PageSpeed Insights
and It keeps saying "Eliminate render-blocking JavaScript and CSS in above-the-fold content"
It says I have 17 blocking scripts and 11 blocking CSS resources.
I have tried moving all of the JS to the bottom of the page to load it last however Google is still saying I have render-blocking JS...
Does anyone know how I can solve this?
Thank you in advance for any help.
You need to dig more into Critical Rendering Path study.
Simple Rule: In your webpage load only things which are really important to show to user. Rest things can be loaded after page load has been done.
When JS is being downloaded on page, it stops DOM generation and hence stop downloading other resources. Putting JS at bottom will work but still it will block your rendering when JS is being downloaded. Just to overcome this issue it is suggested to add async tag to your script tag. But adding async can lead to other issues. See here. More reading about this can be found here.
Same case applies to CSS but advantages is that it will not block DOM generation. More reading about this can be found here.
Hi I tried it but it slowed down the website not sure why so put it back saying Eliminate render-blocking JavaScript and CSS on Googles page insite.
If any one knows why by removing the blocking css it slowed down the website enter image description here
Related
While developing a full-fledged website for a client, who is slightly obsessed with Google tools and suggestions, I've come across the following issue:
No matter what I do, I cannot achieve a perfect score for the homepage of the site. All other pages are 100/100 on both mobile and desktop, but the landing page gets 91 and 97 respectively - as you can see in the attached pictures.
I have tried all relevant steps I could find, including correctly structuring the HTML code and asynchronously loading everything else, plus lazy-loading the images.
A dummy representation of the code would be this:
html head, metatags etc
inline blocks of css (to "fix" the render-blocking issues)
the html content, in correct order with above-the-fold first
deferred js load
My question is, what am I missing? What else can I do to achieve the perfect score?
For future reference and anyone facing the same problem:
I've solved this issue by reducing the filesize for my homepage PHP file. This was nowhere in the guidelines or the responses around the web, but it was the thing that bumped me up to 100/100.
In my particular instance, I removed every last bit of unnecessary CSS I had included. That alone reduced the size and removed the error.
I consider the issue erroneous however, and will proceed to report this to Google - as "prioritize visible content" has nothing to do with "reduce your file size".
Where is the best place to put Jquery code (or separate Jquery file)? Will pages load faster if I put it in the footer?
Put Scripts at the Bottom
The problem caused by scripts is that
they block parallel downloads. The
HTTP/1.1 specification suggests that
browsers download no more than two
components in parallel per hostname.
If you serve your images from multiple
hostnames, you can get more than two
downloads to occur in parallel. While
a script is downloading, however, the
browser won't start any other
downloads, even on different
hostnames. In some situations it's not
easy to move scripts to the bottom.
If, for example, the script uses
document.write to insert part of the
page's content, it can't be moved
lower in the page. There might also be
scoping issues. In many cases, there
are ways to workaround these
situations.
An alternative suggestion that often
comes up is to use deferred scripts.
The DEFER attribute indicates that the
script does not contain
document.write, and is a clue to
browsers that they can continue
rendering. Unfortunately, Firefox
doesn't support the DEFER attribute.
In Internet Explorer, the script may
be deferred, but not as much as
desired. If a script can be deferred,
it can also be moved to the bottom of
the page. That will make your web
pages load faster.
EDIT: Firefox does support the DEFER attribute since version 3.6.
Sources:
http://www.w3schools.com/tags/att_script_defer.asp or better:
http://caniuse.com/#feat=script-defer
All scripts should be loaded last
In just about every case, it's best to place all your script references at the end of the page, just before </body>.
If you are unable to do so due to templating issues and whatnot, decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="my.js" type="text/javascript" defer="defer"></script>
Edge cases
There are some edge cases, however, where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the <head> tag without the defer attribute. These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality.
Further caveats
There are some libraries that must be loaded before the DOM or CSS, such as polyfills. Modernizr is one such library that must be placed in the head tag.
Only load jQuery itself in the head, via CDN of course.
Why? In some scenarios you might include a partial template (e.g. ajax login form snippet) with embedded jQuery dependent code; if jQuery is loaded at page bottom, you get a "$ is not defined" error, nice.
There are ways to workaround this of course (such as not embedding any JS and appending to a load-at-bottom js bundle), but why lose the freedom of lazily loaded js, of being able to place jQuery dependent code anywhere you please? Javascript engine doesn't care where the code lives in the DOM so long as dependencies (like jQuery being loaded) are satisfied.
For your common/shared js files, yes, place them before </body>, but for the exceptions, where it really just makes sense application maintenance-wise to stick a jQuery dependent snippet or file reference right there at that point in the html, do so.
There is no performance hit loading jquery in the head; what browser on the planet does not already have jQuery CDN file in cache?
Much ado about nothing, stick jQuery in the head and let your js freedom reign.
Nimbuz provides a very good explanation of the issue involved, but I think the final answer depends on your page: what's more important for the user to have sooner - scripts or images?
There are some pages that don't make sense without the images, but only have minor, non-essential scripting. In that case it makes sense to put scripts at the bottom, so the user can see the images sooner and start making sense of the page. Other pages rely on scripting to work. In that case it's better to have a working page without images than a non-working page with images, so it makes sense to put scripts at the top.
Another thing to consider is that scripts are typically smaller than images. Of course, this is a generalisation and you have to see whether it applies to your page. If it does then that, to me, is an argument for putting them first as a rule of thumb (ie. unless there's a good reason to do otherwise), because they won't delay images as much as images would delay the scripts. Finally, it's just much easier to have script at the top, because you don't have to worry about whether they're loaded yet when you need to use them.
In summary, I tend to put scripts at the top by default and only consider whether it's worthwhile moving them to the bottom after the page is complete. It's an optimisation - and I don't want to do it prematurely.
Most jquery code executes on document ready, which doesn't happen until the end of the page anyway. Furthermore, page rendering can be delayed by javascript parsing/execution, so it's best practice to put all javascript at the bottom of the page.
Standard practice is to put all of your scripts at the bottom of the page, but I use ASP.NET MVC with a number of jQuery plugins, and I find that it all works better if I put my jQuery scripts in the <head> section of the master page.
In my case, there are artifacts that occur when the page is loaded, if the scripts are at the bottom of the page. I'm using the jQuery TreeView plugin, and if the scripts are not loaded at the beginning, the tree will render without the necessary CSS classes imposed on it by the plugin. So you get this funny-looking mess when the page first loads, followed by the proper rendering of the TreeView. Very bad looking. Putting the jQuery plugins in the <head> section of the master page eliminates this problem.
Although almost all web sites still place Jquery and other javascript on header :D , even check stackoverflow.com .
I also suggest you to put on before end tag of body. You can check loading time after placing on either places. Script tag will pause your webpage to load further.
and after placing javascript on footer, you may get unusual looks of your webpage until it loads javascript, so place css on your header section.
For me jQuery is a little bit special. Maybe an exception to the norm. There are so many other scripts that rely on it, so its quite important that it loads early so the other scripts that come later will work as intended. As someone else pointed out even this page loads jQuery in the head section.
Just before </body> is the best place according to Yahoo Developer Network's Best Practices for Speeding Up Your Web Site this link, it makes sense.
The best thing to do is to test by yourself.
I would like to remove some hosting imposed google ads on my phpbb board.
Currently I accomplish this by deleting via javascript all the banners divs when the page is loaded.
But unfortunately in that way advertisements are quickly displayed before disappearing.
Now I am thinking about a different (neater) approach to my problem:
maybe I might write some javascript code which interferes with the one injected by google thus generating the inability to show those annoying divs...
Any idea?
EDIT
I can't edit html and css, I am just allowed to insert any html/javascript/css code in a separate "widget". This is for testing purposes and I have the admin permission to try ...
My current code follows
<script type="text/javascript">
window.onload = function(){
document.getElementById('ad').getElementsByTagName('div')[0].outerHTML='';
document.getElementById('ad2').outerHTML='';
document.getElementById('footer').outerHTML='';
document.getElementById('ad3').getElementsByTagName('a')[1].outerHTML='';
};
</script>
Any error-inducing code will almost certainly interfere with things required by phpBB as well as the ads. Generally the ad code is written to be stand-alone, so it doesn't need any external help (eg. scripts in the <head> of the document).
Maybe you could target their parent elements with CSS and just apply display:none or something? That would likely be a better solution.
First off, you should be sure you're allowed to remove these ads, doing so without permission could get you into trouble.
Assuming by this point you are allowed to:
Throwing an error will most likely crash your own script which tends to be a terrible idea.
You could:
Try to look for the script tag with the URL and remove it
Make css rules to hide the div's before they are even displayed, then removing any code generated by the ads.
Re-write your javascript so it doens't conflict with the other script.
I just checked this website with Google pagespeed Insights, they asked me change the Javascript block into body instead of head even this part has been moved already.
Anyone please help me investigate this problem if Google give me a wrong message, or how to fix the kind of issues.
https://developers.google.com/speed/pagespeed/insights/?hl=en&url=http%3A%2F%2Flogin.di.se%2F%3FappId%3Ddi.se%26lc%3Dsv&tab=mobile
The website
http://login.di.se/?appId=di.se&lc=sv
I also have another website with same DOM, however don't have this problem with google pagespeed
http://account.sydsvenskan.se/?appId=sydsvenskan.se&lc=sv
Possibility 1
Some content loads at the end of page load i.e giving an illusion that preceding JavaScripts were holding back the content rendering.
I see these two images are called in the end only for the site with issue -
http://login.di.se/public/images/di/background.jpg
http://login.di.se/public/images/di/checkbox_cust.png
You can see this here - http://tools.pingdom.com/fpt/#!/bRcsEc/http://login.di.se/?appId=di.se&lc=sv
But this is not the case for your other website - http://tools.pingdom.com/fpt/#!/cH2ghk/http://account.sydsvenskan.se/?appId=sydsvenskan.se&lc=sv
Alternate Solution - Use Asynchronous Load
Try loading the JavaScript asynchronously as google suggests something like this -
<script async src="my.js">
Refer - https://developers.google.com/speed/docs/insights/BlockingJS
There is still a huge chunk of JavaScript in your <head>
Also check to see if Cloudflare isn't inadvertently adding JavaScript where it shouldn't
I've read that it is better to place your <script> tags at the end of the document. The argument for doing this appears to be that the browser will stall rendering the page below a script tag until it has loaded and and executed the script. If your script tag is at the top of the page, rendering is stalled for a while, which is bad.
However, I am not sure if this is really true any more.
Looking around, I normally see the following locations...
In the <head> of the page or Just inside the <body> tag
Stackoverflow is an example of a site that puts the script tags in the head, and since they are normally rather obsessed with performance, I am starting to wonder if position in the page is important at all.
Last thing in the body element
The other common place to put javascript appears to be right at the very end of the <body> element. I am assuming this means that the page can render while the javascript downloads and gets on with doing its thing.
But which is better?
Does anyone have any thoughts or advice on this? I am looking to try and get our pages to perform and appear to the user as quickly as possible.
Does it matter? What are the advantages of being at the top of the page? Bottom of the page?
It really depends.
There is no catch all answer for this because it depends on what your javascripts are acting on.
Putting scripts at the end of the page is sometimes needed if your acting on a DOM element that needs to be loaded for the script to run. Say you want to focus on a control and your script is:
var mytext = document.getElementById("mytext2");
mytext.focus();
Well in this case you would want it to execute at the end of the page, after mytext2 control has already been loaded by the browser. This is less important for script blocks that only contain functions that are called by events.
If you have a big .js file that contains libraries of functions you may also want to put that at the end of the page so the browser will load the page faster before loading the large .js file.
Google analytics suggests putting their tracker at the end, to make sure the page has been delivered before you count the hits, but in some cases it suggests putting the script into the header too, it works both ways.
So, rule of thumb for me is, HEAD scripts for everything except things that execute in-line and act on DOM objects, or large scripts that you want to load after the page.
Rick Strahl just wrote a great blog on placement of Javascript in .net too:
The only validating way is to include it on the top (in the <head> section), but in the bottom will be faster to load - the rest of the page will load faster if you have script near the bottom, giving the user better response and making the experience better.
The problem is that most web browser stop rendering the HTML of the page until they've fetched and parsed all JavaScript code so far. So if you have a slow-loaded .js file included in the <head>, no HTML will be rendered and images will not even start to download before the .js have been downloaded and parsed, therefore frontend engineers propagate for putting the scripts as far down in the code as possible.
I usually just set a far-future Expires header for my .js files so they are cached in the browser for a long time and then include them in the <head> section. This gives good performance and doesn't look ugly :-)
But if you are serving external .js libraries (that are on other servers than your own), you will probably want them in the bottom because you can't change the Expires-header for other servers and you canät know that the other server always will be responsive.
yeah. Put Scripts at the Bottom
I think the size of the js file is much more important than the location of javascript. I always set highter number of the con-current connection to make sure they download in parallel.
I believe it's better to place script tags just before the closing body tag. Because:
Elements are blocked from rendering if they are below the script.
In IE6, IE7 resources in the page are blocked from downloading if they are below the script.
From this article. Also Yahoo's performance rule 6 is Move Scripts to the Bottom
Google Analytics always used to say to put the script tag at the bottom of the page. I believe the rationale was that if the Google servers ever went down, the page would fail to load if it were in the head (only for IE probably).