Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 11337
Joined: 30 Sep 2006, 07:37

Load X3 CSS+Javascript assets from CDN

23 Dec 2014, 16:38

I just came up with a pretty good idea (if I may say so myself). As some of you "insiders" may be aware, it is a challenge getting compressed CSS + JS files working correctly on all server environments. In the forthcoming beta v0.9, we have further consolidated all javascripts into a single compressed JS file for the benefit of "critical render path" and optimal pagespeed. Now we will have a single JS and a single CSS file that basically make up the entire X3 application on the frontend side. These files load before X3 runs, and it is paramount that they are compressed and loaded as fast as possible ... Uncompressed they weigh a total of 660kb, but compressed they load at 170kb total ... That's almost 400% compression!

Content Delivery Network (CDN) to the rescue!
So how about we serve these important X3 core asset files from a CDN (content delivery network) service instead of self-hosted? We would use a super-powered CDN like JSDelivr, which offers clear advantages:

Blazing Fast
JSDelivr runs from content delivery networks Maxcdn and Cloudflare to provide blazing speeds to static assets.

Cache and Geolocation
CDN networks serve resources from multiple data-centers around the world, meaning any visitor in any location will be served the files from the closest data-center in the network. This will speed things up additionally!

Parallel Loading
Since the resources are loaded from a separate host (CDN), the visitors browser can load more resources in "parallel", ultimately making the page load faster.

Optimize Your Hosts Server Load
Since the CDN entirely handles the process of compressing and serving the assets, your own host will be free of this burden and can focus on other processing tasks.

Host Problems Solved
Real-time compression of CSS/JS requires some specific modules and rules enabled on your host. Although most servers are setup correctly to deal with this, I have noticed many host don't even have mod_deflate and/or it does not work properly. Using a CDN would make this an issue of the past!

Bonus: Common Cached Resource
An additional bonus to this, is that since the X3 assets become "common" resources hosted from the same URL, they will cache in the visitors browser and can be re-used for multiple X3 websites. For example, if a visitor already viewed our demo gallery and then visits your X3 website, the X3 assets will already be cached in the visitors browser so your page will load faster.

* We will add a toggle setting that allows you to load self-hosted assets if you for some reason desire that instead.

---

* I am not really asking any questions here, as I just got a bit excited and wanted to note everything down while I had the idea. Feel free to comment though ;)

Some related links about CDN (content delivery networks) for those who are interested in understanding:

https://github.com/jsdelivr/jsdelivr
http://www.jsdelivr.com/about.php
http://www.cdnreviews.com/
http://mashable.com/2014/12/22/best-con ... -networks/
http://premium.wpmudev.org/blog/top-cdn ... ngly-fast/

---

Also for the record, we are working on some implementation techniques so you can plug your X3 into a CDN (free or premium), so it will serve all your images faster and more effectively (not only JS/CSS assets). This is a bit tricky, but we are sightly obsessed with speed/optimization, and we are constantly looking to improve.
 
User avatar
alexhenes
Experienced
Posts: 568
Joined: 28 Sep 2006, 20:13

Re: Load X3 CSS+Javascript assets from CDN

23 Dec 2014, 22:53

awesome!
Alex
https://www.merelyafleshwound.com
https://www.goldenbikeshop.com
 
User avatar
Martin
Experienced
Posts: 626
Joined: 31 Jan 2011, 04:24

Re: Load X3 CSS+Javascript assets from CDN

24 Dec 2014, 18:58

I do not understand every aspect of it :-)
... but, being the case that my website host does not support mod_deflate and mod_gzip on shared hostingservers but only on virtual private servers, I think it sounds GREAT!
ImageImage
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 11337
Joined: 30 Sep 2006, 07:37

Re: Load X3 CSS+Javascript assets from CDN

02 Jan 2015, 08:26

Just a note on this ... We have already set up CDN for next versions of the main X3 assets JS/CSS to load as fast as possible from any global location. However, I had to test the performance from a few CDN (content delivery network) providers. I have already done a lot of testing myself, but if anyone else wants to do some tests, here are the test links (copy them, and prepend "http://" to the URLs)

645052205.r.cdn77.net/js/0.9/x3.min.js [service by cdn77.com]
cdn.x3.netdna-cdn.com/js/0.9/x3.min.js [service by maxcdn.com]
x3-e2f.kxcdn.com/js/0.9/x3.min.js [service by keycdn.com]

The best way to test would be to just open "new incognito window" in google chrome:
Image

Go to view > developer > developer tools
Image

In the panel that opens, click the "Network" tab:
Image

Now you can hard-refresh (cmd+shift+r) the page a few times, and read what time/latency you get:
Image

I open all links in 3 tabs, and just jump between them comparing load speeds from my location
Image

---

I want to find the best provider for loading the static assets. As you may know, the point of the CDN, is that it distributes the data-files globally, so that say visitors from China are served from Hong Kong, and visitors from Australia are served from Sydney. You might not notice much difference yourself with a CDN if your existing host is in a geographical location not far away ... But visitors from other locations will often experience a huge difference. For an understanding of how a CDN serves files, check this overview from cdn77:
http://www.cdn77.com/network

In addition to the proximity-factor, the CDN will allow parallel loading of assets, and will cause less stress on your server.
 
User avatar
Martin
Experienced
Posts: 626
Joined: 31 Jan 2011, 04:24

