Plugin Author
dmikam
(@dmikam)
Hi,
Have you looked which of scripts Google Insight indicating you ? I mean, where are they placed in the HTML code?
It could some sort of banners or social network buttons. Have you used some in your theme ?
By the way, thank you for trying the plugin 🙂
Thread Starter
Thomas
(@thomasvanderbeek)
Yes, the scripts are those who are placed before the </body> tag. It’s a clean WP3.6 install (no additional plugins enabled).
My <head> looks like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WordPress 3.6 - PageSpeed Test</title>
<script type="text/javascript">
var asyncScripts = [];
var asyncFunctions = [];
var loadedScripts = [];
var scriptsToLoad = 0;
function execOnReady(func){
asyncFunctions.push(func);
}
</script>
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="WordPress 3.6 - PageSpeed Test » Feed" href="http://mydomain.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="WordPress 3.6 - PageSpeed Test » Comments Feed" href="http://mydomain.com/comments/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://mydomain.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://mydomain.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.6" />
</head>
.....
Before </body>:
......
<script type="text/javascript">
asyncScripts = [];
function execDelayedScripts(){
if (scriptsToLoad<=0){
for (var i = 0; i < asyncFunctions.length; i++){
//~ setTimeout(asyncFunctions[i],250*i);
asyncFunctions[i]();
}
}else{
setTimeout(execDelayedScripts,100);
}
}
function loadAsyncScript(script){
if (typeof(script.deps) == 'object'){
for (var i = 0; i < script.deps.length; i++){
if (!include(loadedScripts,script.deps[i])){
setTimeout(function (){
loadAsyncScript(script);
},100);
return;
}
}
}
if (script.extra!=''){
var extra = document.createElement("script");
extra.setAttribute('type','text/javascript');
extra.innerHTML = script.extra;
document.body.appendChild(extra);
}
var element = document.createElement("script");
element.setAttribute('type','text/javascript');
element.src = decodeURIComponent(script.src.replace(/\+/g, ' '));
element.onload = function(){
scriptsToLoad--;
loadedScripts.push(script.name);
};
document.body.appendChild(element);
}
var include = Array.prototype.indexOf
?
function(arr, obj) { return arr.indexOf(obj) !== -1; }
:
function(arr, obj) {
for(var i = -1, j = arr.length; ++i < j;)
if(arr[i] === obj) return true;
return false;
};
if (window.addEventListener){
window.addEventListener("load", documentReady, false);
}else if (window.attachEvent){
window.attachEvent("onload", documentReady);
}else{
window.onload = documentReady;
}
scriptsToLoad = asyncScripts.length;
for (var i = 0; i < asyncScripts.length; i++){
loadAsyncScript(asyncScripts[i]);
}
//~
function documentReady() {
execDelayedScripts();
}
</script>
<link rel='stylesheet' href='http://mydomain.com/wp-content/themes/tvdb/css/reset.min.css' type='text/css' media='all' />
<link rel='stylesheet' href='http://mydomain.com/wp-content/themes/tvdb/css/tvdb.min.css' type='text/css' media='all' />
</body>
</html>
Plugin Author
dmikam
(@dmikam)
Ok, I see… This is really strange, but I think that once I had something similar – when the content is too short in proportion – Google Insight thinks that those CSS files are placed too close to the beginning of the document. I’m no shure, but it looks like that.
Just a little advice – I always put my main CSS in the header.php to make it be loaded before content – because if not, the user will firstly see your page without any style and then, when the style is loaded, the page will be shown correctly. But all other css (like those of plugins) it is ok to load just before closing body.
Thread Starter
Thomas
(@thomasvanderbeek)
Tried your tip to add more content, but it didn’t work. Did you manage to get a 100/100 score on your site? Or do you have an example “demo-page” or something?
Thanks for your advice. My main css files are – in general – always in de <head>. The reason why I’m having all my scripts before the </body> tag is to get (and understand) the Insight score to 100/100. I’m just following their tips and suggestions. Though it doesn’t seem to work.
I’m starting to think it’s impossible to bypass the Blocking CSS files notice. Googled all day long and nobody seems to have the perfect solution (that actually works).
Plugin Author
dmikam
(@dmikam)
It’s true, I actually can’t get nothing better then 84, sometimes it gives me up to 92, but it is allways a warning about render-blocking css.
Here for example: pontenweb.com
but on my other web it just warn me about the main css file (which I left in header.php) : serial.2-you.info
and I’m getting 89/87 on this web
Plugin Author
dmikam
(@dmikam)
By the way, I updated the plugin and after update I have 94 on serial.2-you.info. But this may vary depending on loading of the server and its response time
Thread Starter
Thomas
(@thomasvanderbeek)
I’m only using the Google’s one: http://developers.google.com/speed/pagespeed/insights/
Tomorrow I’ll continue my quest for the 100/100 score. I’ll keep you updated on any progress 🙂
Plugin Author
dmikam
(@dmikam)
Please try version 1.5 of plugin (just few minutes ago published) – now I load css files using javascript REALLY asynchronously. But there is a strange thing – when I load a main CSS file on header, I’m getting higher scores on PageSpeed Insights – 93 (I also need to optimize images and to make better the server response time). But when I load it with other styles (those of plugins) asynchrnously – it gives me just 90 and warns me about all css files with this message: “Approximately 1% of the above-the-fold content on your page could be rendered without waiting for the following resources to load.”
Thread Starter
Thomas
(@thomasvanderbeek)
Updated your plugin to 1.5. No luck, though… http://developers.google.com/speed/pagespeed/insights/?url=thomasvanderbeek.com
I’m really starting to think Google has to fix their own “Insights” tool…
Thread Starter
Thomas
(@thomasvanderbeek)
Finally achieved the 100/100 score. The only way to fix this is to have your complete css (minified) in your <head> tag.
Plugin Author
dmikam
(@dmikam)
Oh my !!! That is terrible !! It’s almost has no difference with loading it in render-blocking way…
Really strange.. But I think I could make some option to include ALL css files inline. and some other options.. generally I need an options page 😀
Plugin Author
dmikam
(@dmikam)
But anyway – my congratulations !!! I thought it wasn’t possible at all 😀
Thread Starter
Thomas
(@thomasvanderbeek)
Would be great if you added this “dirty” 100/100 option to your plugin 🙂 It’s a strange way to achieve this score, but I totally understand their policy. It just saved extra unnecessary loading of scripts. Therefore it saved time and is it faster then ever!
Plugin Author
dmikam
(@dmikam)
Thank you. I think this weekend I could try to add this (and others) option to the plugin.
