Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Excessive JFBConnect assets (CSS) loaded in head

Topic-icon Excessive JFBConnect assets (CSS) loaded in head

Active Subscriptions:

None
10 years 7 months ago - 10 years 7 months ago #35968 by Ludwig von Mises
Hi,

Previously I was not using any SCLogin modules on my pages because of Mootools. With v5.1.0 and the switch to JQuery for the SCLogin modal box, I decided to make the switch. I am very surprised at the additional CSS loaded to make this work. Even worse, pages with no SCLogin Module nor any Facebook assets whatsoever also load the JFBConnect CSS in the /media/sourcecoast/css folder.

1) This page has the SCLogin module published (button in upper-right of page), Load JQuery set to NO, Load Bootstrap styles also set to NO. Also {JFBLogin} tag embedded in Jreviews theme file.
miraargentina.com/hoteles/5370-patios-de-cafayate

The following 4 JFBConnect assets are loaded, which seems reasonable (except I have the Load Bootstrap Styles set to NO!):
<link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/sc_bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/jquery-ui-autocomplete.css" type="text/css" />
  <link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/mod_sclogin.css" type="text/css" />
<script src="/components/com_jfbconnect/includes/jfbconnect.js?v=510" type="text/javascript"></script>

2) The JomSocial page has NO SCLogin module, but does have {JFBCLogin} tag:
miraargentina.com/comunidad

The following 3 assets are loaded:
<link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/sc_bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/jquery-ui-autocomplete.css" type="text/css" />
  <script src="/components/com_jfbconnect/includes/jfbconnect.js?v=510" type="text/javascript"></script>

3) This page has NO JFBConnect modules or tags, not even a FB Like button:

miraargentina.com/listados-mas-recientes

The following assets are loaded:
<link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/sc_bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="http://cdn.miraargentina.com/media/sourcecoast/css/jquery-ui-autocomplete.css" type="text/css" />
  <script src="/components/com_jfbconnect/includes/jfbconnect.js?v=510" type="text/javascript"></script>

Point 3) is the most disturbing. Why is this all being loaded when there is no JFBConnect content being loaded? Also, I swear, but don't quote me on it, that before trying the JQuery modal popup the sc_bootstrap.css and jquery-ui-autocomplete.css files were NOT being loaded ANYWHERE on the site.

I am an optimization freak, and loading three different CSS files just for a modal popup is unacceptable, so here are my questions/observations:

a) The three CSS files in question are small. Can they not be combined into only one CSS file? I see no reason for three separate http requests for three small CSS files
b) This may be a feature request, but I prefer, when possible, to add small CSS files like this to my template custom CSS file, and then choose to not load the extension's native CSS file(s). Some developers allow this, namely NoNumber Extensions. Would it be possible to add such a feature to JFBConnect in the future? A toggle ON/OFF for loading of CSS files?
c) Why are all these files being loaded even on pages that have no SCLogin Module, nor any JFBConnect tags?

I know I am kind of nitpicking, but I feel these are important issues for optimization, and maybe loading the stylesheets in a different manner would not be a huge problem for a future version.
Last edit: 10 years 7 months ago by Ludwig von Mises.
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago - 10 years 7 months ago #36214 by Ludwig von Mises
Alex, sorry to bump my post but I am afraid it got lost in the shuffle as you were publishing the 5.1.1 update package. Also I have some new hypothesis which you can probably confirm.

JFBConnect versions before 5.1.0 were only loading JFBConnect CSS stylesheets on pages that the SCLogin Module was published. I see you have totally changed the package since 5.1.0 (no more separate module installations). This leads me to believe that you have now deferred CSS and JS loading to a system plugin, which would explain why sc_bootstrap.css, jquery-ui-autocomplete.css and jfbconnect.js are loaded on every page of a site. mod_sclogin.css seems to only be loaded where the module is published.

The problem is, with up to three stylesheets being loaded, JFBConnect now represents a whopping 30% of my stylesheet http requests. Previously it represented ZERO percent of my stylesheet http requests (I used to use SCLogin Module only for logout, so nothing was ever loaded unless someone was logged in).

If the new way you have JS and CSS loaded cannot be checked on a page-by-page basis (checking whether there is JFBConnect content or not), could I please ask (beg) you to combine the three stylesheets into one, single CSS file? Or request a CSS on/off button in admin, so that I can paste the contents of these files into my template's custom stylesheet?
Last edit: 10 years 7 months ago by Ludwig von Mises.
The topic has been locked.
Support Specialist
10 years 7 months ago #36216 by alzander
The post wasn't lost, I just didn't have the time to get back to it with the proper response. Now I have the time.

There are new files that are included on every page. We agree it's a little excessive how it's happening right now and are, ourselves, picky about what loads on every page. With this release, we included files more liberally to make sure features work as expected. We will be paring this back in future releases and be more conservative with what we load.

In all previous releases until this one, we always included the jfbconnect.js file. That's necessary on every page for a variety of reasons (checking for automatic logging in, enabling Google Analytics tracking of Likes/Comments, and a slew of other things). It's possible one of the features may not be enabled on that page, but it's honestly not worth checking if it should be loaded or not.

The main cause of the increase in files is the new Open Graph Action popups that can be used for letting user's post back to their Facebook Timeline. The sc_bootstrap.css file is what styles the modal popup. The autocomplete.css is what allows for autocompletion of the user's friends or current location. We haven't fully documented the new feature or promoted it much yet (both will be coming in the next week or so). If you're not interested in it, you can edit the /components/com_jfbconnect/libraries/provider/facebook.php file, find the following 2 lines and comment them out:
$doc->addStyleSheet(JURI::base(true) . '/media/sourcecoast/css/sc_bootstrap.css');
        $doc->addStyleSheet(JURI::base(true) . '/media/sourcecoast/css/jquery-ui-autocomplete.css');

In general, we have always tried to streamline our assets and what we load on the site. There's even a lot of optimizations in how we load the Facebook Javascript library to make sure it's initialized minimally for your site, which saves some browser execution time. There's definitely work to be done in this new release, and we're planning to implement a lot of optimizations (even moreso than we had in v5.0 and below) to speed things up.

With all the changes for this release though, we needed to be more conservative to load anything that may be necessary to reduce possible support requests when things were missing.

I hope that explains and gets you started with some minimization. If you have any questions, just let me know, and thanks for the feedback,
Alex
The topic has been locked.
Support Specialist
10 years 7 months ago #36217 by alzander
Oh yeah.. and no more Mootools! That definitely saves some requests :)
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #36226 by Ludwig von Mises

alzander wrote: Oh yeah.. and no more Mootools! That definitely saves some requests :)

Thank God for that. I was the one with the thank you post a few days ago.

Thanks for your insights. It is comforting to know that you are aware of the situation and even did it "on purpose" to try to cut down on the debugging of the new JQuery system. For now I can eliminate the two stylesheet loaders as you instructed and paste their contents into my custom CSS file.

Great job on everything and thanks for making G+ login part of the core package.

Speaking of the package, I see it is now a one-click-installs-all setup. I am the kind of guy who uninstalls modules that I don't use. If I uninstall a module and then decide I need it I suppose I can just re-install the JFBConnect Component right over the current version, correct?
The topic has been locked.
Support Specialist
10 years 7 months ago #36232 by alzander
I know you were the one that posted the THANK YOU post. It still makes me smile. Just had to add it in above since it was the positive note in the changes we made... to smooth out the rough edges of extra inclusions we made :)

Great job on everything and thanks for making G+ login part of the core package.

No problem. I hope this has gone smoothly for you. We're excited by how well it seems to have gone so far as well as there's been very few issues overall. If you haven't seen our recent blog posts, we've announced that Twitter will be coming in October and LinkedIn by the end of the year as well.. It should be a few good months!

Speaking of the package, I see it is now a one-click-installs-all setup. I am the kind of guy who uninstalls modules that I don't use. If I uninstall a module and then decide I need it I suppose I can just re-install the JFBConnect Component right over the current version, correct?

Yup. Just install again and they'll all be re-installed. They're also in the com_jfbconnect...zip file in the /admin/install/packages/ folder, in case you just want to install one and not them all... though the next time you upgrade, they'll all come back.

This was another design decision that we deliberated a lot over. We intentionally had the install-what-you-need process before to not clutter up everyone's site. That seemed to be very annoying for a lot of users as there were a lot of modules and plugins to install. The comprimise we made is to only install the Open Graph and Social Profile plugins for extensions that you have installed.. so, if you don't have Community Builder, you won't get the CB Profile Plugin. It just made sense. We automatically install all of the social modules though, since many users want to test and play with them.

If you have any feedback or suggestions on our new installation process, or JFBConnect in general, let us know. We're always trying to improve usability, while adding great new features.. those don't always go hand in hand, but this new release was a huge improvement in our opinion.. and hopefully you and our users as well.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 7 months ago #36486 by Ludwig von Mises
Alex, I just wanted to follow up with you on this. I went ahead and commented out the lines that call sc_bootstrap.css and jquery-ui-autocomplete.css. I pasted the contents of both files at the end of my template's custom CSS file. I now have zero SCLogin modules published to public users. I use JomSocial and Jreviews listings for social login via the {JFBCLogin} tags. So that means I have ZERO JFBConnect CSS files loaded for the public. I do have a SCLogin module published for registered users that shows the avatar and the logout button, and sclogin.css is loaded for logged-in users correctly. Moving the bootstrap CSS to my template's custom CSS file fixed an issue with the logout button hover not rendering the proper colors on the top half when hovered on. It's a total minor detail but maybe this tidbit could help someday. Previously it was being rendered correctly in the bottom half, in blue, and incorrectly in the top half, in grey. Now it is all a nice uniform blue when hovered over.

You can check the results for yourself here:

Jreviews Listing:
miraargentina.com/hoteles/27-charming-luxury-lodge-and-private-spa

The tags are down in the "Comentarios" tab and appear if you click to leave a review.

JomSocial:
miraargentina.com/comunidad

If you check the source code the only thing being loaded is the JFBConnect JS. FB and Google login work great. I really love the new popup but I don't think my user interaction is enough right now to justify loading the module CSS on every page at this time.

This may be just random rambling but who knows, it's always nice to know when something is working, right? Instead of just letting you know when things are not working.

Thanks!
The topic has been locked.
Support Specialist
10 years 6 months ago #37006 by alzander
I wanted to quickly follow up on this and let you know that v5.1.2 will be out next week. It won't fix all the issues above but should help.

Mainly, we've combined the sc_bootstrap.css and jquery-autocomplete.css file into one. The new file has been very reduced to remove a lot of excess styles that weren't being used before as well. So, while still big, it's less than 75% of the size in the last release. It is still always included on every page (but will be easy to comment out). There will likely be an option for that in the future, but not yet.

We also have a new jQuery/Bootstrap Javascript file which is there for compatibility, but can be disabled with the same "Include jQuery" setting already available.

I hope that helps, and, once v5.1.2 is out, we expect to hear your feedback!

Thanks,
Alex
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Excessive JFBConnect assets (CSS) loaded in head
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS