Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 13 Jan 2015, 14:23
asabet asabet is offline
 
Join Date: Dec 2008
How to remove render-blocking javascript and optimize css in above the fold content?

Google's Page Speed Insights tells me the following:


I suppose a similar result would come for any vBulletin 4 site. Has anyone figured out how to:

A) defer or async the javascript so that it is no longer render blocking without breaking functionality

B) Inline and/or combine the mentioned CSS so that it is faster

Would appreciate some pointers.

Last edited by asabet; 13 Jan 2015 at 16:33.
Reply With Quote
  #2  
Old 13 Jan 2015, 14:28
Dave Dave is offline
 
Join Date: Jun 2010
Real name: Dave
A) According to this, you need to add the async attribute to all script tag references. I'm not sure if that will work though.

B) You could merge a bunch of CSS templates together in vBulletin, but this may result in issues when a certain template doesn't load certain CSS templates.
You other options are:
- Use something such as Cloudflare or Incapsula to optimize your site.
- Minify your CSS templates, be sure to keep a copy of the normal beautified version of your CSS templates.
__________________
https://technidev.com - security, development, exploits, vBulletin
dave[at]technidev[dot]com

Contact me for custom vBulletin 3/4 work & server/website management.
Reply With Quote
  #3  
Old 13 Jan 2015, 14:36
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by Dave View Post
- Use something such as Cloudflare or Incapsula to optimize your site..
Those don't optimize anything and also add a significant amount of first byte time. They just try to load cached static content from a location closer to the user than the host is. If that content is fat, it will still be fat when it's delivered through a CDN.

To the OP: I don't use or recommend Google PageSpeed. Try http://webpagetest.org instead.
Reply With Quote
  #4  
Old 13 Jan 2015, 14:44
Dave Dave is offline
 
Join Date: Jun 2010
Real name: Dave
Originally Posted by Max Taxable View Post
Those don't optimize anything and also add a significant amount of first byte time. They just try to load cached static content from a location closer to the user than the host is. If that content is fat, it will still be fat when it's delivered through a CDN.

To the OP: I don't use or recommend Google PageSpeed. Try http://webpagetest.org instead.
Well, I consider minifying of CSS/JS files and the HTML output as optimizing.
When I disable Cloudflare on my forum it loads slower than when it's enabled.

If OP wants another tip, optimize all of your images with https://kraken.io/web-interface (choose lossless unless you don't mind losing a bit of quality)
__________________
https://technidev.com - security, development, exploits, vBulletin
dave[at]technidev[dot]com

Contact me for custom vBulletin 3/4 work & server/website management.
Reply With Quote
  #5  
Old 13 Jan 2015, 14:47
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by Dave View Post
When I disable Cloudflare on my forum it loads slower than when it's enabled.
Is that subjective? Or objectively and scientifically tested? Because I bet when you use a browser that hasn't cached any of your content, you'll be really disappointed at how little CF helps you.

Go to webpagetest dot org and run the tests both ways to see what I mean.
If OP wants another tip, optimize all of your images with https://kraken.io/web-interface (choose lossless unless you don't mind losing a bit of quality)
His entire page only loads around 540 kb. Pretty light as it is.






Meanwhile, again to the OP - At Ozzmodz we have a vBulletin optimization forum with actual case histories and actual results, how-to, and tips.

Here.
Reply With Quote
  #6  
Old 13 Jan 2015, 14:55
HM666's Avatar
HM666 HM666 is offline
 
Join Date: Jan 2014
Real name: Len Kaiser
Originally Posted by Dave View Post
A) According to this, you need to add the async attribute to all script tag references. I'm not sure if that will work though.

B) You could merge a bunch of CSS templates together in vBulletin, but this may result in issues when a certain template doesn't load certain CSS templates.
You other options are:
- Use something such as Cloudflare or Incapsula to optimize your site.
- Minify your CSS templates, be sure to keep a copy of the normal beautified version of your CSS templates.
Be careful with Incapsula its quite annoying and can cause problems. I've had a client that had this installed and it was a nightmare to work with and get it uninstalled.
Reply With Quote
  #7  
Old 13 Jan 2015, 14:56
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
By the way, also to the OP - you have a flash object that is 14.5 percent of your pageload. If ever there was something that would interrupt, slow down or block render, it's a flash object. Especially a big one.

Just FYI.
Reply With Quote
  #8  
Old 13 Jan 2015, 15:12
Dave Dave is offline
 
Join Date: Jun 2010
Real name: Dave
Originally Posted by Max Taxable View Post
Is that subjective? Or objectively and scientifically tested? Because I bet when you use a browser that hasn't cached any of your content, you'll be really disappointed at how little CF helps you.

Go to webpagetest dot org and run the tests both ways to see what I mean.His entire page only loads around 540 kb. Pretty light as it is.






Meanwhile, again to the OP - At Ozzmodz we have a vBulletin optimization forum with actual case histories and actual results, how-to, and tips.

Here.
I'm not going to scientifically test something just to prove a point. I simply checked the total loading time of all resources with and without Cloudflare (non-cached and cached versions). If your test results are different than mine then that's completely fine, but I will still be supportive of Cloudflare. On big forums every ms and saved kb matters.

Besides that I also use Cloudflare to prevent DDoS attacks (instead of buying an expensive server with DDoS protection), gaming forums are target for such attacks all the time. I used to receive attacks weekly but since I enabled Cloudflare, 2 years ago, I haven't received a single attack.

Originally Posted by HM666 View Post
Be careful with Incapsula its quite annoying and can cause problems. I've had a client that had this installed and it was a nightmare to work with and get it uninstalled.
I have 0% experience with Incapsula so I'll trust your word.

@OP: if you want to optimize some more, you could consider using memcached for vBulletin, using MariaDB instead of MySQL and nginx instead of Apache.
__________________
https://technidev.com - security, development, exploits, vBulletin
dave[at]technidev[dot]com

Contact me for custom vBulletin 3/4 work & server/website management.
Reply With Quote
  #9  
Old 13 Jan 2015, 16:16
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by Dave View Post
I'm not going to scientifically test something just to prove a point. I simply checked the total loading time of all resources with and without Cloudflare (non-cached and cached versions). If your test results are different than mine then that's completely fine, but I will still be supportive of Cloudflare. On big forums every ms and saved kb matters.
Checked how? With your own browser and your own connection? Timed it how, with a stopwatch? We do objective and scientific tests not to "prove a point" but to learn objectively, what is really going on.

CF DOES increase first byte time, DOES delay the "handshake." All CDNs do. The CF people even admit it now after denying it, deflecting, making excuses and naysaying for over two years. It's the nature of the beast.

Besides that I also use Cloudflare to prevent DDoS attacks (instead of buying an expensive server with DDoS protection), gaming forums are target for such attacks all the time. I used to receive attacks weekly but since I enabled Cloudflare, 2 years ago, I haven't received a single attack.
CF is a answer for a very small percentage of vBulletin installations. But it is NOT a answer to optimization. If your site is not optimized, CF and other CDNs don't do that for you.

I don't recommend CF or any other CDN as a broad brush, fix it quick, one size fits all solution. The OP is a good example - he's only delivering 540kb to browsers, he doesn't need a CDN. He needs actual optimization help. And at that, he really doesn't need much of it. His main issue is leveraging browser cache of static assets and that's a very simple thing to do with vBulletin on Linux.

I'm not trying to knock you Dave. You believe what you believe for the reasons you believe them and I respect that. But I've fixed dozens of really ill, truly sick, vB installations over the last few years and not one of them needed a CDN to do it. It's the last thing I consider when trying to help with actual problems for folks. Fix the basic stuff first.
Reply With Quote
  #10  
Old 13 Jan 2015, 16:23
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
I mean, look at this test on the site in your signature which I assume is yours. You are failing both first byte AND leverage browser cache of static assets - and this is WITH the CDN active.

