Topic-icon Need all JavaScript and Images to be local

Active Subscriptions:

None
9 years 2 months ago #51571 by webdevtim
How to I get the SCSocial Stream module to grab JavaScript locally and how do I get SCSocial Stream module to grab stock twitter and Facebook images locally rather than grabbing them from twitter and Facebook.

I can't have pages generated from remote content as that reallllllllly shows down page loads. I can grab the text from Facebook and Twitter posts, but since I know what the images are, I can have those available locally in my images/social-media folder. In each instance where 525029324584255488/vlK3ysXt_normal.png is collected from pbs.twimg.com. I can grab that from the images/social-media folder instead eliminating a trip over the internet. In the case of any other image that is grabbed remotely, I can copy that to the images/social-media folder as well and tell JFBConnect to get that image from the folder instead of over the internet.

I also can't afford to be getting JavaScript remotely either. I need to change the following to grab facebook.net/en_GB/sdk.js locally as well.

Lets me know where I need to go in the code to make the necessary changes. Please see the elements highlighted in red below. Search for the string "" to find the red color coded items.

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     [color=#ff3300]js.src = "//connect.facebook.net/en_GB/sdk.js"[/color];
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
The topic has been locked.
Support Specialist
9 years 2 months ago #51577 by alzander
I don't think that what you're looking to do is correct. Loading the images from Facebook or Twitter will generally be faster than loading it from your own site for various reasons:
* Facebook and Twitter have much more powerful servers than yours. They are meant to handle millions of requests per minute, whereas yours certainly isn't. Let their servers take some of the load from your site instead of making your server work harder.
* Storing on your server will still require a trip over the internet for the user. Their browser has to load it from somewhere, whether that's Facebook's caching servers or your own.
* The Facebook Javascript library definitely can't be loaded from your server. Its change by Facebook on at least a daily, but sometimes even hourly. Additionally, since users may navigate many different sites that all load the same sdk.js file, it will already be cached on their browser when they visit your site. That alone will actually speed up the page load time instead of having the users browser have to fetch and load your own copy from your server.

In general, what you describe would make your server work more and likely (if not surely) cause page load times to be worse overall.

I hope that helps explain, but if you need more information on the above, just let me know.

Thanks,
Alex
The topic has been locked.
Support Specialist
9 years 2 months ago #51578 by alzander
Oh, also, our Channels feature will download the text of posts and cache that data for whatever the cache duration is set to in JFBConnect. So, the server connection to grab the feed should only happen every 15 minutes (or more).

We take great pains to make JFBConnect as speedy as it can be.

Alex
The topic has been locked.
Active Subscriptions:

None
9 years 2 months ago #51583 by webdevtim
I have hooked our website up to CloudFlare and the problem with getting the content from Facebook or Twitter, though it is fast, still introduces a wait time of 1 second for each request. When I disabled the SCSocial Stream module I shaved 2 seconds off the load time. There are many other things I need to do, but this is the one thing that stuck out.

The Facebook SDK.js file takes 768 ms to load from Facebook. By having that file on our server, it would be cached by CloudFlare, eliminating that 768 ms of wait time.

Also if I can lazy load the Twitter and Facebook data, that would help; or load the Facebook and Twitter data after the page has loaded through and XMLHTTPRequest.
The topic has been locked.
Support Specialist
9 years 2 months ago #51585 by alzander

When I disabled the SCSocial Stream module I shaved 2 seconds off the load time.

What portion of the load time was improved? Was it the server processing time or was it the browser loading time? What tool are you using to check the loading overall? I'd recommend gtmetrix.com, but there are plenty of great tools out there.

The Facebook SDK.js file takes 768 ms to load from Facebook. By having that file on our server, it would be cached by CloudFlare, eliminating that 768 ms of wait time.

Again, there are a few things that aren't valid with this statement:
* Most users will have already visited a site that has the sdk.js file loaded on it, which means it would already be cached in their browser. That results in a 0s load time.
* Cloudflare is a CDN. Facebook also uses it's own CDN. Moving from one to another won't necessarily speed things up further and Cloudflare doesn't actually cache all contents from every site. Just the frequently loaded ones.. whereas the sdk.js file from Facebook is always loaded over a CDN.

Also if I can lazy load the Twitter and Facebook data, that would help; or load the Facebook and Twitter data after the page has loaded through and XMLHTTPRequest.

There are plenty of extensions for Joomla that can convert images in the output of your page to be lazy load. That's not an optimization we'd make in JFBConnect as it can be very tricky to implement properly across all sites.

I hope that helps explain,
Alex
The topic has been locked.
Active Subscriptions:

None
9 years 2 months ago - 9 years 2 months ago #51587 by webdevtim

What portion of the load time was improved? Was it the server processing time or was it the browser loading time? What tool are you using to check the loading overall? I'd recommend gtmetrix.com, but there are plenty of great tools out there.

1. It was server specific wait time from fetching the content from Twitter and Facebook that was eliminated when I disabled the SCSocial Stream module.

2. I use either GMetrix or Firebug. Firebug is nice because it is always right there. As far as I know, GMetrix, assumes that nothing is loaded in the browser, but will report the presence of "Expires" headers in the YSlow score, not sure about Firebug.

Again, there are a few things that aren't valid with this statement:
* Most users will have already visited a site that has the sdk.js file loaded on it, which means it would already be cached in their browser. That results in a 0s load time.
* Cloudflare is a CDN. Facebook also uses it's own CDN. Moving from one to another won't necessarily speed things up further and Cloudflare doesn't actually cache all contents from every site. Just the frequently loaded ones.. whereas the sdk.js file from Facebook is always loaded over a CDN.

1. Yes they are both CDNs, however if one CDN already has the content present in it's cache it doesn't have to fetch that from another CDN. So I don't understand this.
2. CloudFlare will cache what I tell it to cache and not cache what I tell it not to cache if I create a custom configuration beyond their default settings.
3. As you say, sdk.js is most likely already loaded in the Browser, so there is no need to fetch it. But GMetrix doesn't know that. I am trying to get load times under 4 seconds so Facebook and Twitter will approve the JFBConnect Apps on the site. Actually the load time for sdk.js is blocking time, which from my understanding means it is just waiting for something else to be loaded, so it may not be contributing to the total "onload" time. I am just looking at things that appear to be taking the most time.

There are plenty of extensions for Joomla that can convert images in the output of your page to be lazy load. That's not an optimization we'd make in JFBConnect as it can be very tricky to implement properly across all sites.


Understood, I am using one called JCHOptimize. But I really want to go through and consolidate everything into one .css file and one .js file, eliminating all duplication while adding comments to delimit different sections for different components, modules and plugins and then minify those files and eliminate JCHOptimize which itself has a load time footprint.

My biggest delay is the time it takes the host server to assemble the dynamic content and deliver it to CloudFlare.

You can test yourself: www.911truthoutreach.org
Last edit: 9 years 2 months ago by webdevtim.
The topic has been locked.
Support Specialist
9 years 2 months ago #51588 by alzander

1. It was server specific wait time from fetching the content from Twitter and Facebook that was eliminated when I disabled the SCSocial Stream module.

That means that the SCSocial Stream is fetching content on every page load, which means that either:
a) You have the Cache Duration in JFBConnect set to 0
b) Have debugging in enabled
As noted above, when caching is enabled and working in JFBConnect, we store the output HTML and just push it out to the user. The result is that it should take on the order of a few ms per page load until the cache needs to be refreshed.

1. Yes they are both CDNs, however if one CDN already has the content present in it's cache it doesn't have to fetch that from another CDN. So I don't understand this.

Facebook's Javascript is absolutely always available in their CDN. Cloudflare may or may not have your files in the nearest cache and they can be agressive on lower trafficked sites to not keep data cached as long (since it's not used as much compared to more popular sites):
support.cloudflare.com/hc/en-us/articles...IT-Expired-etc-mean-

Again, Facebook's data is *always* available in a local CDN because, well, it's Facebook.

3. As you say, sdk.js is most likely already loaded in the Browser, so there is no need to fetch it. But GMetrix doesn't know that. I am trying to get load times under 4 seconds so Facebook and Twitter will approve the JFBConnect Apps on the site. Actually the load time for sdk.js is blocking time, which from my understanding means it is just waiting for something else to be loaded, so it may not be contributing to the total "onload" time. I am just looking at things that appear to be taking the most time.

We load the sdk.js file asynchronously and after the page load. It shouldn't cause the onDomReady signal to be delayed. Again, this is an optimization that Facebook recommends and we perform.

Understood, I am using one called JCHOptimize. But I really want to go through and consolidate everything into one .css file and one .js file, eliminating all duplication while adding comments to delimit different sections for different components, modules and plugins and then minify those files and eliminate JCHOptimize which itself has a load time footprint..

