Web Page Speed & Optimization for FAE

Hello hello beloved friends of FM Design!

I have begun this topic to kick-start the process of discussion for speed and optimization for Forumactif Edge.

I would recommend this be a topic for general discussion, instead of actual support only; therefore, it is placed in the main forum for FAE.

• In evaluating much of the criteria for FAE, I have noticed several things in evaluation of domains using FAE. I hope this can provide all of us insight for how this theme operates on our forums and be able to prepare it better for the web.
  
• Keep in mind that optimization and speed-boosting means a lot to many people, and if you want people to have a good experience using your forums, it is better to speed it up to avoid lag.
  
• Most Desktops will handle requests for FAE quickly, but I have noticed a growing trend of some forums using FAE on mobile devices having a slowdown or lag, especially with more plugins.

---

Here are some things for discussion then:

• Hosting images from a cookie-less domain (Servimg, Imgfast, and Illiweb, both FM's core image hosting sites, have cookies on each of those domains).
  
• Hosting plugins, CSS, and JS on a CDN (content delivery network) and what network do you use.
  
• Making images and resources hosted across multiple domains instead of a single domain. (Much of our images are hosted on the same 1-3 image download sites... 10 or more would be better.)
  
• Static resources not containing a query (question marks in URLs when not necessary to have)
  
• Inhibiting response codes, especially 307s or 302s on some domains (internal/external redirects).
  
• Minimizing the use of images, but improving the overall design (combining images and using image maps).
  
• Reducing or combining scripts such as JS and CSS, minifying, etc.
  
• Minimizing requests for images and resources by modifying expiration times.
  
• Any other things?

0 bump... Any ideas?

I'm hosting most of my custom CSS on dropbox because FAE takes a lot of the character limits from the built in CSS, but I don't feel a difference on the speed. I think the less a board depends on scripts, the faster it'll be, but I do love the extra features that FM doesn't have but those codes provide.

Honestly I think it's pretty quick, but machine and connection speed will always be a factor that may or may not help.

It also depends, however, on the speed of the server in which you are hosting. I have believed JSDelivr is one of the quickest in ping rates, which, in turn, might be the best solution.

I never tried it, I use dropbox because I basically edit my CSS without refreshing anything but the board, I like it's convenience. And it's free.

That's a lot of good advice for improving performance. I think probably one of the most important things ( in regards to scripting ) is to make use of asynchronous loops, instead of synchronous ones which can block the page for just a bit. Eventually all the tiny things really add up.

I've been playing around w/async loops recently and even attempted writing my own for a project. This is the code :

Code:

function ForAll (list, callback) {
  this.list = list;
  this.callback = callback;
  this.iterate();
};

ForAll.prototype.index = -1;
ForAll.prototype.status = 'looping';

ForAll.prototype.iterate = function () {
  if (this.list[++this.index]) {
    this.callback(this.list[this.index]);

    var self = this;
    setTimeout(function () {
      self.iterate();
    }, 0);

  } else {
    this.status = 'done';

    if (this.doneCallback) {
      this.done(this.doneCallback);
    }
  }
};

ForAll.prototype.done = function (doneCallback) {
  if (doneCallback) {
    if (this.status == 'done') {
      doneCallback();

    } else {
      this.doneCallback = doneCallback;
    }
  }
};

and using it :

Code:

new ForAll(document.getElementById('fa_theme_selector').options, function (option) {
  console.log(option.value);

}).done(function() {
  // optional callback to execute when the loop is finished
});

Compared to the traditional for loop it is a tad slower when timed in the console. Only perk is that it doesn't block other code from executing. This for loop will only write "HELLO WORLD" after it's finished :

Code:

console.time();
console.log('HELLO');

for (var option = document.getElementById('fa_theme_selector').options, i = 0, j = option.length; i < j; i++) {
  console.log(option[i].value);
}

console.log('HELLO WORLD');
console.timeEnd();

This async loop will write "HELLO WORLD" as soon as it can be executed :

Code:

console.time();
console.log('HELLO');

new ForAll(document.getElementById('fa_theme_selector').options, function (option) {
  console.log(option.value);

}).done(function() {
  console.timeEnd();
});

console.log('HELLO WORLD');

There's definitely better alternatives, but I thought it'd make a good example. Of course this isn't applicable everywhere though. I think it's best used on loops that affect page load or loops that are executed recursively.

dannig wrote:I never tried it, I use dropbox because I basically edit my CSS without refreshing anything but the board, I like it's convenience. And it's free.

Yes, true, but JSDelivr is also free. That's a great benefit! However, it is incorrect to assume you can obtain extraordinary results using free CDNs. It's like trying to use free VPNs... Something is missing from the whole "speed" factor. The adage goes... If it has to jump through too many loops, it won't make it back in a reasonable time.

I agree @Ange Tuteur - and many of your suggestions/examples are nice as always. I will think on these thinks. I wish we had a server cache/cookie clear... But these boards don't work like that.

On FM boards, async is almost always helpful, especially as I have tried it, as have you, and it has worked wonderfully. Per the issues of blocking, it appears that placing JS inline would be better to do for the resources that need to be fetched on every page reload, and offloading JS to the JavaScript Codes Management to host in or on a CDN, and allowing async to be done. If we place it on a CDN, we can most definitely force async to operate how we want it to. I have a feeling the difficulty of JavaScript Codes Management may cause inferior results.

One final note of mine on JSDelivr... FM boards use JSDelivr for a few small resources, so you will notice information being fetched from that server, but it should not cause any issues with setting up a CDN of your own.

As continuation to my post here: https://fmdesign.forumotion.com/t1326-bootstrap-compatibility#30132

I decided to try the github pages feature to host iframes to my forum, but the synchronization is not automatic and, being my machine only an i3, it felt a bit heavy on the system. I was able to make it work (note that I'm almost a complete ignorant when it comes to programming), but that lack of speed on changes bugged the hell outta me.

Found out about FTPbox, though it's an abandoned project, the software kept crashing. That's when I found out that WinSCP does the synchronization work, I am still able to change my dropbox files, but this time they are automatically uploaded every change I do.

I'm trying to minimize the impact of hosting pages that doesn't require the top of the forum on FM as I'm doing with the CSS and some JS. Though I do believe that the large amount of JS I have there might do some weight on the board's overall speed.

Per the last part of your post... Do you mean reducing the content above the fold to optimize the content below the fold?

I didn't understand your question, sorry O.o

Sorry... I thought you knew... See here and here.

Nooope, I meant I'm trying to host the least amount of changes on my FM board to both see if I increase loading times and if I lower the chances of incompatibility. I do like having information on the fold I think it's easier, but on my case I'm still fighting to make my "homepage message" scrollable like the profile fields on the topics.