i found that in td-speed-booster/td-speed-booster.php i think that works for moving css to footer 🙂
//move styles
$this->move_style_to_footer('bbp-default-bbpress'); //bpress old
$this->move_style_to_footer('bbp-default'); //bpress
$this->move_style_to_footer('contact-form-7');
$this->move_style_to_footer('td-bootstrap');
$this->move_style_to_footer('td-theme');
$this->move_style_to_footer('google-font-rest');
$this->move_style_to_footer('woocommerce_frontend_styles');can i add another plugins’ css files via tdspeedbooster?
Hi,
yes you can. The plugin also moves jquery and all the dependent files in the footer. It also activates the js buffer from Newspaper to capture all the js and output it at the end of the document after jQuery.
Use the console from chrome or firefox to see if the new plugin has errors due to jQuery at the footer. If it’s a well made plugin it will work.
You can find the css id of the plugin if you hit view source and search for it: http://screencast.com/t/xJukVynQpa (for bbpress for ex.)
Radu O.
I did like you said but still pageinsight analyze is saying that .css file is working before content 🙁
you can check it here
why don’t you use the best social sharing codes in the Newspaper, i am sorry because i have to find plugins solve for that. please optimize the social sharing codes in newspaper and save us 🙁
Most of the issues with social sharing are issues with the actual social media sites and their code which must be loaded by the theme to do things like “call” number of likes — that isn’t done by the theme. So, some things are impossible to “optimize” as they are not PageSpeed friendly. This also includes AdSense, ReCaptcha, YouTube, etc.
“the best social sharing codes” are those provided by each social media outlet with async loading; but the elements are still loading from that other site which you have zero control over.
For best PageSpeed you would need to use something like a single pill button from AddThis, or create locally hosted icon images which only “post” to the social media sites and have no interaction such as showing number of likes/shares — all that data coming from those sites like Twitter, FB, and G+ will cause PageSpeed issues.
Just some info on that. I’ve spent a ton of time on this issue and there is no perfect solution, unfortunately.
Hahaha i did it finally, i have social sharing buttons with PageSpeed %100 🙂
the Radu’s suggestion is finally works i have write the css id wrong, i fixed it and it works.
Use WPSocialite plugin and add it to tag speed booster plugin for move footer 🙂 (you have to do the “When Scroll, Run js” from the plugins settings.)
@radu you have to sticky that post because every one have to solve that Social Sharing PageSpeed problem 🙂
Best Regards
you can check my pagespeed scores my website is
Edit: When i test it 10 mins before it is %100 for all mobile pages but now it is saying there is problem with different css in just mobile? where can i do it for mobiles too?
OMG! This is exciting stuff, and hopefully you will get this all sorted as it would be great to make my life easier from a number of other hacks I’ve been doing. Bravo — keep updating on this!!! 🙂
Hi,
I’ve looked at the site and I think that the booster plugin is not working as expected. The resources seem to come from cdn.your domain .Are you using mod pagespeed or some kind of cdn optimizer?
I will try to test the WPSocialite + speedbooster and if it works well we will update the plugin.
PS. Marius is making the stars now for you now – sorry for the delay.
@Christopher – I agree with you, any social sharing badge that shows the number of likes/tweets etc comes with a cost :). There is one solution – to call the like tweets via api on server (like our social counter does) but like the social counter is very hard to maintain and it will have to make server side requests to the apis periodically for each post… that is not good. It’s almost impossible to deploy such such a thing to a lot of users and hosts combinations but I will experiment a bit with this 🙂 .
Radu O.
No i don’t use mod_pagespeed, i’m using WP Super Cache with mod_rewrite and the activated CDN option (i’m using maxCDN for cdn) in that plugin.
In addition Thanks for stars 🙂
looks great. But how do i move js? Doesn’t seem to have an ID like css does.
You just gave me an idea about how to make the speed booster plugin WAY smarter and better. I can basically make it to move scripts and styles with one click via admin. It’s a lot of work but in the future I will make it like that.
To get the list of registered styles and js, paste this at the end of you functions.php
function td_inspect_scripts() {
global $wp_scripts, $wp_styles;
echo 'registered scripts<br>';
foreach ($wp_scripts->queue as $handle) {
echo $handle . ' | ' . $wp_scripts->registered[$handle]->src . '<br>';
}
echo 'registered styles<br>';
foreach ($wp_styles->queue as $handle) {
echo $handle . ' | ' . $wp_styles->registered[$handle]->src . '<br>';
}
}
add_action( 'wp_print_scripts', 'td_inspect_scripts' );
I also added in speed booster support to easily move js via id: http://pastebin.com/BJEFS0jr
$this->move_js_to_footer('bp-legacy-js');
~ Radu O.
@Radu that worked perfectly with the JS 🙂
However after i upgraded to 3.1 today it seems the addthis css file is back in header. Did you change anything? Have I done everything correctly?
It’s just the css from addthis that wont move now.
<link rel='stylesheet' id='output-css' href='http://creactivateno.wpengine.netdna-cdn.com/wp-content/plugins/addthis/css/output.css?ver=3.8.1' type='text/css' media='all' />
Now I realize i’m using a CDN but I’ve purged the cache multiple times so it shouldn’t be the problem.
<?php
/*
Plugin Name: tagDiv speed booster
Plugin URI: http://tagdiv.com
Description: Speed booster for Newspaper theme
Author: tagDiv
Version: 2.1
Author URI: http://tagdiv.com
*/
class td_speed_booster {
var $load_contact_form_7 = '';
var $load_google_fonts = '';
var $styles_for_footer = array();
function __construct() {
add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts_hook'), 100);
add_action('wp_footer', array($this, 'wp_footer_hook'), 15);
add_action('wp_head', array($this, 'wp_head_hook'), 15);
define('TD_SPEED_BOOSTER' , 'v2.0');
}
function enqueue_scripts_hook() {
$this->move_js_to_footer('bitly-js');
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"), true, '1.10.2', true);
wp_enqueue_script('jquery');
}
//move styles
$this->move_style_to_footer('output-css');
$this->move_style_to_footer('bbp-default-bbpress'); //bpress old
$this->move_style_to_footer('bbp-default'); //bpress
$this->move_style_to_footer('contact-form-7');
$this->move_style_to_footer('td-bootstrap');
$this->move_style_to_footer('td-theme');
$this->move_style_to_footer('google-font-rest');
$this->move_style_to_footer('woocommerce_frontend_styles');
//bbpress
//remove_action( 'bbp_head', array($BBP_Default, 'head_scripts') );
}
function wp_footer_hook() {
foreach ($this->styles_for_footer as $style_id => $style_src) {
echo "<link rel='stylesheet' id='" . $style_id . "-css' href='" . $style_src . "' type='text/css' media='all' />\n";
}
}
function wp_head_hook() {
echo '<style>body {visibility:hidden;}</style>';
}
function move_style_to_footer($style_id) {
global $wp_styles;
if (!empty($wp_styles->registered[$style_id]) and !empty($wp_styles->registered[$style_id]->src)) {
$this->styles_for_footer[$style_id] = $wp_styles->registered[$style_id]->src;
wp_deregister_style($style_id);
}
}
function move_js_to_footer($js_id) {
global $wp_scripts;
wp_enqueue_script($js_id, ($wp_scripts->registered[$js_id]->src), '', $wp_scripts->registered[$js_id]->ver, true);
}
}
new td_speed_booster();
?>just perfect. Thank you!
Guys,
I’m quite new to all of this but I’m trying to improve site speed. And have 2 blocking css sources. (have read all the relevant posts, have followed Chris ‘s advice)
I’m trying to move the easy-social-share-button css files but it doesn’t seem to work. I’ve inserted below code in td-speed-booster.php
$this->move_style_to_footer('easy-social-share-buttons-css');
$this->move_style_to_footer('easy-social-share-buttons-sidebar-css');
As newspaper footer I’m using a new-made footer menu called “basis-footer”. Does that make any difference?
—
On top of above the pagespeed insight tool is suggesting to reduce CSS, JS and HTML code.
Newspaper/style.css (saving 18%)
Newspaper/td_external.js?ver=4.6.2 (saving 10%)
http://<domain> (saving 18%)
Hope you can help me. Thx in advance
Hi,
The CSS was moved in footer? Can you provide a link of your site?
Thanks!
Hi Marius,
Please look at wefundex.com
Apparently the CSS was not moved to the footer. If you check Google Pagespeed Insight on my domain, you will notice the remarks about a.) moving css to footer and b.) reduce css, js, html code.
Thx!
Hi,
I’ve checked your and just the easy social sharing css is now detected as above the content: https://developers.google.com/speed/pagespeed/insights/?url=wefundex.com&tab=desktop
If you have added it to the speed booster plugin to be moved to the footer please make sure that you have added the stylesheet id right, as instructed in the guide/”Remove render blocking css/js – using the TagDiv Speed Boosterplugin (Advanced Users)” section: https://forum.tagdiv.com/how-to-make-the-site-faster/
This is recommended for advanced users only so if you don’t have php knowledge I suggest you get someone to help you with this.
The guide provides all the info you need to do this, you have to use the function provided in the tutorial, you could try to play with the priority, some plugins may load after it and that’s why it doesn’t return all js – http://screencast.com/t/7fhfjttAT8
http://codex.wordpress.org/Function_Reference/add_action
Hope this helps!
Please make new topics about your issues in the future.
Thanks
Lucian,
The instructions are clear and it works. Thanks for your help.
But still I’m wondering why the following code isn’t moved to the footer. Below a snapshot of what pagespeed insight is saying;
http://ajax.googleapis.com/…s/jquery/1.11.1/jquery.min.js?ver=1.11.1
http://<mydomain>.com/…es/Newspaper/js/td_external.js?ver=4.6.2
http://<mydomain>.com/…s/Newspaper/js/min/site.min.js?ver=4.6.2
http://<mydomain>.com/…cludes/js/comment-reply.min.js?ver=4.1.1
http://fonts.googleapis.com/…ed:400italic,700italic,400,700?ver=4.6.2
http://<mydomain>.com/…nal/bootstrap/td-bootstrap.css?ver=4.6.2
http://<mydomain>.com/…ent/themes/Newspaper/style.css?ver=4.6.2
http://<mydomain>.com/…ssets/css/essb-sidebar.min.css?ver=4.6.2
http://fb.creoworx.com/…lat-retina/easy-social-share-buttons.css
I’ve identified the ID’s added the ID’s to the Speed-Booster “move-to” instruction plugin.
The screenshot after the adaptations in functions.php shows:
registered scripts
admin-bar | /wp-includes/js/admin-bar.min.js
td-external | http://<mydomain>.com/wp-content/themes/Newspaper/js/td_external.js
td-site-min | http://<mydomain>.com/wp-content/themes/Newspaper/js/min/site.min.js
jquery | http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
registered styles
admin-bar | /wp-includes/css/admin-bar.min.css
easy-social-share-buttons-sidebar |
boxes | http://<mydomain>.com/wp-content/plugins/wordpress-seo/css/adminbar.min.css
google-font-rest |
td-bootstrap |
td-theme |
But Pagespeed Insight is still complaining about it. To me it seems that the JS code isn’t moved even-though I’ve added it to the speed-booster plugin php. “easy-social-share-buttons-sidebar” and “td-bootstrap” are moved but still pagespeed is mentioning it. What can I do?
I’ve added compression and browser caching to .htaccess I’ve ran another pagespeed test and now it shows “only”;
http://fonts.googleapis.com/…ed:400italic,700italic,400,700?ver=4.6.2
http://<mydomain>.com/…nal/bootstrap/td-bootstrap.css?ver=4.6.2
http://<mydomain>.com/…ent/themes/Newspaper/style.css?ver=4.6.2
So forget my remarks above about JS but how do I get rid of the css’s above the line? Especially that google-font thing is annoying me;-)
Hi,
Try using this for the google fonts:
$this->move_style_to_footer('google-font-rest');
And this for the theme style:
$this->move_style_to_footer('td-bootstrap');
$this->move_style_to_footer('td-theme');
Hope this helps!
Thanks
Made the change but it doesn’t have any effect. Pagespeed Insight give still the above recommendations.
If the “td-inspect-scripts” in functions.php indicates;
google-font-rest |
td-bootstrap |
td-theme |
Doesn’t it mean that those CSS style are moved to the footer? (the fact that it indicates the ID but after the | no further reference)
Hi,
Please also provide your site’s URL so I can check it. Send it via email at contact@tagdiv.com if you don’t want to make it public.
The td_inspect_scripts() function returns a list of registered css and js from your site.
You could try to play with the priority, if it doesn’t return all js – http://screencast.com/t/7fhfjttAT8
http://codex.wordpress.org/Function_Reference/add_action
Thanks
