WordPress.org

Forums

Async JS and CSS
PageSpeed Insights keeps nagging (45 posts)

  1. Thomas van der Beek
    Member
    Posted 1 year ago #

    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/

  2. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

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

  3. Thomas van der Beek
    Member
    Posted 1 year ago #

    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>
  4. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. Thomas van der Beek
    Member
    Posted 1 year ago #

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

  6. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    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

  8. Thomas van der Beek
    Member
    Posted 1 year ago #

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

  9. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

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

  10. Thomas van der Beek
    Member
    Posted 1 year ago #

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

  11. Thomas van der Beek
    Member
    Posted 1 year ago #

    Finally achieved the 100/100 score. The only way to fix this is to have your complete css (minified) in your <head> tag.

  12. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    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 :D

  13. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    But anyway - my congratulations !!! I thought it wasn't possible at all :D

  14. Thomas van der Beek
    Member
    Posted 1 year ago #

    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!

  15. Thomas van der Westen
    Member
    Posted 1 year ago #

    Nice work!!

  16. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

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

  17. NicMic
    Member
    Posted 1 year ago #

    Thank you for the great plugin :)
    It does need an option page I think with the option to inline css. But it already does wonder.

  18. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    Thank you NicMic !
    I'll try to add it this weekend or if not, during the week.

    I think it would be a good idea to everyone pulish their Google PageSpeed Insights rate BEFORE and AFTER.

  19. NicMic
    Member
    Posted 1 year ago #

    Me again :)
    I've run into some slight problems, which I try to detail here :
    http://wordpress.org/support/topic/error-message-line-213?replies=5#post-4625400

    - if no style are loaded, and you are using WordPress SEO, be sure to uncheck "force title rewrite"
    - I sometimes get error messages (but everything else looks ok) on lines 213 / 238 / 247 . Might need an "isset" ?

  20. iRedCord
    Member
    Posted 1 year ago #

    Nice and informative exchange - thank you.

    Various tools see to give relative scores - right now I am between 89 and 93 and yes the quest for speed and clean is always there. Still I've gone from F and scores in the 60's to where I am now and it's been an interesting and instructive adventure.

    My final step is to try your plugin to see if I can find a bit more ...

    I will follow the thread to see if you update your options in a new version and then give the plug in a try. Let me know and thanks.

    kim

  21. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    NicMic: you are right, I need to add isset or !empty to avoid unnecesary warnings and notifyes.

    iRedCord: My congrats to you for obtain a better score !

  22. iRedCord
    Member
    Posted 1 year ago #

    Small question - and I know it's outside of your plug in but ...

    On the page score I have 89 on Ping and 93 on google (between 900ms and 1.5 seconds load time) - on PING it is showing admin-ajax.php as loading last and taking almost 50% of the load time in the waterfall ...

    According to Ping the only thing I have left that needs work is Remove query strings from static resources.

    Any ideas on why admin-ajax is taking so much time and how I can trace this to either reduce it or make the load time manageable?

    Any insights would be much appreciated ...

  23. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    iRedCord, it looks like in admin-ajax.php there is some havy task in execution. It could be some plugin or your theme, it even could make some backup in background. So try to disable one by one all plugins checking page loading time.

    or try this code - it will show you all registered ajax actions

    add_action('shutdown','print_actions');
    function print_actions(){
    	global $wp_filter;
    
    	foreach ($wp_filter as $action=>$data){
    		if (strpos($action,'wp_ajax')!==FALSE){
    			var_dump($action,$data);
    		}
    	}
    }
  24. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    Hi guys !

    Just have released a new version with an Options page and INLINE CSS possibility.
    Just on the way to add an Include/Exclude option.

  25. iRedCord
    Member
    Posted 1 year ago #

  26. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    iRedCord,
    I just have entered to your site and looked it the network tab on firebug the loading details. It looks like the long request to the admin-ajax.php is made by the woocommerce. I think, it's trying to get the state of cart.

    The request is woocommerce_get_refreshed_fragments. So it looks like it is the woocommerce's issue.

  27. iRedCord
    Member
    Posted 1 year ago #

    eICHAVALdellaWEB

    Thanks - it is returning "0" - I tried putting something in the cart ... but and empty or full cart still returns a "0" ... I will try sending this to WooCommerce (again) ...

    When will you finish the update to your plug in? I'd really like to try it ..

    Kim

  28. iRedCord
    Member
    Posted 1 year ago #

    Wonderful boost to performance,

    Only problem in that the plugin breaks my page - generally the page layout is ok but the header menu rings (top ring and header ring) are clobbered.

    Pingdom: Performance grade 96 - 430ms for load speed (best I could do before was 638ms and generally was 1.5 seconds), reduced requests from 32 to 7, only thing keeping me from 100 are 2 requests:

    http://iredcord.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
    http://iredcord.com/wp-includes/js/jquery/jquery.js?ver=1.10.2

    Pingdom link:
    Pingdom

    Sprout: Performance grade 94 - same issue with the wp-includes js querry
    and a new view on prioritize visible content

    Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.

    21.2KiB of the response was required to render the above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold.

    YSlow performance grade 96 and a new issue with Avoid URL Redirects ... (the only issue YSlow has ...)

  29. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 1 year ago #

    iRedCord,
    it looks like the last issue that you has is this one:
    Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:

    http://iredcord.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1
    http://iredcord.com/wp-includes/js/jquery/jquery.js?ver=1.10.2

    So it would be easy (I think) to remove the ?ver=X.X.X part from scripts URLs. I'll add this option too :)

  30. iRedCord
    Member
    Posted 1 year ago #

    More serious is the issue of the top ring and header ring getting clobbered.

    The plug in took out all but 2 of the wp-includes ... not sure why 2 were persistent and stayed but the performance (despite the clobbered menu's) was phenomenal!

    I'll stay tuned and be more than happy to test again ... let me know if you need anything or if when your ready I can load the plugin and you can see the ring menu issue.

    kim

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Async JS and CSS
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic