17 Apr 2016 Edited #1

ThunderBoard beta 5

ThunderBoard is a plugin currently in development stages which aims to dramatically speed up page loads on MyBB forums.

ThunderBoard's development is currently on hold, as other projects got the upper end. The code and install procedure is left here as reference. Please do acknowledge that support is barely given for this plugin.

[Image: kjM0mlA.gif]

How does it work?

ThunderBoard uses a combination of Open Source projects to obtain maximum performances and provide an eye-catching experience on your site:
  • Minify minifies and caches scripts and stylesheets, combining them when applicable;
  • LAB.js loads scripts asynchronously (a.k.a. "after the page has loaded", avoiding page rendering blocks) while preserving the correct execution order;
  • PJAX loads pages asynchronously using AJAX;
  • a modified app-loading.js displays a YouTube-like loading bar in between page loads.

ThunderBoard degrades gracefully if the browser does not support HTML5 History and pushState, which are PJAX dependencies.

JavaScripts parser

The JavaScripts parser is split in two components.

The low-level component parses templates upon installing ThunderBoard and when a template is edited, it collects all variables to be globalized and it saves a modified copy of templates into its database table. The modified copy contains a separated inline script marked as "global".

The high-level component parses the entire page before it is sent to the browser, collects all external and inline scripts and chains them into LAB.js. While doing so, it moves the "global"-marked script to the top of the chain, ensuring global variables are defined before anything else; it also minifies external scripts by routing them to Minify.

Stylesheets parser

The stylesheets parser acts at the same level the JS parser's high-level component does. It grabs all the internal stylesheets and routes them to Minify. Stylesheets are compressed into a large, single file. External stylesheets are not parsed.

Images parser

ThunderBoard can grab all the page's images, replacing them with an HTML tag and adding a JavaScript snippet to load images asynchronously. By doing so, your images will be delivered slightly after the whole page has loaded, speeding up the initial display of elements. The gain in page speed is especially noticeable if your site uses many images, but you may experience a flash of unwanted content.

Meta parser

The meta parser handles issues with page reloading. MyBB uses the meta HTML tag to refresh pages periodically, such as the Online list and redirection pages: ThunderBoard is not compatible with this type of refresh, since browsers store instructions into their core and refresh pages even if the HTML tag is removed.

Therefore, the meta parser converts refresh metas into JavaScript-based and ThunderBoard-compatible refreshes.

Preview templates

From beta 4 onwards, ThunderBoard comes with a page preview feature: you can define custom templates displayed when browsing towards a particular page. This functionality "tricks" users into thinking the page has already arrived, and has noticeable benefits over perceived page speed at a psychological level.

Users downloads templates during their very first visit with an AJAX request. They are cached within his browser's localStorage, when available (most modern browsers do); if by any chance you change a template, templates are updated automatically once the user visits a page again.

Preview templates can be created within ThunderBoard's module.


The page field accepts a list of pages you would like to bind the template to. When users browse to these particular pages, the template is displayed before content is downloaded.

This field accepts partial URLs. For example, member.php binds the template to every URL containing member.php.

Separate multiple pages with a coma. For example, MyBBoost uses user-,member.php?action=uid to display the associated preview template for an user profile. The double definition is used because MyBBoost uses Google SEO to tidy up URLs.

Preview template

This field contains the actual template's HTML. ThunderBoard can grab data from the current page and adds it to the preview template before displaying it. In order to do so, ThunderBoard must find an anchor, an element which contains the data to gather, starting from the element you have clicked on and traversing up to the body. For example:

Shade <-- this is the target element
This post <-- this is the anchor
This post's avatar <-- this is the data point ThunderBoard will gather

You must define an anchor and a data point in your theme's regular templates. The data point will be then available to be referenced into ThunderBoard's templates.

An anchor is defined using the data-tb-item attribute. When you click on a link, ThunderBoard will traverse up in the document until an element with the data-tb-item is found.

<div class="example" data-tb-item>CONTENT</div
A data point is defined using the data-tb-FIELD attribute. Replace FIELD with an unique string which you will use to reference to it.

<div class="example" data-tb-item>
img src="{$avatar}data-tb-avatar />
You can now reference the avatar data point in ThunderBoard's template using the following syntax:

