How to remove render-blocking javascript and optimize css in above the fold content?

[asabet]

Google's Page Speed Insights tells me the following:

Remove render-blocking JavaScript:
http://ajax.googleapis.com/…iloader-...r-dom-event.js
http://ajax.googleapis.com/…build/co...n-min.js?v=422
http://www.leicaplace.com/clientscri...-core.js?v=422
http://www.leicaplace.com/…clientscr...htbox.js?v=422
http://www.leicaplace.com/clientscri...n_md5.js?v=422

Optimize CSS Delivery of the following:
http://www.leicaplace.com/…style0000...s?d=1420990506
http://www.leicaplace.com/…/style000...s?d=1420990506
http://www.leicaplace.com/…pt/vbulle...3l/postbit.css
http://www.leicaplace.com/…t/vbullet...l/lightbox.css
http://www.leicaplace.com/…vbulletin...adv_portal.css

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.

[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.

[Max Taxable]

Originally Posted by Dave

- 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.

[Dave]

Originally Posted by Max Taxable

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)

[Max Taxable]

Originally Posted by Dave

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.

[HM666]

Originally Posted by 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.

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.

[Max Taxable]

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.

[Dave]

Originally Posted by Max Taxable

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

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.

[Max Taxable]

Originally Posted by Dave

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.

[Max Taxable]

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.