Excessive size of JavaScript file affects website opening speed

xiahuan710

Can you optimize this JavaScript file? It seriously affects the speed of website opening

/assets/forum.js? v=*

clarkwinkelmann

xiahuan710 can you try scanning your website with https://lab.migratetoflarum.com/ and optionally share the scan results link with us?

There are 2 things you can easily improve and the lab will show it to you under the "Javascript" section:

Make sure gzip is enabled on your server
Make sure none of the extensions show "compiled in development mode"

You should be able to find guides for enabling gzip on most servers. If you find extensions in development mode you can report it to the extension developer.

Finally if all of that is done and things are still slow, the lab will show you which extensions take the most space in the javascript file so you could look into whether an extension is really required or maybe you could sponsor some work for the extension developer to optimize their extension to take less space.

Obviously as a general rule, more extensions = bigger javascript size.

If the file is downloaded quickly but still slow to render, maybe an extension is interfering with the Flarum boot sequence.

xiahuan710

clarkwinkelmann That means all the extensions enabled in my backend are integrated into this file, is that right? thank you.

clarkwinkelmann

xiahuan710 that's correct. Flarum automatically creates that file by concatenating the javascript provided by each extension, and a few other things but it's mostly Flarum itself (500kB to 600kB) and then extensions.

Unfortunately there's no large-scale implementation of javascript chunking for Flarum at the moment, only a few extensions do their own chunking or asynchronous loading but there are plans to split Flarum javascript into more file for optimization, something to look forward in the next major version.

Flarum also has an admin.js file that's the concatenation of core+extensions for the admin panel, but that's as far as chunking goes at the moment.

xiahuan710

clarkwinkelmann I am looking forward to reducing this file to around 50k, which means splitting it into more than 10 files. I believe this will greatly improve the speed of website opening. Thank you very much for your response and your contribution to the community. I would like to express my high respect to you.

clarkwinkelmann

xiahuan710 can you share the numbers you are seeing during your tests? We might be able to suggest other methods to improve the loading speed until Flarum gets better chunking.

gzip in particular will generally reduce the file size by around 70% during transfer. Flarum and extensions have a lot of code (class names, import paths, etc.) repeated which can be very easily compressed.

A personal project of mine is the Backoffice extension which gives a place for extensions to add moderation features that will not impact the forum.js filesize for regular users. If some extensions have a large amount of code that's only useful to moderators it could be an option to integrate it with the Backoffice. In a future major version the Flarum admin panel might be refactored to serve a similar purpose to my extension.

xiahuan710

clarkwinkelmann My webserver has enabled gzip, the size of this js file I saw in the http header is 1.2Mb, the loading time is 7 seconds, the time of ttfb is 3.33 seconds, the time to download this file is 3.92 seconds, and the website must Wait for this js to finish loading before it will be fully displayed

luceos

xiahuan710 what is the output of php flarum info and what is the stack you are running Flarum on?

xiahuan710

luceos Flarum core: 1.7.2
PHP version: 8.1.16
MySQL version: 5.7.35-log
Loaded extensions: Core, date, libxml, openssl, pcre, sqlite3, zlib, bcmath, ctype, curl, dom, hash, filter, ftp, gd, gettext, json, iconv, intl, SPL, mbstring, session, standard, pcntl, exif, mysqlnd, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, mysqli, shmop, SimpleXML, soap, sockets, sodium, sysvsem, tokenizer, xml, xmlreader, xmlwriter, xsl, zip, fileinfo, imagick, memcached, Zend OPcache
+----------------------------------------+---------+--------+
| Flarum Extensions | | |
+----------------------------------------+---------+--------+
| ID | Version | Commit |
+----------------------------------------+---------+--------+
| flarum-flags | v1.7.0 | |
| flarum-suspend | v1.7.0 | |
| flarum-tags | v1.7.1 | |
| flarum-approval | v1.7.0 | |
| flarum-markdown | v1.7.0 | |
| yohtozze-markdown-paste | 1.0.0 | |
| v17development-seo | v1.8.0 | |
| justoverclock-be-active-user-indicator | 0.1.0 | |
| fof-upload | 1.2.3 | |
| fof-spamblock | 1.1.0 | |
| fof-sitemap | 2.0.1 | |
| fof-links | 1.1.3 | |
| fof-linguist | 1.1.1 | |
| fof-ignore-users | 1.1.1 | |
| fof-formatting | 1.0.3 | |
| fof-byobu | 1.2.0 | |
| fof-best-answer | 1.2.5 | |
| flarum-subscriptions | v1.7.0 | |
| flarum-sticky | v1.7.0 | |
| flarum-statistics | v1.7.0 | |
| flarum-nicknames | v1.7.0 | |
| flarum-mentions | v1.7.0 | |
| flarum-lock | v1.7.0 | |
| flarum-likes | v1.7.0 | |
| flarum-lang-chinese-simplified | v1.3.0 | |
| flarum-emoji | v1.7.0 | |
| flarum-bbcode | v1.7.0 | |
| blomstra-spam-prevention | 1.3.1 | |
| askvortsov-rich-text | v2.1.7 | |
+----------------------------------------+---------+--------+
Base URL: https://www.haoquant.com
Installation path: /home/www/web/www.haoquant.com
Queue driver: sync
Session driver: file
Scheduler status: Never run
Mail driver: smtp
Debug mode: off