Hi,
As my website loads up, the grey placeholder boxes for my home page appear. This is fine as there are a few pictures on my site and its understandable. Unfortunately the main menu bar also shows up, with my logo icon, and my main menu items in the default text and in the default colour blue.
This could last for 1-2 seconds while the page loads and doesn’t look great. My theme colour of choice is red, as is the background, and the text is quite different. It looks bad as the site is loading and I wondered is this because of the update to the website? I havnt changed anything else, and the site has been loading like this for a couple of weeks now.
If you could help me out I would be very grateful. I get around 1000 views a day and I wouldnt like to give a bad impression.
Thanks,
Gordon
http://www.thoseconspiracyguys.com
Hi,
Unfortunately when you add too many elements to your site, it could take some time for it to load andf for css to apply all the code.This is the way css works, it applies the code in cascades so if the loading times are not so good, you can see this effect. Also if you move css render blocks to footer, this is also a result of that action as the style will wait for other elements to load first. The easiest way to improve this rewrite is to make css changes directly in style.css. You can try to move the code from the theme panel-> custom css box into the style.css file directly.
Thank you!
Hi Bogdan,
It never did that before! I have even removed a lot of plugins that I had installed to speed up the site performance and now it loads quite quickly. But it does still have that ugly blue bar at the top. It has only been in the last few weeks, maybe since the theme update, but I never had this before and, as I said, I have had a lot more elements to load. Can you have a look at the site and try to understand what the problem is because it looks bad. What does move the render blocks to footer mean? I have not made big changes to the theme really. Added some small images as sidebar elements, a few pictures, and changed the colour. Its nothing major and shouldnt cause the site to look like this when it worked fine before. Here are some examples http://imgur.com/a/Cy9F9 and this stays like this for 1 second as the page loads up.
Please let me know how I should proceed,
Thanks,
Gordon
http://www.thoseconspiracyguys.com
Hi,
Please disable ALL your plugins except visual composer, clear cache and reset cdn files. Then test again to see if there is any improvement. Please follow this guide https://forum.tagdiv.com/how-to-make-the-site-faster/ as i have checked your site with google pagespeed and saw that you need to optimize your site.
Thank you!
Hey,
I am hosted with Managed WordPress so I cant put a cache plugin on the site. I do have minified CSS and JS, I have optimised all the images and I have tested it with no plugins working. The site loads up fine at the speed it is now, its just the blue bars and the text that I dont like. There is surely a way to stop it? It wasnt like that 2 weeks ago?
Regards,
Gordon
Hi,
The effect you are seeing is resolved by the solutions I posted above. Either increase your loading speed following the guide I provided or modify the colors directly inside the style.css file. There is no other alternative. If you say that this error did not occur 2 weeks ago, please revert any changes made since then (but we have no reports of the theme update or the new version of WP to cause this)
Thank you!
Hi,
Could you tell me where exactly I need to modify the colours and the fonts in the CSS. I can go ahead and do this but to find exactly where this is would be very difficult. I know its some where near td-header-menu-wrap-full but I cant seem to find where that is. If you could help me out I will permanently change the CSS and font as we wont be changing it. I will also need to know where this is if we update the theme and the changes get reverted.
Thanks,
Gordon
Hi,
This is where the color is set to header 12 in style.css: http://screencast.com/t/T9Zseq4G9
As for the fonts, I think you may have them set in too many places in the fonts section. If you set a font in the general tab and then another font on the menu, css will wait until all of the parameters get to the final step. Please try to set all other fonts to default and test just the font on the main menu to see if this happens with only one font selected and go from there without adding too many re-writes.
The alternative involves adding fonts with custom css and that will be more difficult.
Thank you.
Hi Bogdan,
I’ve changed the hex code in the place you instructed me and it hasn’t made a difference to the blue bar on page load. I also want to change the fonts on the main header (red bar on top) and the sub header (black bar) at the very least. These are the fonts that look bad on page load. The rest jump into place nicely after the picture place holders come in and the blue bar turns red. I have included an image of the fonts that I use and where. Like I said, the menu bar fonts are all I need really and to change the colour of the blue bar, of course.
Thanks again,
Gordon
Hi,
Let’s try this another way. I simulated your layout with a header style 12, the theme accent color set to red, and the fonts set exactly as yours form the image you posted. Here is how it should load: http://screencast.com/t/UGhtshW5
Everything is set from the theme panel, no custom code was involved so clearly on your end there are other factors affecting this. Please try to restore the theme to it;s defaults. Try on a testing sub-domain and try it without plugins or minification to see how it displays in the theme’s default state.
Thank you!
Hi Bogdan,
I’ve gone through every one of my plugins to check if it was causing the problem before I reset all the options in the theme, and you would never guess which is the offending plugin? TagDiv Speed Booster! I am using a managed wordpress host and obviously the two don’t play nicely. I have removed this plugin and the website now loads faster and has no blue bar. I installed it after the last theme update about 3 weeks ago.
Thanks for all you help,
Gordon
Glad to see you managed to find the issue.
Best of luck on your project!
Have a great day!
Thank you Gordon, same problem solved by DISABLING TAGDIV SPEED BOOSTER.
Well I loved that plugin before, maybe TagDiv Guys should take some time to update the plugin.
Robert
Hi Robert,
Unfortunately there is little that can be done about it. If you move css to the footer, all of the styles will be loaded later and you will see each css re-write. In order to avoid this, you need coding knowledge and place your css styles directly in style.css and there is no way of adding it automatically. Alternatively, you can use speedbooster and simply remove style.css from it;s files so it will not get moved at all but you still move other render blocks.
Thank you!
How to remove style.css files from speedbooster plugin?
How to remove style.css files from speedbooster plugin?
I edited speedbooster and removed these lines from td-speed-booster.php
`/**
* here we move the css
*/
function css_mover() {
//if ($this->td_theme_name == 'Newspaper') { }
// wp 011 - Newspaper 6
$this->move_style_to_footer_queue('bbp-default-bbpress'); //bbpress old
$this->move_style_to_footer_queue('bbp-default'); // bbpress
$this->move_style_to_footer_queue('contact-form-7');
if ($this->is_ie === false) {
// move style.css theme style
$this->move_style_to_footer_queue('js_composer_front');
$this->move_style_to_footer_queue('td-theme');
$this->move_style_to_footer_queue('td-theme-child');
$this->move_style_to_footer_queue('td-theme-woo');
$this->move_style_to_footer_queue('td-theme-demo-style');
$this->move_style_to_footer_queue('td_live_css_frontend');
$this->move_style_to_footer_queue('td-theme-bbpress');
}
$this->move_style_to_footer_queue('font-awesome-four');
//@todo test on newsmag
$this->move_style_to_footer_queue('woocommerce_prettyPhoto_css'); //on product page
$this->move_style_to_footer_queue('woocommerce_frontend_styles'); //old woocommerce?
$this->move_style_to_footer_queue('woocommerce-layout');
$this->move_style_to_footer_queue('woocommerce-smallscreen');
$this->move_style_to_footer_queue('woocommerce-general');
//$this->move_style_to_footer_queue('bp-legacy-css');
//google fonts
$this->move_style_to_footer_queue('google-fonts-style');
//move revolution slider css
$this->move_style_to_footer_queue('rs-plugin-settings');
$this->move_style_to_footer_queue('genericons'); //still rev slider
//$this->move_style_to_footer_queue('js_composer_front');
}`
But still having the same issue.
The theme stylesheet in the speedbooster plugin is this one
– https://www.screencast.com/t/usBhproxtF
If you remove or comment that code the theme style.css will not be affected by the speedbooster plugin and moved to the bottom of the page.
Still not working, Please give me step by step tutorial to edit this plugin.
I did according to you but still, there is a problem in CSS.
Here is the screenshot of my tdbooster file.
https://cyberthana.com/wp-content/uploads/2018/05/Capture.png
That link is not working, it leads to a 404 page. SO by default when activated the speed booster plugin will move the theme stylesheet to the bottom of the page.
Default – https://www.screencast.com/t/hu9qpef5GyU
Speed booster active – https://www.screencast.com/t/B4h0Xhmw
If you want to modify the plugin so this does not happen, edit the plugin as mentioned
– https://www.screencast.com/t/Fenm4OjA5t
Remove or comment that line of code
– https://www.screencast.com/t/k9t6eL9BnKyn
Then check the page source again, maybe clear your cache before.
I have gone through every step you mentioned here…
Here is my tdbooster edited code
https://cyberthana.com/wp-content/uploads/2018/05/MYtdspeedboosterafterEdit.png
Here is the screenshot of my cleared cache in chrome after edit.
https://cyberthana.com/wp-content/uploads/2018/05/ChromeCachhee.png
Here is the screenshot of my wprocket cleared cache after edit
https://cyberthana.com/wp-content/uploads/2018/05/cachhe-cleared.png
After doing all the steps when I try to reload my website then still I am facing the same issue.
My website is LIVE with tdboooster plugin, so you can check what is the exact problem from your own.
Thanku
From what I can see the booster is not moving the theme stylesheet
– https://www.screencast.com/t/1F2dTE17L8
It is loaded normally. So either the modification you made is working, or the speed booster plugin is not active
– https://www.screencast.com/t/GCvtHluW