http://www.webpagetest.org/result/150113_NR_ZKE/

Turn off the CDN, and run this exact test again with the exact browser and location parameters you see there, and I guarantee your first byte time improves.

It's not subjective - this is a real world test with a real browser and a real internet connection.
Reply With Quote
  #11  
Old 13 Jan 2015, 16:33
asabet asabet is offline
 
Join Date: Dec 2008
Originally Posted by Dave View Post
A) According to this, you need to add the async attribute to all script tag references. I'm not sure if that will work though.

B) You could merge a bunch of CSS templates together in vBulletin, but this may result in issues when a certain template doesn't load certain CSS templates.
Those are the kinds of things I was thinking about, but I was hoping someone had gone down that road and could tell me exactly what to do.

Originally Posted by Max Taxable View Post
To the OP: I don't use or recommend Google PageSpeed. Try http://webpagetest.org instead.
I use both, and they both indicate that those JS and CSS are delaying page load.

Originally Posted by Dave View Post
When I disable Cloudflare on my forum it loads slower than when it's enabled....

If OP wants another tip, optimize all of your images with https://kraken.io/web-interface (choose lossless unless you don't mind losing a bit of quality)
Cloudflare seemed to lower my Adsense revenue. I do need to optimize my images...

Originally Posted by Max Taxable View Post
Meanwhile, again to the OP - At Ozzmodz we have a vBulletin optimization forum with actual case histories and actual results, how-to, and tips.

Here.
I've read there - lot's of good tips there that I have implemented. But I didn't see anything about inlining or combining vBulletin CSS or about defering/async for vBulletin scripts.

Originally Posted by Max Taxable View Post
By the way, also to the OP - you have a flash object that is 14.5 percent of your pageload. If ever there was something that would interrupt, slow down or block render, it's a flash object. Especially a big one.

Just FYI.
Must have been an ad. There's no flash in my website. The Google ads are asynchronous and thus don't delay page loading. The Amazon ads are not async, but they pay very well.
Reply With Quote
  #12  
Old 13 Jan 2015, 16:38
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by asabet View Post
I use both, and they both indicate that those JS and CSS are delaying page load.
There's no indication of that at all, here.

http://www.webpagetest.org/result/150113_Y3_W40/

There aren't any delays in your waterfall. Everything is loading nicely, uninterrupted.

The only real issue you have is cache of static content. Pretty sure you fix that, reading the article at OzzModz about speeding up your site via .htaccess and the one about speeding up your site via AdminCP.
Reply With Quote
  #13  
Old 13 Jan 2015, 16:41
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Originally Posted by asabet View Post
The Google ads are asynchronous and thus don't delay page loading.
This is a myth. They still add kb load to your page therefore, do take time to render. They're also from a third party - if there's a slow load from the 3rd party that means a slow load for you.

Part of the compromise to monetize, as they say. Nothing you can do there.
Reply With Quote
  #14  
Old 13 Jan 2015, 17:03
Max Taxable's Avatar
Max Taxable Max Taxable is offline
 
Join Date: Feb 2011
Here's two of the flash objects, they're present in every test I run and take up about 77kb.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Reply With Quote
  #15  
Old 13 Jan 2015, 17:11
asabet asabet is offline
 
Join Date: Dec 2008
Originally Posted by Max Taxable View Post
Here's two of the flash objects, they're present in every test I run and take up about 77kb.

[PHP]URL: http://ds.serving-sys.com/BurstingRes//Site-501/Type-2/21ca2a22-3446-40ed-a00d-e0f68b03fe79.swf
Host: ds.serving-sys.com...
I don't know what those are - maybe in one of the posts featured on the front page?

But please, let's keep this on the OP topic - whether the JS and CSS that are native to vB 4 can be defered and/or optimized in such as way as to speed page load. For all other ways to speed page load, we can have another thread.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 05:58.

Layout Options | Width: Wide Color: