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-dom-event/yuiloader-dom-event.js
http://ajax.googleapis.com/…build/connection/connection-min.js?v=422
http://www.leicaplace.com/clientscript/vbulletin-core.js?v=422
http://www.leicaplace.com/…clientscript/vbulletin_lightbox.js?v=422
http://www.leicaplace.com/clientscript/vbulletin_md5.js?v=422

Optimize CSS Delivery of the following:
http://www.leicaplace.com/…style00003l/main-rollup.css?d=1420990506
http://www.leicaplace.com/…/style00003l/additional.css?d=1420990506
http://www.leicaplace.com/…pt/vbulletin_css/style00003l/postbit.css
http://www.leicaplace.com/…t/vbulletin_css/style00003l/lightbox.css
http://www.leicaplace.com/…vbulletin_css/style00003l/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 (https://developers.google.com/speed/docs/insights/BlockingJS), 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 (http://cssminifier.com/) your CSS templates, be sure to keep a copy of the normal beautified version of your CSS templates.

[Max Taxable]

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

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]

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. (http://ozzmodz.com/forumdisplay.php/93-vBulletin-Optimization)

[HM666]

A) According to this (https://developers.google.com/speed/docs/insights/BlockingJS), 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 (http://cssminifier.com/) 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]

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. (http://ozzmodz.com/forumdisplay.php/93-vBulletin-Optimization)

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.

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]

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.

[asabet]

A) According to this (https://developers.google.com/speed/docs/insights/BlockingJS), 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.

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.

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

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. (http://ozzmodz.com/forumdisplay.php/93-vBulletin-Optimization)

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.

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.

[Max Taxable]

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.

[Max Taxable]

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. :D Nothing you can do there.

[Max Taxable]

Here's two of the flash objects, they're present in every test I run and take up about 77kb.

URL: http://ds.serving-sys.com/BurstingRes//Site-501/Type-2/21ca2a22-3446-40ed-a00d-e0f68b03fe79.swf
Host: ds.serving-sys.com
IP: 23.0.160.83
Location: Akamai
Error/Status Code: 200
Client Port: 59942
Start Offset: 2.324 s
Time to First Byte: 36 ms
Content Download: 61 ms
Bytes In (downloaded): 39.2 KB
Bytes Out (uploaded): 0.5 KB

URL: https://secure.img-cdn.mediaplex.com/0/12309/207334/159284_us_cs_li_fy15q4w01_oa_Workstations-Engineering_300x250_iip-.swf
Host: secure.img-cdn.mediaplex.com
IP: 23.203.54.26
Location: Akamai
Error/Status Code: 200
Client Port: 59950
Start Offset: 3.010 s
Time to First Byte: 46 ms
Content Download: 35 ms
Bytes In (downloaded): 38.3 KB
Bytes Out (uploaded): 0.5 KB

[asabet]

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.

[Max Taxable]

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.I've not seen you have these issues affecting pageload. Because they're not. But, you're convinced you need it. All I do is recommend what works for speed and optimization, every time it is tried. :D

I'll let others help chase the red herring now.

[asabet]

Thank you.

--------------- Added 1421187954 at 1421187954 ---------------

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.


How about this:

https://vborg.vbsupport.ru/external/2015/01/19.jpg

[Max Taxable]

How about this:
Answered over at Ozzy's place in same thread.

But for readers here, what you're seeing isn't interference with parallel downloads, and js files actually behave differently almost every time they're downloaded. Multiple tests - as I showed in the thread at Ozz, confirm this. Plus when you test with Chrome you don't get real-world results. I recommend IE 10 for all testing.


By the way your performance is much improved, congrats! A little common sense goes a long way.

http://www.webpagetest.org/result/150114_KK_3H2/

[asabet]

I think my graphic above speaks for itself unless someone can tell me why it only looks like lightbox.js is delaying onload.

[Max Taxable]

I think my graphic above speaks for itself unless someone can tell me why it only looks like lightbox.js is delaying onload.You are visually complete when it is finished downloading. Try several tests, see the lightbox load differently each time.

Cherry picking one out of how many tests wastes whose time exactly? "Your graphic" does not represent what's really happening.

Your site is greatly faster now. As fast as any v4 out there. You should wait for someone else to come along and harpoon your js and css red herrings, I don't have time for non problems.

[asabet]

How is my site any faster now? I temporarily disabled ads to remove that variable, but my sites need ads, and when I put them back, my site speed will be the same as before.

Cherry picking one example shows that sometimes these things affect performance. As Google Page Speed Insights suggests. It's not like I randomly encountered the only time this will ever happen.

And no one is asking you specifically to make time for anything. You consider a non-issue, fair enough. For others who agree with me that it is an issue worth addressing, the thread can go on.

[Max Taxable]

How is my site any faster now? I temporarily disabled ads to remove that variable, but my sites need ads, and when I put them back, my site speed will be the same as before.You said you didn't need the ads, they weren't making you any money. And no, the site WILL be faster because now since you are caching static content.

You're worried about milliseconds, when the poorly served adverts add entire seconds. Yes I am trying not to laugh.

And no one is asking you specifically to make time for anything. You consider a non-issue, fair enough.Just like alot of folks here, I give my time freely, to help people out. Thanks for appreciating it. For others who agree with me that it is an issue worth addressing, the thread can go on.And you can be Buddy Holly then, and his Crickets. :D

A difference which makes no difference, is no difference. - Klingon Proverb.

[asabet]

You said you didn't need the ads, they weren't making you any money.

Maybe I was unclear. I have 5 sites all with the same ads. This one has little activity and makes minimal money, so it makes a good test case where I can remove the ads temporarily without affecting the bottom line. But my goal is to speed up all my sites, especially the more active ones, so a solution that involves removing my revenue streams and eliminates my ability to pay for hosting is not a solution.

You said you didn't need the ads, they weren't making you any money. And no, the site WILL be faster because now since you are caching static content.

I was caching static content all along. My .htaccess never changed. Just my score was low before because the ads affected that parameter.

[Max Taxable]

I was caching static content all along. My .htaccess never changed. Just my score was low before because the ads affected that parameter.We saw where the forum had the caching, the CMS did not. AFTER you leveraged it via .htaccess.

You're now saying you never did?

Keep up the windmill tilting though, you'll eventually knock one down.:D

[Max Taxable]

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.I do think it's funny though, and a little ironic - that google gives you ads which destroy your page speed performance, but the problem is somehow maybe a quarter second of js and css. Why not take this up with the advert providers, ask them why the adverts aren't optimized?

Fill the site full of third party junk for pennies, then wonder why the site is slow. THEN, worry about a frikkin quarter second!

Can't make this stuff up, Man.

[asabet]

I don't know what you are talking about. You thought you saw something about the CMS, but it must have been a red herring because the only thing I changed was removing Adsense, Amazon CPM, Skimlinks script, and Google Analytics script. All of which needs to go back.

My CMS is vBadvanced CMPS, in my site root. My forum is also in my site root. Both in the same place as my .htaccess. There is no way the .htaccess could leverage caching for one and not the other.


--------------- Added 1421202143 at 1421202143 ---------------

I do think it's funny though, and a little ironic - that google gives you ads which destroy your page speed performance, but the problem is somehow maybe a quarter second of js and css...Can't make this stuff up, Man.

What I think is funny is that I start a thread about how to shave a bit of time because that has been proven in many studies to have a real impact on the bottom line, and the thread gets completely derailed to the point where we're talking about asking Google to improve Adsense.

[Max Taxable]

I don't know what you are talking about. You thought you saw something about the CMS, but it must have been a red herring because the only thing I changed was removing Adsense, Amazon CPM, Skimlinks script, and Google Analytics script. All of which needs to go back.Which means you lied? Because you said you added the code we provided, to your .htaccess file.

There's no doubt of the testing. You WERE caching static content on the forum only, but not the CMS.

You LIE to people who are helping you?

[Max Taxable]

What I think is funny is that I start a thread about how to shave a bit of time because that has been proven in many studies to have a real impact on the bottom line.Studies where? By whom? Links? Sure you're not lying about that too?

[Max Taxable]

There is no way the .htaccess could leverage caching for one and not the other.I didn't say it was. If you will recall I said something is interfering because static content was NOT being cached in the CMS. And, asked to see the entire .htaccess file.

[asabet]

I'm done wasting my time with you, and since you've trashed this thread, I'm done here too.

[AndrewSimm]

The purpose of a CDN isn't to make your website load faster, though it could make some static files load faster depending on where the user is in relation to the host. Instead it is to offload static resources. If your using 10% of your CPU without a CDN then it likely isn't going to help. Instead make sure your using an op code cacher and memcache. These two things as well as vb Optimise Pro will speed your site up.

That being said it is recommended to have static content on a CDN for big sites. I have used MaxCDN as well as Cloudflare and I get better results from Cloudflare. It is also cheaper for me to run 2 sites and I can run everything through SSL. The DDoS protection is good and really an added plus for me.

A lot of people for some reason do not like Cloudflare and I can't understand why. It isn't the silver bullet but is a solid CDN and a good service. I have 1 site where it is saving around 75% request.

Here is one of my sites which is on a VPS (about to merge it onto my dedicated)

With cloudflare
http://www.webpagetest.org/result/150114_4M_8RH/

[fxdigi-cash]

This is a good topic, and I don't see why not to keep digging deeper. The vb4 board is slower compared to any other version for sure and anyone can test that. The main reason of that is the fact that there are many JavaScripts and CSS files on approximately each page while other versions of vb say vb3 has a lot less than that; at least half of the way.

Now let me be honest with you, I have spent almost 2 years trying to figure out an excellent way to make vb4 works fast yet no complete solution I found. There are many things you need to compromise from vb4 features so that it works faster.

1- reduce used features that are based Js files and inline blocks such as javascripts codes on main pages.
2- combine all css styles in one; this is something VB Co should have done themselves.

3- changing all static contents to Data URI instead of images to reduce the page load. however, the page size will increase yet that doesn't matter if you use some cache software or plugin.

4- Using CDN is a great solution for many things. if you have your own VPS or dedicated server, then CDN is great to save a lot of bandwidth. also it can protect your static content and site as well from DDOS injections either through static contents, SSL 'if you have one" and database management system such as MySql or Mariadb

I believe some people could do better solution if they have excellent programming skills using either .Net or Java.

my advise to do it yourself if you know what you are doing. if not, then hire someone skillful programmer to do it for you, but that would cost you arms and legs.

Cheers :)

[thetechgenius]

I use Google Page Speed and CloudFlare, and I also setup my own custom static domain url to serve static content, and that static domain is also on CloudFlare. And since Google Page Speed runs on the server level, the static domain runs on Google Page Speed.

My forum has to load a lot of Javascript, CSS, and other static files, my forum is very customized. And it still loads very fast, without any problems at all.

If you do get a redirect loop when you go to the AdminCP, you can easily setup a Page Rule in CloudFlare to not cache any AdminCP content, problem fixed. That is what I had to do, my AdminCP kept refreshing/reloading.

I run my entire forum on SSL/HTTPS with a legit payed for Comodo SSL Certificate too, and Cloudflare have been working really well so far.

[CAG CheechDogg]

I use Google Page Speed and CloudFlare, and I also setup my own custom static domain url to serve static content, and that static domain is also on CloudFlare. And since Google Page Speed runs on the server level, the static domain runs on Google Page Speed.

My forum has to load a lot of Javascript, CSS, and other static files, my forum is very customized. And it still loads very fast, without any problems at all.

If you do get a redirect loop when you go to the AdminCP, you can easily setup a Page Rule in CloudFlare to not cache any AdminCP content, problem fixed. That is what I had to do, my AdminCP kept refreshing/reloading.

I run my entire forum on SSL/HTTPS with a legit payed for Comodo SSL Certificate too, and Cloudflare have been working really well so far.

Interesting ... I have a Comodo SSL Certificate on my site and was told that CloudFare was not compatible with Comodo ... do you have HostGator as well?

[mykkal]

Answered over at Ozzy's place in same thread.

But for readers here, what you're seeing isn't interference with parallel downloads, and js files actually behave differently almost every time they're downloaded.

http://www.webpagetest.org/result/150114_KK_3H2/


Max, I could use your help. I'm trying to minimize CSS and javascript for my site. VB supercharge doesn't work with my version so although I understand what needs to be done... I don't know how to manually do it.

The site is in my signature.