WordPress.org

Support

Support » Plugins and Hacks » PageSpeed Insights keeps nagging

PageSpeed Insights keeps nagging

  • Thomas van der Beek

    @thomasvanderbeek

    Tried your plugin in my quest to get a 100/100 score on Google’s PageSpeed Insights, but still having some issues. I’m using a pretty blank theme and – just for testing – only added two stylesheets (minified) by using the wp_enqueue_style() function. I also stripped any unnessary extra scripts/styles in the <head> so it’s clean.

    When activating your plugin, the stylesheets are loaded just before </body>. That’s how I want and expect it. But Insights keeps nagging about the blocking scripts above the fold:

    Your page has 2 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.

    Even though the scripts are loaded after DOMContentLoaded, it still “thinks” it’s above-the-fold. Do you have any suggestions? Thanks!

    http://developers.google.com/speed/pagespeed/insights/
    http://wordpress.org/plugins/async-js-and-css/

Viewing 15 replies - 1 through 15 (of 44 total)
  • Plugin Author elCHAVALdelaWEB

    @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 ๐Ÿ™‚

    Thomas van der Beek

    @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 elCHAVALdelaWEB

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

    Thomas van der Beek

    @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 elCHAVALdelaWEB

    @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 elCHAVALdelaWEB

    @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

    Thomas van der Beek

    @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 elCHAVALdelaWEB

    @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.”

    Thomas van der Beek

    @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…

    Thomas van der Beek

    @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 elCHAVALdelaWEB

    @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 elCHAVALdelaWEB

    @dmikam

    But anyway – my congratulations !!! I thought it wasn’t possible at all ๐Ÿ˜€

    Thomas van der Beek

    @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!

    Nice work!!

    Plugin Author elCHAVALdelaWEB

    @dmikam

    Thank you. I think this weekend I could try to add this (and others) option to the plugin.

Viewing 15 replies - 1 through 15 (of 44 total)
  • The topic ‘PageSpeed Insights keeps nagging’ is closed to new replies.