While possible, that's a ton of work. It also will require work every time you upgrade any extension. JCH Optimize also uses caching to store the compressed and minified files on your server so that it doesn't have to regenerate them every page load. You can do what you're doing, but JCH is likely better at it and certainly less error prone.

Bottom lining it, there's not much we can do to help. If you're really under the 4s threshold, I'd recommend disabling anything you can to get under that watermark. Then, get approved and re-enable whatever you need. Then, test and go from there to test from a real user perspective and not what some automated tools see that don't emulate a real browser.

By the way, GTMetrix has a test for what is seen after a page is properly cached by a browser, which would be much more indicative of real world use.

Alex
The topic has been locked.
Active Subscriptions:

None
9 years 2 months ago #51591 by webdevtim

While possible, that's a ton of work. It also will require work every time you upgrade any extension. JCH Optimize also uses caching to store the compressed and minified files on your server so that it doesn't have to regenerate them every page load. You can do what you're doing, but JCH is likely better at it and certainly less error prone.

Yes I realized that it would be a ton of work and I realized that I would have to update my unified file every time a component, module or plugin was updated. JCH has to make generalizations in order for the plugin to work on every Joomla installation. But since you have expressed confidence in this plugin,I will do what I can to optimize it rather than discard it.

Bottom lineing ist, there's not much we can do to help. If you're really under the 4s threshold, I'd recommend disabling anything you can to get under that watermark. Then, get approved and re-enable whatever you need. Then, test and go from there to test from a real user perspective and not what some automated tools see that don't emulate a real browser.

This is a great idea, why didn't I think of it. I still need to have this site load under 4 seconds, but while I am going through code with a fine tooth comb, this will get us posting to Facebook and Twitter sooner rather than later..Thank you so much for this idea.

By the way, GTMetrix has a test for what is seen after a page is properly cached by a browser, which would be much more indicative of real world use.

Thanks, and thanks for all the other suggestions as well.
The topic has been locked.
Support Specialist
9 years 1 month ago #51603 by alzander
Glad we could help with some suggestions. In general, a 4s loading time isn't unreasonable as long as it's in the right areas. If it takes 1-2s for your page to be generated by your server, then most of what you discuss above is moot. You need to work with your hosting company to figure out why its slow and/or disable features in Joomla and extensions that you don't want/need. Generally, going through the System Plugins is the first area to start since those plugins function on every page load.

Either way, I hope you pass your tests and get approved. Then, if you need anything else from us, just let me know.

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

None
9 years 1 month ago - 9 years 1 month ago #51608 by webdevtim
I set the cache time in "JFBConnect" -> "Configuraton" -> Cache Duration" to 5 hours. I don't need real time results in the module.

And I have disabled everything that wasn't being used.

Still, see: GTmetrix-report-www.911truthoutreach.org-20150301T120736-J9vUdus1.pdf and you will see what I mean by sdk.js taking a long time to connect. Sometime the total load time is 60 ms and others 768 ms and connection time is the variable.

GTmetrix-report-www911truthoutreachorg-20150301T120736-J9vUdus1.pdf
Last edit: 9 years 1 month ago by webdevtim.
The topic has been locked.