Re: Load X3 CSS+Javascript assets from CDN

02 Jan 2015, 19:05

I guess you like to know the results?

1) service by cdn77.com
365B 37ms
441KB 30ms

2) service by maxcdn.com
304B 25ms
441KB 22ms

3) service by keycdn.com
368B 34ms
441KB 23ms

These numbers are taken from 10 or more samples...
Not much difference between them...

My location is The Netherlands
ImageImage
 
User avatar
Martin
Experienced
Posts: 626
Joined: 31 Jan 2011, 04:24

Re: Load X3 CSS+Javascript assets from CDN

02 Jan 2015, 19:06

I guess you like to know the results?

1) service by cdn77.com
365B 37ms
441KB 30ms

2) service by maxcdn.com
304B 25ms
441KB 22ms

3) service by keycdn.com
368B 34ms
441KB 23ms

These numbers are taken from 10 or more samples...
Not much difference between them...

My location is The Netherlands
ImageImage
 
User avatar
Artur
Imagevue PowerPack
Posts: 510
Joined: 20 May 2011, 07:17

Re: Load X3 CSS+Javascript assets from CDN

02 Jan 2015, 20:44

1. cdn77.com
141 KB | 1.18 s
441 KB | 95 ms

2. maxcdn.com
164 KB | 1.00 s
441 KB | 95 ms

3. keycdn.com
140 KB | 528 ms
441 KB | 88 ms

Poland (10.Mbps), curently :wink:
 
illunis
Experienced
Posts: 84
Joined: 14 May 2012, 11:24

Re: Load X3 CSS+Javascript assets from CDN

02 Jan 2015, 20:45

My results.
Location: Athens, Greece
Attachments
maxcdn.PNG
maxcdn.PNG (3.04 KiB) Viewed 5363 times
keycdn.PNG
keycdn.PNG (3.03 KiB) Viewed 5363 times
cdn.PNG
cdn.PNG (3.04 KiB) Viewed 5363 times
 
esteban94
Posts: 10
Joined: 30 Aug 2011, 15:56

Re: Load X3 CSS+Javascript assets from CDN

03 Jan 2015, 11:08

My results :D
Attachments
X3 CDN providers test.jpg
X3 CDN providers test.jpg (24.11 KiB) Viewed 5339 times
 
User avatar
mjau-mjau
X3 Wizard
Topic Author
Posts: 11337
Joined: 30 Sep 2006, 07:37

Re: Load X3 CSS+Javascript assets from CDN

03 Jan 2015, 15:31

Nice. Thanks all! I should probably write a blog-post for all this performance and CDN-talk, but don't have time for that ...

I actually tried a few other CDN providers also, including suncdn, Amazon cloudfront and Cloudflare. The performance benefit is relatively similar across most CDN's, apart from small differences in location nodes and prices. The target for our of X3 assets, would be to deliver these relatively few small files, as fast as possible from a distributed variety of locations.

After doing quite a lot of CDN testing myself, I can say there is quite a substantial benefit to using a CDN. However, if for example your server is in Amsterdam and your audience is only in Holland, you would get very little benefit. The huge advantage comes if you have a global- or even transatlantic audience, because certain "assets" will load much faster, increasing the speed of initial page load substantially.

In addition to the primary JS/CSS x3 assets loaded from CDN, next X3 release will ship with the option to use a CDN also to deliver all your image assets. Prices have been dropping recently for services from content delivery networks, and unless you have a massive amount of visitors, signing up for CDN might be an interesting option for some of you. Just because you only have a moderate amount of visitors, doesn't mean you don't want to serve those visitors with a turbo-charged website experience ... For example, Maxcdn (with 1-year signup and a 25% coupon discount), is only 6$/month as long as you limit "locations" to only US/Europe, and don't transfer more than 100GB of data per month ... I am estimating that would suffice for most X3 websites (although that is a very general presumption). Additionally, there is a "free" plan available from cloudflare, and although it works slightly different from other CDN's, there is a clear benefit. I will be making more formal recommendations for these services shortly, as well as providing guides on how to integrate cloudflare and/or hook up with a CDN like maxcdn.


---

As for the serving of the "official" X3 JS/CSS assets, based on tests and requirements, KeyCDN is our current favorite. We even tried Cloudfront, which is probably the most reputed CDN company, but my tests showed it was inferior to a few others, and overpriced. We want to keep the doors open though, thus it would be ill-planned if we force an URL like x3-e2f.kxcdn.com to load assets ... What if we change provider? Then that link would eventually expire, and non-updated X3 installations would suddenly not work, and we can't have that happen now can we! The solution is to set up our own URL that points to the CDN we are currently using, likely n.flamepix.com ... If we change CDN provider, that link would always point to our latest provider, so the asset link would remain the same!

Just one more thing: All this talk about CDN, assets-loading and performance-improvements, will this make our X3 websites blazing fast? Generally speaking yes, but there are still other bottlenecks in the process which simply cannot be improved from the outside. I am speaking primarily about the server processing that is required to 1) Create an X3 page and 2) Process/resize an image. This is where the X3 CACHE comes into play, making subsequent requests load MUCH faster ... However, it is somewhat limited what we can do to enhance how fast your shared server initially processes these outputs. CDN's and shared assets might be able to offload the stress on your hosted website slightly, giving more resources for it to focus on processing tasks at hand, but it will still be an initial bottleneck.

We <3 performance improvements!