Develop Reference

Issue with Google PageSpeed Insights - Prioritize Visible Content

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".

How to stop render-blocking Javascript and CSS?

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

Generate javascript errors on purpose

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.

Optimal location for javascript includes

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).

Google translate breaks button that makes javascript function call

I have site that works fine but when i put it through Google translate my button that initiates a javascript function doesn't work.
However, some other Javascript calls via links work. Whats wrong?
Example translation
Thank you for any help.
Update
The sister site is even worse, the whole left side goes white?? Wait for it to fully load.
Example site 2

I think it's because when you use Google Translate, you're actually getting the page from Google's domain not your own. Your page then tries to make an AJAX request to your domain, which is now cross-domain, therefore blocked for security.

In order to avoid the translation of elements which should execute JavaScript you can give them a class of notranslate: class=”notranslate”. That should let google ignore these elements.

Could be any number of things I would have thought.
Could be that Google changes the DOM on the page that break the way your script interacts with it. Are there any JavaScript errors on the page?