// ThunderBoard will look for elements with the data-tb-avatar attribute within the anchor element 
To improve extensibility, ThunderBoard can recognize CSS ids and classes as well. All you have to do is add the corresponding prefix before the syntax (# for ids, . for classes):

// ThunderBoard will look for elements with the "avatar" class or ID or with the data-tb-avatar attribute within the anchor element. If found, it will replace {.avatar} with its content, typically <img src="avatar.png" /> 
Classes and ids extend the syntax, so data-tb-FIELD will be available as well. This gives you many customization chances.

If ThunderBoard finds the target FIELD within the anchor element, it collects its inner HTML and replaces the {FIELD} defined into the target template. Sometimes you may want to grab a specific attribute instead of the inner HTML. You can define it by using a slightly modified syntax:

<img src="{.avatar|src}" />
// ThunderBoard will look for elements with the "avatar" class or with the data-tb-avatar attribute within the anchor element, AND will grab the src attribute if found, replacing {.avatar|src} with it 
So to summarize:

In a regular template, eg.: forumdisplay_thread:

<div class="thread" data-tb-item>
img src="{$useravatar}class="avatar" />
span class="title"><a href="{$thread['url']}">{$thread['title']}</a></span>
In ThunderBoard's template with showthread.php as page field:

<div class="post">
img src="{.avatar|src}" class="avatar" />
span class="fakeText"></span>
When you click on a thread's title, ThunderBoard will traverse up to the first data-tb-item element (.thread in the example above), then traverse down inside it to find for elements with the "avatar" class or with the "data-tb-avatar" attribute. The former is found; a custom attribute is defined (src), so it grabs the src attribute (the user's avatar image) and replaces {.avatar|src} with it. The final result will be:

<div class="post">
img src="http://avatarurl.png" class="avatar" />
span class="fakeText"></span>
ThunderBoard will now use this template as a preview. To do so, it must find an element to replace its contents with the preview template. You can define the container using the data-thunderboard attribute. Typically, you would expect the header and the footer to stay in position when browsing through pages, as they are held constant basically in every page of MyBB. I would recommend to add the data-thunderboard attribute to the #content element found in the header template.

You can define multiple FIELDs and reference them as you may like. You can define multiple anchors as well; just bare in mind that ThunderBoard stops once it finds the very first parent with the data-tb-item attribute.

Custom script reloading

ThunderBoard loads external resources just in the first visit; as you browse through the site, missing scripts and stylesheets are added and once they are there, it's just useless for ThunderBoard to load the same file over and over again. JavaScripts often require executing a function to initialize them, and some may also need to be loaded for the page they are specifically designed for. After all, they are usually not written to be part of a single-page applications.

From beta 5 onwards, ThunderBoard can reload custom scripts to ensure they can work continuously when navigating through your website. Custom reloading is an extension of something which was already implemented for MyBB's default scripts, such as inline moderation or quick reply functionalities; now, you can define custom handlers to accomodate third party plugins you may have installed on your board which do not work as expected across AJAX page loads.

Most scripts do not need to be reloaded entirely; they usually contain a function which is used to initialize the script's content. To reload a custom script you will need to gather:
  • The file: for example, jscripts/thread.js;
  • The function to be executed: for example, Thread.init()

Custom rules can be defined using the apposite tool in ThunderBoard's panel. Separate multiple rules with a newline. The syntax is very straightforward:

Using the aforementioned examples:
  • thread=Thread.init()

