Hi,
I was optimizing my website:
https://forum.tagdiv.com/how-to-make-the-site-faster/
Did a pagespeed test:
Got 3 blocking CSS resources:
http://fonts.googleapis.com/…s?family=Open+Sans%3A400%2C700&ver=4.2.4
http://www.windowsmechanic.com/…ser/assets/css/js_composer.css?ver=4.6.2
http://www.windowsmechanic.com/…ent/themes/Newspaper/style.css?ver=6.3.2
http://www.windowsmechanic.com/…ser/assets/css/js_composer.css?ver=4.6.2
http://fonts.googleapis.com/…00,400italic,700,500italic,400?ver=6.3.2
Also following JS:
http://ajax.googleapis.com/…s/jquery/1.11.1/jquery.min.js?ver=1.11.1
http://www.windowsmechanic.com/…wspaper/js/tagdiv_theme.min.js?ver=6.3.2
So I added the code in functions.php to get the list of registered css and js. Here is the result
registered scripts:
td-site-min | http://www.windowsmechanic.com/wp-content/themes/Newspaper/js/tagdiv_theme.min.js
jquery | http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
registered styles:
google_font_roboto |
google-fonts-style | http://fonts.googleapis.com/css?family=Open+Sans:400,700
js_composer_front | http://www.windowsmechanic.com/wp-content/plugins/js_composer/assets/css/js_composer.css
td-theme | http://www.windowsmechanic.com/wp-content/themes/Newspaper/style.css
So I decided to edit the plugin (td-speed-booster/td-speed-booster.php) and added following code:
$this->move_style_to_footer(‘google-fonts-style’);
$this->move_style_to_footer(‘js_composer_front’);
$this->move_style_to_footer(‘td-theme’);
The moment I add this, page speed says that they get 500 error code and website never loads. I added at following location.
if ($this->is_ie === false) {
// move style.css theme style
$this->move_style_to_footer(‘google-fonts-style’);
$this->move_style_to_footer(‘js_composer_front’);
$this->move_style_to_footer(‘td-theme’); // $this->move_style_to_footer_queue(‘td-theme’); //this is the main style of the theme. It’s only moved on Newspaper 6!
}
I suspect that I may be adding in wrong place.. I am yet to move the js to footer. Am stuck with css.
Can you tell me what I am doing wrong please. Any kind feedback is highly appreciated.
Thank you.
Hi,
Can someone have a look and advice please.
Regards
Siraj
Hi
Please make sure you added the code in the right place for Newspaper theme: http://screencast.com/t/3vBx7m44UYv Also notice that the plugin deactivate itself automatically if detect an incompatible plugin, we added this measure to avoid conflicts with plugins that won’t allow to move their resources at the bottom of the page.
You can check if Speed Booster it’ active in System status: http://screencast.com/t/moA7E5Grc
If you always want to keep the plugin active comment this lines: http://screencast.com/t/ko9Xk7qdlXhn
Hope this help.
Thanks!
Thank you. I will try this.
Regards
Siraj
Hi
Okay, I followed your instructions to move CSS and used following code:
$this->move_style_to_footer_queue(‘td-theme’);
$this->move_style_to_footer_queue(‘js_composer_front’);
$this->move_style_to_footer_queue(‘google-fonts-style’);
and I did pagespeed test at:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.windowsmechanic.com%2F
Under the Desktop section, I find most of the CSS have moved to footer and “Eliminate render-blocking JavaScript and CSS in above-the-fold content” now kinda Okay. Good Job here and thank you for help.
But under Mobile section of page speed (please check my pagespeed link), I do find same CSS files are blocking. Especially google fonts. But we already have the following codes in the td-speed-booster.php
$this->move_style_to_footer_queue(‘google_font_open_sans’);
$this->move_style_to_footer_queue(‘google_font_roboto’);
$this->move_style_to_footer_queue(‘td-theme’);
$this->move_style_to_footer_queue(‘js_composer_front’);
$this->move_style_to_footer_queue(‘google-fonts-style’);
Any Idea why the same CSS blocking message appears again under the mobile section of page speed ?
Do we have any other section in td-speed-booster.php where I need to add code to change my pagespeed score (Mobile) higher?
Regards
Siraj
Hi Andrei,
Do you have any feedback on this
Regards
Siraj
Hi
I’ve checked your site and noticed that your fonts and js files are moved to the footer, but google evaluate the page speed on mobile different than on desktop. Evan if those resources are moved to the footer for some reasons they still appear like they are blocking the page render process.
You can also see this on our demo: http://screencast.com/t/i8oicyBB
Notice that google it’s much more restrictive with the plugins on mobile site’s version, because some may cause problems for the user when visit the site on mobile devices. It’a good practice to keep only the necessary plugins installed, also chose carefully what plugins you’re using because some of them may slow down the site if are not written ok.
Thanks for the message!
Thank you for the expert advice Andrei. Much appreciated. You guys are giving first class support and no wonder why your themes are selling like hot cakes.
Regarding plugins, I am using following Contact Form7, SEO by Yoast, Akismet, WPSmush it, w3 total cache, regenerate plugin, visual composer and tag div speed booster.
I used w3 total cache because it gave me better score.
I am aware Akismet is not supported by speed booster so what I did is i removed the code from speed booster so it won’t get disabled.
So I am not finding anything to disable except I need to start looking for Chris WordPress Pagespeed optimization tricks.
Can we disable Visual Composer when website is UP and running? Or is it always needs to be there even when I am not editing any pages or homepage?
Regards
Siraj
Hi
The Visual Composer plugin must be enabled, otherwise the the theme won’t display correct the blocks, grids and other elements added with this plugin on the page. If you deactivate the VC plugin result would be something like here: http://screencast.com/t/6y307RVO4
Thanks!
