WordPress.org

Ready to get started?Download WordPress

Forums

Async JS and CSS
[resolved] Efects on my site (48 posts)

  1. Tony Franco
    Member
    Posted 11 months ago #

    Hello People,

    I was looking for a plugin like this, to improve the speed of site!

    Thanks by the creation!

    I have installed, but didn´t work well... it stopped to show the effects of the site...

    If you could take a look: http://www.obrasdarte.com

    Thanks and Regards,

    Tony

    http://wordpress.org/plugins/async-js-and-css/

  2. Tony Franco
    Member
    Posted 11 months ago #

    another question:

    it would be possible to choose in a previous list what to async?

    sorry, i´m very new to all this...

  3. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,
    at this moment I can't see your site because of Internal Server Error.
    But I think that it is possible that the js file used by theme to create all effects has no nesessary requirement indicated (like jQuery or so) - it is happened to me - I forgot to put the third parameter to wp_enqueue_script function call.

  4. Tony Franco
    Member
    Posted 11 months ago #

    Hi elCHAVALdelaWEB,

    Thanks by the reply!

    I don´t know if it is useful, but take a look at the link please:
    http://www.prelovac.com/vladimir/best-practice-for-adding-javascript-code-to-wordpress-plugin

    Thanks and Regards,

    Tony

  5. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 11 months ago #

    Thank you for that link - my plugin is using those hooks to detect scripts and make them non render-blocking.

    By the way - just have released new version with some options - you can try to make it work on your site combining them.
    As soon as possible I'll try to add Include/Exclude option.

  6. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Hi Tony,

    I just have published a new version of plugin with an option to exclude some scripts from processing and leave them loading in render-blocking way.

    Also I just looked on Google Insights reports about your site an my advice to you is to include browser cache settings to your main .htaccess file. Something like this should make much better your scores and page loading speed:

    <IfModule mod_expires.c>
    	ExpiresActive On
    	ExpiresByType image/gif "modification plus 6 month"
    	ExpiresByType image/jpeg "modification plus 6 month"
    	ExpiresByType image/png "modification plus 6 month"
    	ExpiresByType application/javascript "modification plus 1 month"
    	ExpiresByType text/css "modification plus 1 month"
    </IfModule>
  7. Tony Franco
    Member
    Posted 10 months ago #

    Hello elCHAVALdelaWEB,

    Thanks man!

    About the module expires, thank you very much!!

    I put your code and got a better result at pagespeed at the moment.

    I was using this code below, that i took from a site.

    <IfModule mod_expires.c>
    ExpiresActive ON
    <FilesMatch "\.(gif|jpeg|jpg|png|ico|js|css|swf)$">
    ExpiresDefault "access plus 4320 hours"
    </FilesMatch>
    </IfModule>

    but the results were better with yours! but something still happening, at the moment of test, the leverage browser caching stays with just 4 or 5 files, but after some time, it shows again a big list, telling the same message... that i can get better results using the browser cache...

    About the changes in plugin, i´m getting the same result, as you can see here: http://clip2net.com/s/5QPMSu

    I put the .js to render block way:

    html5.js
    selectivizr-min.js
    jquery.min.js
    tie-scripts.js
    jquery-ui.min.js

    It doesn´t load the java resources even excluding the files from the settings...

    Thanks man!!

    Tony

  8. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Hi,
    Glad to help you with leverage browser caching !

    Now about the plugin. Try to disable "Detect <script> tags in wp_head" and "Detect <script> tags in wp_footer" and set an exception list like this:
    html5.js
    selectivizr-min.js
    jquery.min.js

    I think setting it like this, everithing shoud work. It looks like the main problem is the "Detect <script> tags in wp_head" option.

    And if there are still some problems, please post error messages shown in the console of a Developer Tool of Chrome Browser or Firebug in Firefox.

    Good luck !

  9. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    And one more thing about leverage browser caching - it looks like your server returns strange MIME type of .jpg files - "image/webp", so add it to caching configuration in your .htaccess:

    <IfModule mod_expires.c>
    	ExpiresActive On
    	ExpiresByType image/gif "modification plus 6 month"
    	ExpiresByType image/jpeg "modification plus 6 month"
    	ExpiresByType image/webp "modification plus 6 month"
    	ExpiresByType image/png "modification plus 6 month"
    	ExpiresByType application/javascript "modification plus 1 month"
    	ExpiresByType text/css "modification plus 1 month"
    </IfModule>
  10. Tony Franco
    Member
    Posted 10 months ago #

    Hello elCHAVALdelaWEB!!!

    Man, Thank you very much!!!! :)

    The website is very fast and working correctly. I did what you said to do in settings!

    Congratulations by this wonderful job!!

    I´m here if you need to test something.

    Thanks and Regards,

    Tony

    ------------------------------------------------------------

    Just to show you, at the console of Chrome Developer Tool:

    Blocked a frame with origin "http://googleads.g.doubleclick.net" from accessing a frame with origin "http://www.obrasdarte.com". Protocols, domains, and ports must match.
    Blocked a frame with origin "http://cas.ny.us.criteo.com" from accessing a frame with origin "http://www.obrasdarte.com". Protocols, domains, and ports must match.
    Denying load of chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/jquery-2.0.2.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. http://www.obrasdarte.com/:1
    Denying load of chrome-extension://bjgfdlplhmndoonmofmflcbiohgbkifn/js/lib/backbone-min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. http://www.obrasdarte.com/:1
    GET chrome-extension://invalid/ http://www.obrasdarte.com/:1
    GET chrome-extension://invalid/ http://www.obrasdarte.com/:1
    Blocked a frame with origin "http://cas.ny.us.criteo.com" from accessing a frame with origin "http://www.obrasdarte.com". Protocols, domains, and ports must match.
    14
    Blocked a frame with origin "http://googleads.g.doubleclick.net" from accessing a frame with origin "http://www.obrasdarte.com". Protocols, domains, and ports must match. expansion_embed.js:81
    ne expansion_embed.js:81
    (anonymous function) expansion_embed.js:4
    8
    Blocked a frame with origin "http://googleads.g.doubleclick.net" from accessing a frame with origin "http://www.obrasdarte.com". Protocols, domains, and ports must match. expansion_embed.js:81
    ne expansion_embed.js:81
    (anonymous function) expansion_embed.js:4
    GET http://www.obrasdarte.com/deferredfunctions.js 404 (Not Found) http://www.obrasdarte.com/:46

  11. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    I'm really glad that it works for you !

    All warnings of the console looks normal with an exception of this one GET http://www.obrasdarte.com/deferredfunctions.js 404 (Not Found), but if looks like there no such file on server.

    There still one more thing you can try to make better a leverage browser caching - change this:

    <IfModule mod_expires.c>
    	ExpiresActive On
    	ExpiresByType image/gif "modification plus 6 month"
    	ExpiresByType image/jpeg "modification plus 6 month"
    	ExpiresByType image/webp "modification plus 6 month"
    	ExpiresByType image/png "modification plus 6 month"
    	ExpiresByType application/javascript "modification plus 1 month"
    	ExpiresByType text/css "modification plus 1 month"
    </IfModule>

    by this:

    <IfModule mod_expires.c>
    	ExpiresActive On
    	ExpiresByType image/gif "access plus 6 month"
    	ExpiresByType image/jpeg "access plus 6 month"
    	ExpiresByType image/webp "access plus 6 month"
    	ExpiresByType image/png "access plus 6 month"
    	ExpiresByType application/javascript "modification plus 1 month"
    	ExpiresByType text/css "modification plus 1 month"
    </IfModule>

    It will set caching timeout for images to 6 month since last access, in place of modification time.

    And why don't you try a "Load CSS asynchronously" option with "(default)Inserting all CSS styles inline into the document" setting. And possibly adding your theme main css to exceptions: jarida/style.css

  12. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Please, update the plugin - option to exclude .css files was a little broken.

  13. Tony Franco
    Member
    Posted 10 months ago #

    Hi elCHAVALdelaWEB! :)

    About the deferredfunctions.js, last week i saw this advice by pagespeed, so i put this code at the field "add in <head> tag", of the theme jarida options. The image: (http://clip2net.com/s/5RBldp)

    At this moment, i created a file deferredfunctions.js with this code and put at http://www.obrasdarte.com , and at the Developer Tool, that message disappeared, but in articles (like http://www.obrasdarte.com/intenso), the message returns.. so i think this is working just for the principal page...

    About the leverage browser caching, i made the changes that you said, and i don´t know if i´m very impressed with the speed, but it look likes that even getting better! :)

    The actual settings for Async JS and CSS: (http://clip2net.com/s/5RAd9X). There is something i need to ask you, i noted that for the moment the JQuery Lightbox is not working, when a photo is clicked, the photo is not opened by lightbox...

    CSS is loading asynchronously with the settings that you said! :)

    I´m here man!! Thank you !!

    Regards,

    Tony

  14. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Good to hear!
    Now you have 87 point on pingdom and 71/87 on Insights I don't think you can do something more to make it to load faster. Majority of problems are external to your site (Google Ads and Google user content, etc.)
    Last thing you can try is to update the plugin and to try "Inserting all CSS styles inline into the document HEADER" option removing jarida/style.css from exceptions list. (with that option it will be included in header avoiding page flickering at beginning).

    Talking about the lightbox problem, I think it's the same as Colorbox has - in their main .js file some functions are used BEFORE (phisically in file) they are defined. The solution would be to put jQuery(document).ready({....}) part at the end of file. But also you can just add their file to the exceptions list. Just add
    wp-jquery-lightbox
    and possibly if there still some problems with light box also:
    wp-jquery-lightbox-swipe

  15. Tony Franco
    Member
    Posted 10 months ago #

    Hi elCHAVALdelaWEB,

    Thanks by the advices!

    I have updated the plugin, and had put the settings you said.

    That´s interesting you commented about this page flickering, i took a picture, could you confirm if is this?: http://clip2net.com/s/5RHiIg

    About the deferredfunctions.js, i take out the file and the function from the head theme´s option.. what do you think, is better with or without it?

    The actual config: http://clip2net.com/s/5RHsLr

    wp-jquery-lightbox is not working yet.

    Regards, Tony

  16. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Ok, I can see that "Inserting all CSS styles inline into the document HEADER" option has not applied, there was a little bug. Now it's fixed. Try to update the plugin.

  17. Tony Franco
    Member
    Posted 10 months ago #

    Hi elCHAVALdelaWEB,

    Updated!

    Lightbox still off.

    I can see a big difference, when it is loading the principal (obrasdarte.com), and a secondary page (obrasdarte.com/esquizo). In the first make the flickering, but in the second, doesn´t...

    The settings still the same!

    Regards, Tony

  18. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    I think it could be the cache. I see you are using some plugin for it. Try to clear cache.
    Because with that option the css code should appear at the beginning of webpage code, but it still appears at the end.

  19. Tony Franco
    Member
    Posted 10 months ago #

    done!

    It look likes get out of square.

  20. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    I see... It looks like this option is worse for you because of too much css code inserted before the conten - the scores are lower. Also some css code is loaded before it sould. Switch back to "(default)Inserting all CSS styles inline into the document FOOTER".

    But, hey, now I see a Lightbox working ! Probably it was a cache issue and excluding helped.

  21. Tony Franco
    Member
    Posted 10 months ago #

    i´m having difficulties to come back...

    on chrome it look likes ok, but on i.e. it´s out...

  22. Tony Franco
    Member
    Posted 10 months ago #

    seems the problem is that even if i disable the css loading async, the system doesn´t come back..

  23. Tony Franco
    Member
    Posted 10 months ago #

    done!!

    mannn, things here get dark... :)

    finally come back!!!

    it looks likes, plugin, makes the alterations permanent...

    :)

    Thanks and Regards,

    Tony

  24. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Ok, so it was a cached styles.
    Anyway, it looks that putting something like this before wp_head() function in your header.php file of the template repairs everithing:

    * {
      margin:0px;
      padding:0px;
    }
  25. Tony Franco
    Member
    Posted 10 months ago #

    Hi elCHAVALdelaWEB, :)

    I put the plugin to work again, but in the moment just with the JS loading, with the settings you said.

    About the header.php, i will put it to you below: (where do i insert the code?)

    Thanks and Regards,

    Tony

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php wp_head(); ?>
    </head>
    <?php global $is_IE ?>
    <body id="top" <?php body_class(); ?>>
    <div class="background-cover"></div>
    <div class="wrapper<?php if(tie_get_option( 'theme_layout' ) == 'full') echo ' full-site'; if(tie_get_option( 'columns_num' ) == '2c') echo ' layout-2c'; ?>">
    <?php if(!tie_get_option( 'top_menu' )): ?>
    <div class="top-nav <?php echo tie_get_option( 'top_left' ); ?>">
    <div class="container">
    <div class="search-block">
    <form method="get" id="searchform" action="<?php echo home_url(); ?>/">
    <input class="search-button" type="submit" value="<?php if( !$is_IE ) _e( 'Search' , 'tie' ) ?>" />
    <input type="text" id="s" name="s" value="<?php _e( 'Search...' , 'tie' ) ?>" onfocus="if (this.value == '<?php _e( 'Search...' , 'tie' ) ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e( 'Search...' , 'tie' ) ?>';}" />
    </form>
    </div><!-- .search-block /-->
    <?php tie_get_social( 'yes' , 'flat' , 'tooldown' , true ); ?>

    <?php
    if( tie_get_option( 'top_left' ) == 'head_menu' )
    wp_nav_menu( array( 'container_class' => 'top-menu', 'theme_location' => 'top-menu', 'fallback_cb' => 'tie_nav_fallback' ) );
    elseif(tie_get_option( 'top_left' ) == 'head_brnews')
    tie_include( 'breaking-news' );
    ?>
    </div>
    </div><!-- .top-menu /-->
    <?php endif; ?>

    <div class="container">
    <header>
    <div class="header-content">
    <?php $logo_margin =''; if( tie_get_option( 'logo_margin' )) $logo_margin = ' style="margin-top:'.tie_get_option( 'logo_margin' ).'px"'; ?>
    <div class="logo"<?php echo $logo_margin ?>>
    <?php if( !is_singular() ) echo '<h1>'; else echo '<h2>'; ?>
    <?php if( tie_get_option('logo_setting') == 'title' ): ?>
    /"><?php bloginfo('name'); ?>
    <span><?php bloginfo( 'description' ); ?></span>
    <?php else : ?>
    <?php if( tie_get_option( 'logo' ) ) $logo = tie_get_option( 'logo' );
    else $logo = get_stylesheet_directory_uri().'/images/logo.png';
    ?>
    " href="<?php echo home_url(); ?>/">
    <img src="<?php echo $logo ; ?>" alt="<?php bloginfo('name'); ?>" /><?php bloginfo('name'); ?> <?php bloginfo( 'description' ); ?>

    <?php endif; ?>
    <?php if( !is_singular() ) echo '</h1>'; else echo '</h2>'; ?>
    </div><!-- .logo /-->
    <?php tie_banner('banner_top' , '<div class="ads-top">' , '</div>' ); ?>
    <div class="clear"></div>
    </div>
    <?php $stick = ''; ?>
    <?php if( tie_get_option( 'stick_nav' ) ) $stick = ' class="fixed-enabled"' ?>
    <nav id="main-nav"<?php echo $stick; ?>>
    <div class="container">
    <?php wp_nav_menu( array( 'container_class' => 'main-menu', 'theme_location' => 'primary' ,'fallback_cb' => 'tie_nav_fallback' ) ); ?>
    </div>
    </nav><!-- .main-nav /-->
    </header><!-- #header /-->

    <?php
    $sidebar = '';
    if( tie_get_option( 'sidebar_pos' ) == 'left' ) $sidebar = ' sidebar-left';
    elseif( tie_get_option( 'sidebar_pos' ) == 'nleft' ) $sidebar = ' sidebar-narrow-left';
    elseif( tie_get_option( 'sidebar_pos' ) == 'nright' ) $sidebar = ' sidebar-narrow-right';

    if( is_singular() ){
    $get_meta = get_post_custom($post->ID);

    if( !empty($get_meta["tie_sidebar_pos"][0]) ){
    $sidebar_pos = $get_meta["tie_sidebar_pos"][0];

    if( $sidebar_pos == 'left' ) $sidebar = ' sidebar-left';
    elseif( $sidebar_pos == 'full' ) $sidebar = ' full-width';
    elseif( $sidebar_pos == 'right' ) $sidebar = ' sidebar-right';
    elseif( $sidebar_pos == 'nright' ) $sidebar = ' sidebar-narrow-right';
    elseif( $sidebar_pos == 'nleft' ) $sidebar = ' sidebar-narrow-left';
    }
    }
    ?>
    <div id="main-content" class="container<?php echo $sidebar ; ?>">

  26. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    Hi,
    just before this line:
    <?php wp_head(); ?>
    insert

    <style>
    * {
      margin:0px;
      padding:0px;
    }
    </style>
  27. Tony Franco
    Member
    Posted 10 months ago #

    Dear elCHAVALdelaWEB, :)

    Sorry about the delay!

    I made the settings of the CSS: http://clip2net.com/s/5ShZQL

    You were right! all was repair!! :)

    Thanks and Regards,

    Tony

  28. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    You are wellcome !
    If it is not too dificult, you can write some review or make some donation. Both things are avalible on the plugin's page.
    Nothing is mandatory of course ;)

  29. elCHAVALdelaWEB
    Member
    Plugin Author

    Posted 10 months ago #

    I will mark this thread as resolved for now, but if you have some problems or suggestions, you are allways wellcome to write it here or in separate thread.

  30. Tony Franco
    Member
    Posted 10 months ago #

    Thank you very much elCHAVALdelaWEB!! :)

    In this moment i can do the review, but i will not forget the donation! :)

    I have just two questions:

    1- Plugin doesn´t causes delay at admin panel or blank page? do you notice something?

    2- About the flickering of the menu (http://clip2net.com/s/5RHiIg), there is a way to it doesn´t make?

    Thanks and Regards,

    Tony

Reply »

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.