Here are some recommendations:
  1. the jscripts prefix and the file extensions are NOT needed, but can be added anyway. If you add the jscripts/ folder prefix or the .js extension, ThunderBoard will not be able to confirm if the function is present in your file; however, it will execute the function anyway whenever a file matching your pattern is found in a page. For example, jscripts/thread.js=Thread.init() would also work;
  2. the function MUST be on one line. Semicolons are also stripped out from them upon submitting;
  3. ThunderBoard performs an automated check to see if the function is present within the corresponding file. If it can't find it, it will output a notice; this does not mean your function will not work, as it's executed anyway. Some scripts may contain an object-oriented structure, like:
    Foo {
    bar: function() {

    If you want to execute bar(), your function would look like Foo.bar(). However, this pattern cannot be find anywhere in the code above, and ThunderBoard would mark this as "not found"; the function is still calling bar() correctly though.

I acknowledge this might be a little bit difficult for those who don't know a word of web developing. Therefore, I will add a list of patterns for common plugins which will be reported to be faulty and which may need a reload. The list will be updated every time you will ask for me to look at a specific plugin you have installed which you find faulty. Just add a comment below asking for help if you are unsure. You can also report me patterns you have implemented with success in order to share it with other enthusiast members.

Static file serving and cache buster

From beta 5 onwards, ThunderBoard serves minified content as static files instead of preprocessing it. This saves server memory and also enhances speed, since files are written on your server's disk rather than generated on demand.

Versioning, or the ability to set a "version" of your board in order to send an updated copy of JS/CSS resources to your users, has been removed and will be rewritten in the next beta update. You still have the ability to wipe ThunderBoard's cache of static files by using the new cache buster tool in ThunderBoard's ACP section.

How faster will my site look?

It depends. ThunderBoard has been developed over MyBBoost and a lot of performance tests have been made. Previously, a page was loaded in about 7 to 10 seconds when you visited it for the first time. Now, 2 seconds are enough on a 7 Mbit/s ADSL. Switching between pages was a real pain given an average of 6 seconds to load; now, we're talking about half a second.

Despite an outstanding gain in performances, ThunderBoard might not suitable for everyone. MyBB already comes with speed; ThunderBoard is rather designed for boards with high customizations which may have slowed down the site too much, or for those aiming to provide a better browsing experience by using AJAX through the entire site and to save some bandwidth (since data exchanged is cut down treating multiple pages as a single page application).

Installation instructions

ThunderBoard is in beta stage. Something may not work properly. I suggest you to install the plugin on a development board, do some tests, and just then eventually install it on a live board. You have been warned.

Download the latest version provided in the attachment box below, upload all the files to your MyBB main folder making sure every file is in the correct folder and install & activate the plugin from the plugins manager in your Admin Control Panel.

Given this explanation, you must edit your templates accordingly in order to make JavaScripts compatible with ThunderBoard. ThunderBoard automatically tries to fix global variables upon installation and upon template changes, but you may experience some issues anyway.

Beta 2: ThunderBoard can automatically recognize and process variables, but the algorithm is faulty.
Beta 3: the algorithm has been edited with significant performance improvement and should be more precise.
Beta 4: the algorithm has been moved to low-level functions, lowering the impact on page loads.
Notable changes
Custom themes might contain patterns still unrecognized by the automatic checkup. If this is your case you must remove every "var " string you can find in your templates and put them on top of templates. If you are unsure, just ask below in the comments. I am here to help.

As an example, "var zIndex_modal = 9999;" should be changed to "zIndex_modal = 9999;". I would suggest using MyBB's search and replace functionality in Templates overview, search for "var " and delete it plus move the respective variable on top of its template. Not every variable should undergo this process; just variables marked as off-scope. Off-scope variables are those not included into a function(). If a variable is declared within a function, you shall leave it there on its own.

<script type="text/javascript">

something true// Should be edited to "something = true;"

function() {
something_else false// Leave this as is


Upgrade from older versions

If you are running older beta versions of ThunderBoard, here's an easy step-by-step tutorial on how to install the latest version:
  • before downloading ThunderBoard, uninstall the older version from your board;
  • download the latest ThunderBoard version, extract the .zip file, upload and overwrite the old files;
  • install and activate ThunderBoard;
  • enjoy!


ThunderBoard is not out of the mine yet. Fonts are yet to be implemented into the game and bugs might pop up out of nowhere. Testing is important. If you want me to improve the plugin, test the plugin and report as many bugs as you can find.

Found a bug?

If you encounter bugs, they are most probably caused by the AJAXification of the entire site which conflicts with JavaScript. In case you find something weird or malfunctioning, open a new thread in this forum with the following informations:
  • your board's URL;
  • a detailed step-by-step guide to reproduce the bug;
  • eventually, you can speed up the debug process by posting a screenshot of the JS error produced in your JavaScript debugger (console).

ThunderBoard is on GitHub

If you are a developer and want to improve ThunderBoard on your own, you can fork the project on GitHub and issue as many pull requests as you want.


ThunderBoard is licensed under MIT.
Filename Size Downloads
1.14 MB 150
160.58 KB 44
Hackmastr, Tac, turkeymap And 1 others like this post
kawaii 17 Apr 2016
Hey Shade, I think I found a bug. ;)

[Image: WPkcMa0.png]
Shade 17 Apr 2016 Edited
Can you elaborate more? No issues here. Edit: sorry, the attachment link was AJAXified as well. Should be fixed by now :)
kawaii 17 Apr 2016
Can you elaborate more? No issues here. Edit: sorry, the attachment link was AJAXified as well. Should be fixed by now :)
Shade (17 Apr 2016)
Yep, the download is working now. :)
Shade 18 Apr 2016 Edited
FYI – I've uploaded a new beta 1 version which fixes one issue with shutdown functions. It's kinda important but it's not enough to be updated to beta 2. The fix lets you properly update the counters (threads views, last visits, etc.).
Senpai 20 Apr 2016
A couple of issues;
  • links to external stylesheets break the minification with a 401 error.
  • stylesheets are still minified after disabling the Resource minifier.

both of these issues in conjunction mean the plugin wont work for me.
Shade 20 Apr 2016
Thank you for the report. Stylesheets are indeed minified even if the resource minifier is deactivated - that's because I didn't think about external stylesheets (bad practice nonetheless!). I will update ThunderBoard in the next couple of days.
Senpai 20 Apr 2016 Edited
(bad practice nonetheless!)
Shade (20 Apr 2016)
but it's actually good practice to put your static assets on a cookie-less domain c;

oh, and the multiquote is borked with this theme;
Shade 20 Apr 2016
I've heard it in the past, but never fully understood the benefits. Anyway, I will push an update soon :)
Senpai 20 Apr 2016
the benefit is that the browser doesn't have to send every cookie with each request for every asset.