1

Hi I have a wordpress websitse. When I try to visit that site it breaks down full layout for minimum 2 seconds. I can't understand why this is happening. I tried to use Javascript to footer plugin.

Please suggest me what happened here. And what can I do in this situation.

shock_gone_wild
  • 6,700
  • 4
  • 28
  • 52
Lemon Kazi
  • 3,308
  • 2
  • 37
  • 67

2 Answers2

2

I can see you're using Divi theme in your wordpress site. I believe the above problem is due to loading css at the end of body.

When I inspect your site, I am able to see main css file such as Divi/style.css (Parent theme style) is loading at the end of body. Hence I came to this conclusion. Try moving your css to head that would solve your problem.

Incase you're concern about site speed try moving css one by one to head.

Gopinath Shiva
  • 3,822
  • 5
  • 25
  • 48
  • css should always be loaded ASAP. Delaying loading css will result in the layout jumping around when the files finally load in. And if a css file slows your site down to a crawl, fix your css. – Arperum Aug 03 '16 at 07:00
  • Yes I agree with you, I believe he is not loading css in head mainly because of google page speed concern or to increase page speed. But yes he should take care of loading necessary css in head if not all css – Gopinath Shiva Aug 03 '16 at 07:02
  • @GopinathShiva I just disabled Javascript to footer plugin. But when I disabled that render-blocking JavaScript causing. but loading problem solved. Is there any solution? – Lemon Kazi Aug 03 '16 at 07:11
  • @LemonKazi: I have used and would recommend Autoptimize plugin - https://wordpress.org/plugins/autoptimize/ . Through this plugin you can able to move javascript to footer and has many speed improving benefits. Don't forget to give a tick if my answer helped you solving your problem... – Gopinath Shiva Aug 03 '16 at 08:26
  • Thanks I used that. Render blocking reduced but new created JS on render blocking now. OK thanks for help I am trying. – Lemon Kazi Aug 03 '16 at 08:42
  • Add newly created js file in footer using "wp_footer" action http://stackoverflow.com/questions/4221870/how-to-put-my-javascript-in-the-footer - this loads js file only in footer – Gopinath Shiva Aug 03 '16 at 08:47
0

This is because you are writing the link rel="stylesheet" which is poor poor practice. Add it in head and your problems will be solved.

Do not write your main stylesheet in body tag, if you do not want that effect.

Further reading

  1. https://stackoverflow.com/a/16844668/17447
  2. load external css file in body tag
Community
  • 1
  • 1
naveen
  • 53,448
  • 46
  • 161
  • 251