Page 2 of 3

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 25 May 2015, 02:59
by mjau-mjau
TUTORIAL:
Extreme Page caching with Cloudflare
Here comes a quick tutorial on how to setup Cloudflare page-rules with the new Cloudflare-API integrated in latest X3 panel release, allowing extreme page-caching for your X3 website.

Image

Warning: Advanced!
This tutorial requires that you have already set up Cloudflare for your website, and I only recommend it for advanced users. It is not necessary to follow this guide to get the basic advantages of Cloudflare if you are already using it. It is entirely optional, and only for the ambitious.

What does it do?
As outlined in the original post of this tutorial, Cloudflare will essentially speed up your website by caching static assets (images, css etc.) on their high-speed content delivery network. Cloudflare does NOT however cache "pages" by default ... This is because pages are often "dynamic", contain menus that change often, so it would not be functional to cache a page. UNLESS we can actually flush the Cloudflare page-cache from the Imagevue X3 panel that is ...

Benefits
So if you go ahead with this, what are the actual benefits? By caching X3 pages (html, json, sitedata) on the Cloudflare CDN, you will make the following incredibly fast: 1) The load speed of the initial document (before the preloader even appears), and 2) The load speed when navigating between pages (unless you are using X3 preloader). The difference in speed, depends on TWO factors: 1) The default processing delivery speed of your web server, and 2) The location of the visitor requesting the document. The benefit will in fact be greater if your server is slow, and if the visitor is far away from the server location.

I can only reference our demo gallery as an example:
https://demo.photo.gallery/
Do you notice how "instantly" the preloader appears on your screen? This is because the initial "page"-document loads incredibly fast from Cloudflares CDN. Although our Flamepix server is really fast even without Cloudflare page-caching, we reduce the latency from an average 100-600ms (depending on location), down to 10-50ms (regardless of location, because Cloudflare may cache the pages on global locations).  Average servers can expect perhaps an average load delay of 500-1500 ms, going down to 10-50 ms with Cloudflare page caching.

New York 51 ms
Image
http://tools.pingdom.com/fpt/#!/d4IgIh/ ... evuex.com/

Amsterdam 49ms
Image
http://tools.pingdom.com/fpt/#!/bj0EBt/ ... evuex.com/

Melbourne 94ms
Image
http://tools.pingdom.com/fpt/#!/E8kAS/h ... evuex.com/

Test the latency of your current X3 website here:
http://tools.pingdom.com/fpt/
* You should take notice of the first item in the waterfall, as I have done in the screenshots above. This is essentially your server getting the request, processing it, and serving it from various locations.

Is it worth the hassle?
The short answer is no, unless you relate to any of the following:
1) You are fanatical (like us) about squeezing peak performance from your website.
2) Your website is accessed from a global audience, in which case caching on Cloudflare CDN is more beneficial.
3) If your web server is really slow, Cloudflare page-rules will make a bigger difference.

---

OK, I already got Cloudflare, let's get started please!
Navigate to your account at Cloudflare, and click the "Page Rules" tab.
Image

Add a new rule, *yourdomain.com/*
Image

Set the following rules (ignore any other rules)
Image
Save (click "add rule")

Done! Now we have to make a page-rule to prevent page-caching for the admin-panel

Add a new rule *yourdomain.com/panel/*
Image

Set the following rule (ignore any other rules)
Image
Save (click "add rule")

Finally, make sure your panel-rule is ABOVE the first rule you created.
Image
* Use the drag-handle on the left to drag it above if necessary. Refresh the page, and make sure the panel-rule is above the other rule

Done! Now go to your Cloudflare account name (top right) > "My Settings". Scroll down, and click "View API key"
Image

Done. From your X3 panel, navigate to settings -> panel. Scroll down to Cloudflare settings, click to "enable cloudflare API", and add API keys from above:


Save. done! You should now have Cloudflare page-caching enabled, and your X3 admin panel should show Cloudflare action buttons. Keep in mind, pages won't speed up until they get cache-status: HIT from Cloudflare, which occurs after two requests to the same page. Also, this would have to repeat from each global location where it is to get cached.

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 26 May 2015, 16:20
by GGANG
Hello Karl,
I have done for a cloudflare page rules and already setting in config.php
Lets you check it. Thank you. :D

Image

Image

Image

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 27 May 2015, 01:26
by mjau-mjau
GGANG wrote:Hello Karl,
I have done for a cloudflare page rules and already setting in config.php
Lets you check it. Thank you. :D
Good Job! Seems to be working nicely!
http://pornsaknanakorn.com/

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 20 Jun 2015, 04:59
by Martin
mjau-mjau wrote:Follow the sign up process .... Because this process requires changing nameservers for your domain, it may often take 30 minutes or more to complete, so strap yourself with patience!
Well... a lot of patience in my case. It has been some 40 hours now.
But then they mention: "Please allow up to 72 hours for the nameserver information to propagate."

Martin

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 20 Jun 2015, 05:12
by Martin
mjau-mjau wrote:Cloudflare does NOT however cache "pages" by default ... This is because pages are often "dynamic", contain menus that change often, so it would not be functional to cache a page.
A question that comes to mind is if it's wise to implement this when you use the 'justified' page layout, for example in combination with shuffle.
What I understood from previous posts is that a justified page is being build on the server first, before it is being displayed in a browser.
This sounds rather dynamic.
Just curious...

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 20 Jun 2015, 18:44
by mjau-mjau
Martin wrote:Well... a lot of patience in my case. It has been some 40 hours now.
But then they mention: "Please allow up to 72 hours for the nameserver information to propagate."
When you are changing nameservers, this is not Cloudflare of course. It is your current registrar changing name servers. Personally, when I change nameservers, it happens in 5-10 minutes, and that is normal in modern times. If it takes much longer times, you need to check if the process has been initiated properly from your DNS side. Also, it depends on the DNS you use for your internet ... If you use Google DNS service, it is propagated very fast. All in all, when Cloudflare says "up to 72 hours", they are speaking of how long your registrar may take to propagate the domain change, including how fast your internet DNS picks up the change, and it is not related to Cloudflare.
Martin wrote:
mjau-mjau wrote:Cloudflare does NOT however cache "pages" by default ... This is because pages are often "dynamic", contain menus that change often, so it would not be functional to cache a page.
A question that comes to mind is if it's wise to implement this when you use the 'justified' page layout, for example in combination with shuffle.
What I understood from previous posts is that a justified page is being build on the server first, before it is being displayed in a browser.
This sounds rather dynamic.
Just curious...
In my quote above, I note that Cloudflare does NOT cache pages by default, amongst other things because some of the reasons you mention (menu, page content etc.). However, it would not affect the layout (justfied etc), because this is created dynamically by javascript on the client side. The same goes for shuffle.

The main reason you don't normally want to cache pages on cloudflare, is simply because if you change the page content (images or text), or add pages, you would need to empty the Cloudflare cache after every change. However, since this is not the case, you have absolutely nothing to worry about in regards to this.

However, as noted in the post above in regards to "extreme page caching", you can in fact enable page-caching to achieve extremely high performance from a CDN for pages and content. I wrote a separate post about this here:
https://forum.photo.gallery/viewtopic.php?f=51&p=37429

It just requires a slightly higher level of maintenance, because you need to make sure to flush cloudflare "page cache" after updating pages or creating new ones. This is a feature which is simplified by the built-in cloudflare cache manager API built into the X3 panel, and outlined in the link above.

So the conclusion is that basic Cloudflare integration will simply speed up asset-loading and protect your website, but it will not cache any page content so you wouldn't have anything to worry about. If you are ambitious and understand the implications, you can add Cloudflare "page-caching", which can speed up delivery pages/content from a CDN. Depending on the speed up your server, and the location of your visitors, this may not be worth the hassle.

We have our demo page running with cloudflare page caching, and as you can experience, the data/content loads very fast:
https://demo.photo.gallery
If we change a page, then we just need to flush the corresponding url from the cloudflare cache, something that can be done now directly from the X3 panel.

Sorry, this is quite technical, but did I make things more clear? Keep in mind, a lot of the functionality in X3 (including layouts), are rendered dynamically by javascript, thus would not be affected by cloudflare. The server (+cloudflare) delivers the data (and the css/js), and then the browser does some processing to create the output based on the raw data from server.

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 02:19
by Martin
mjau-mjau wrote:When you are changing nameservers, this is not Cloudflare of course. It is your current registrar changing name servers.
Thanks for this insight!
Changing the nameservers at the hosting-admin panel was not enough, for security reasons I had to change them on another location too (I should have read the :?: -screens).
mjau-mjau wrote:... It just requires a slightly higher level of maintenance, because you need to make sure to flush cloudflare "page cache" after updating pages or creating new ones.
Yes, I get the hang of it now.

Practically speaking, with "extreme page caching" you flush the cache after making a change to a page in the admin panel.
If it's just one page to changed you flush only the current page, if you did a lot of changes on more pages you can flush all pages.

Just one more: is adding an image a change too? Or does it mean changing the page parameters, adding css, javascript, etc...?

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 04:40
by mjau-mjau
Martin wrote:Practically speaking, with "extreme page caching" you flush the cache after making a change to a page in the admin panel.
If it's just one page to changed you flush only the current page, if you did a lot of changes on more pages you can flush all pages.
Just to be sure, you are referring to the Cloudflare buttons in the x3 admin panel?

Actually, the clearing of cache is semi-automatic, as it will clear the specific Cloudflare URL when saving a page. However, you may at some point need to click the flush cache button for the page, for example after uploading images.

As for your question, it is in fact slightly more complicated. If you add a new page, technically this will change the menu, thus all pages need to be refreshed to generate a new view with the menu. Furthermore, the sitedata (if you are using X3 preloader) will need to refresh.

Practically speaking, when you are editing the gallery, it may simply be the easiest solution to just click "flush all" once you are done editing for a while. As mentioned in the tutorial, it is mostly beneficial for websites that don't update that often. There is no problem clicking "flush all" ... it will NOT flush static assets (js/css), but only remove any pages that may be cached on the Cloudflare CDN network. Nothing wrong in being generous about clicking the flush button if you currently editing your gallery.
Martin wrote:Just one more: is adding an image a change too? Or does it mean changing the page parameters, adding css, javascript, etc...?
Yes, because it changes the output of the page, which includes a reference to the new image.

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 05:55
by Martin
mjau-mjau wrote:Just to be sure, you are referring to the Cloudflare buttons in the x3 admin panel?
Yes, I did.

About those Cloudflare buttons in the panel:
I followed all the steps you described (made the two page rules, put them in the right order, filled in my API key and email), but in the panel the Cloudflare orange cloud + buttons do not appear.
Any idea what could have gone wrong?

I'll send you usernames/pw of both panel, cloudflare and ftp in case you want to have a look there.
Thnx in advance!

EDIT:
Strange I've got a different menu in the panel.
You have got: MANAGE SETTING USERS PROFILE LOGOUT <cloudflare-icon>
I have got:
Image

Martin

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 09:18
by mjau-mjau
Martin wrote:Any idea what could have gone wrong?
This post should really be in the thread for "cloudflare page caching"
https://forum.photo.gallery/viewtopic.php?f=51&p=37429

Did you add the Cloudflare credentials into your panel/config.php as described at the bottom of the link above?
Code
define("CLOUDFLARE_EMAIL", "yourcloudflareemail@domain.com");
define("CLOUDFLARE_KEY", "abcdefghijk123456789b984c401f88e1f71f");
I checked your config.php and they were not there. Unfortunately, with new releases, you currently need to check your /panel/config.php and make sure its updated. In fact, the easiest way to upgrade this file, is to always use the latest config.php in the release, and instead just move over your login details to the latest config.php. In that file, you will find the options for Cloudflare.
Martin wrote:Strange I've got a different menu in the panel.
You have got: MANAGE SETTING USERS PROFILE LOGOUT <cloudflare-icon>
I have got:
Image
Really? When I login to the guest panel at https://demo.photo.gallery/panel/, I see this:
Image
You are not supposed to see the "users" buttons, as that is reserved for the DB-version of the panel, and we don't have that in our demo version. Where do you see that in our demo?

The "users" section is just one of the small benefits of using the DB-version, as you can create multiple panel-users, which in most cases is unnecessary for most X3 website owners.

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 09:36
by Martin
mjau-mjau wrote:This post should really be in the thread for "cloudflare page caching"
https://forum.photo.gallery/viewtopic.php?f=51&p=37429
Well, if you click on that link you jump just to the beginning of page 2 of this thread.
Try it... and then scroll down.. you'll see these posts again :-)
You started you thread for "cloudflare page caching" inside the thread "Tip! Add Free Cloudflare To Improve Imagevue X3 Performance".
mjau-mjau wrote:Did you add the Cloudflare credentials into your panel/config.php as described at the bottom of the link above?
Yes, I did.
mjau-mjau wrote:I checked your config.php and they were not there.
I do not know where you checked them, but if look for the file through ftp, you find that it is correctly updated with the api-key and the email adress. Look here (not the real api key ofcourse):
Code
// Cloudflare API
define("CLOUDFLARE_EMAIL", "martin_broeze@planet.nl");
define("CLOUDFLARE_KEY", "1234567890123456789012345678901234567");
mjau-mjau wrote:In fact, the easiest way to upgrade this file, is to always use the latest config.php in the release, and instead just move over your login details to the latest config.php. In that file, you will find the options for Cloudflare.
Indeed, that's what I did ;-)
mjau-mjau wrote:You are not supposed to see the "users" buttons, as that is reserved for the DB-version of the panel, and we don't have that in our demo version. Where do you see that in our demo?
I didn't see it in the demo, I saw the partial screenprint in your first post of this tutorial.

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 11:57
by mjau-mjau
Martin wrote:Well, if you click on that link you jump just to the beginning of page 2 of this thread.
Sorry, my mistake.
Martin wrote:Yes, I did.
I didn't see that earlier when I checked the config.php, but regardless of that, I don't see the problem? I am in your admin right now looking at the Cloudflare buttons:
Image

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 12:40
by Martin
mjau-mjau wrote:I am in your admin right now looking at the Cloudflare buttons:
Image
This really is strange.
I cleared the browsercache in both Chrome and IE, but I still do not see the buttons.


EDIT:
Nor on Chrome + Safari on my iPad.

EDIT2:
Nor on Chrome + IE on my laptop

Can it have to do with the caching of Cloudflare... you get my pages from a different server than I do...?
But I already purged my whole Cloudflare cache.... I paused it... I tried Development Mode... to no avail

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 13:15
by Martin
Found something:

http://martinbroeze.nl/panel/
=> does show Cloudflare buttons.

http://www.martinbroeze.nl/panel/
=> does not show Cloudflare buttons

I can live with that, but if you've got an explanation I'm very interested ;-)

Re: TIP! Add Free Cloudflare to improve Imagevue X3 Performa

Posted: 21 Jun 2015, 14:16
by mjau-mjau
Martin wrote:I can live with that, but if you've got an explanation I'm very interested ;-)
Technically speaking, http://www.* and non-www represent two separate websites. Although I can't remember exactly where this happens, only one of them represents your cloudflare zone and is verified alongside the API. You should NOT have both www- and non-www versions of your website, basically because 1.) it serves no purpose whatsoever 2.) The same resources become duplicate on multiple URLs. 3.) Search engines technically view them as two duplicate pages. www is a separate domain on your server!

Although a few people still prefer to use www for their websites, most people (including myself) prefer to remove the www. WWW stands for "world wide web", and what is the point of having that in front of your website in 2015? Its pretty obvious.

For all our websites, for examples https://flamepix.com, it will always redirect to that URL even when trying https://www.flamepix.com. You can create a redirect rule from Cloudflare if you want, or open your .htaccess file and scroll down to approx line 363:
Code
# Option 1: rewrite www.example.com → example.com

# <IfModule mod_rewrite.c>
#    RewriteEngine On
#    RewriteCond %{HTTPS} !=on
#    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
#    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
# </IfModule>
You would need to uncomment the code above. Essentially, you should not be accessing your website from two separate urls! Its like two separate websites.