Tutorials Ultimate Guide to Faster + Responsive Forum [Minify+Htaccess+Cache+Phone+FA5]

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
This guide is written by my personal experiences for over a year with xenforo

You may or may not use all options but at the end u will find your forum more responsive then before and I can guarantee that


Go here: PageSpeed Insights
Enter your website url and analyze it
Then screenshot both Mobile+Desktop ratings and save them!
[Mine were 30s for Mobile, 60s for Desktop]


1: Minify CSS/HTML/JS


Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It’s also beneficial to users accessing your website through a limited data plan and who would like to save on their bandwidth usage while surfing the web.


How to enable it?
Just head over to https://dash.cloudflare.com/ and register/login
add you website and they will ask if u need Auto Minify[So enable it for all three as below]

image782f3a765aca447e.md.png

Brotli also helps so don't forget to enable it

Auto Minify removes unnecessary characters from your source code (like whitespace, comments, etc.) without changing its functionality.

Minification can compress source file size which reduces the amount of data that needs to be transferred to visitors and thus improves page load times.

1.1: Caching using Cloudflare[CDN]:
CF also helps us with cache by acting CDN for our websites
Go to your Dashboard > Caching > Configuration
Scroll down to Browser Cache TTL and Change it to 1 Year

image0f41e8956dc54f26.png


The Browser Cache TTL specifies how long cached files will remain in your visitor’s browser cache. This expiration time is what Cloudflare will set unless longer time periods are specified at your web server.

A longer expiration time ensures faster load times for repeat visitors. However, a longer expiration time also means slower update times if those files are modified.

To learn more about Browser Cache TTL see here.

Note: You can also increase the cache expiration by specifying a longer cache time on the origin server, or you can set a different Cache Expiration for a specific path or resource using the Page Rules app. Cloudflare will use whichever value is longer between your origin server cache headers and your Cloudflare setting



While doing some work with PageSpeed insight I found a flaw in Cloudflare too
imageaabd356debe47da2.md.png

Rocket Loader took 732ms of the page load for doing what?eh.......To slow it down xD

What does Rocket Loader do?​

Rocket Loader improves paint times for pages that include Javascript. Visitors will have a better experience by seeing content load faster and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your Javascripts, including third party scripts, so that they do not block rendering the content of your pages.

But it slows down the page so I just disabled it from Cloudflare settings

- Open your website on Cloudflare
- Go to Speed then Optimization

image4fc1b71f7518e1e8.md.png
- Scroll down and u may find Rocket Loader

image939e74b0dad7da7c.md.png
- Turn the bad boy off and move to step 2 xD

Note: I saw other people also doing same thing bcs it delayed the page load by 700-1500ms in most cases[WHY? IDK!!! Someone if knows explain or maybe im wrong not 100% sure]


2: Improvements through .HTACCESS [APACHE ONLY!]


Everyone will be familiar with apache and its daily use nowadays. There are others like nginx/litespeed...But I wont recommend using those bcs the code I'm giving is for apache only[I guess so xD]

Go to your server/host and open the main directory.
Then open the .htaccess file

Paste this code AT THE BOTTOM


Code:
https://controlc.com/71ba05e9
Password: crax.pro

[I have constant use of the code and shall keep updating the paste so stay tuned;)]


NOTE: If your website goes down after saving the htaccess file means it didn't work then just remove the code[it works on mine but idk anything is possibe]

Well its a long and complex code. Ill just give a small explanation that the files being given to the user will be saved on his browser as long as theyre used[1 year most] so he wont have to fetch them again and again which will improve the performance of your forum ETC.


3: Proper Caching


Basically Xenforo has its own caching methods that aren't defaultly enabled. I tried to understand them but it was kinda complex but so far I achieved some success in some points

What Xenforo says:
https://xenforo.com/docs/xf2/cache/#cache
Note: there are other cache providers and IDK how to use em much yet maybe ill get it in future and that will surely improve our forums.

- Go to your server/Host
- open file src/config.php
- Paste this code at the bottom:

Code:
$config['pageCache']['enabled'] = true;
$config['cache']['enabled'] = true;

image75286e89660b2d98.png

And save it

That's it cache will be started and will be working
NOTE: If you website goes down remove the code and it will start working again.


4: Optimizing Phone [My Most Fav xD]


Some people use AMP and yes it might be a lot worth it but its paid sadly
I have an alternative that might help [10-30 rating points will increase]

- Get this add-on:
Browser Detection
[ Upload the files to your server/host before installation ]


- Then open src/config.php
- Paste this code[at the bottom below cache one]:
Code:
$config['pageCache']['onSetup'] = function (\XF\PageCache $pageCache) {
    $pageCache->setCacheIdGenerator(function(\XF\Http\Request $request) {
        return \SV\BrowserDetection\CacheHelper::getPageCacheId($request);
    });
};

Then save it


5: Reducing Fontawsome icons size:


A huge amount of fontawsome icons are grabbed every time u visit your forum.
Why? Bcs Xenforo has a load of FA5 icons all over the forum almost on every page!

XenForo uses the icon font Font Awesome Pro 5 that contains over 7.000 icons of which XenForo typically uses only a few hundred.
But as all icons are included in the CSS and font files, browsers have to download the full font files and CSS which does cause a significant overhead in most cases.

By subsetting the font to include only those icons that are actually being used, the size of the font files and CSS can often be drastically reduced which does improve page loading time.
Typically, the size of the font files can be reduced by over 80%.

Well It was hard setting it up the 1st time[for me]
But ill tell u the best options so u dont get carried away:

- Install the add-on
- Open options and check this:

image40c71fb8b51f8449.md.png

- Go down and uncheck this option:

image8435f7bba26c581d.md.png

- Then Go to
  • Appearance > Styles > Style properties > Font Awesome

Do exactly as this [im sure for the top 2 but the bottom idk still I did and things were now working]

imaged3b8b420faec948e.md.png

If this happens make sure u followed all me steps
Reload your pages a couple of times and xenforo will automatically grab all icons
Still issues refer to the FAQ: Beta - Font Awesome Manager - Extra info



5.1: How to setup pyftsubset



Open your ssh and type these commands:

1:
Code:
apt full-upgrade

2:
Code:
apt upgrade python

3:
Code:
yum install python3-pip

4:
Code:
python -m pip install --upgrade pip

5:
Code:
pip install fonttools
&
Code:
apt install fonttools

6:
Code:
pip install fonttools[ufo,lxml,woff,unicode]

7:
Code:
pip install zopfli


Then just check pyftsubset and the one below it [the path will be autoscrapped

image.md.png


6: Instant.page Code


instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it.
Head over to their webpage: Instant.Page
1627297010577.md.jpg

Copy the snippet on the webpage then go to your forum

Search in ACP for PAGE_CONTAINER
then click in the box below press CTRL+F and type: /body

Past the snippet above the [/body] tag and save
1627297056832.md.png


7: Optimizing/Compressing Images:


Why? Bcs Images are them one of the reasons that cost u slow pageloads!
Too much heavy and useless PNG/JPG/JPEG/GIFS on our forums

How to resolve without a headache?
Install this add-on:


BUT!!!
There is work to do not just leave it like me[bcs I didnt know how to use it sometime ago xD]
Step 1: Install the add-on like u usually do idc how tf u do that.
Step 2: Open your ssh[Of your host/server/vps or whatever u use(ask your host if u dont have it and use putty to login no rocket science im sure its even possible on phone) & no its not possible without SSH]. Then type these commands and press enter each time separately:

Code:
apt install gifsicle
apt install pngquant
apt install jpegoptim

Step 3:
Go here: /admin.php?options/groups/th_imageOptimizer
and do like this [or just make sure its that way] - I mean both of these options should be checked no shit
image5ca0e437c15fbba2.md.png

Step 4:
Go here: /admin.php?th-image-optimizer/providers/

image7a0d7217cafec3db.md.png
Open each of these 3 and click on "Provider is active"

imagebf66c9a40213c476.md.png
Step 5:
Go here: /admin.php?th-image-optimizer/
image7de69e1d57d5019b.md.png

You just saved 50-70% storage and also stress on user browser to load heavy images and shit hehehe xD


Your done!


Once again check PageSpeed Rating of your website and compare with old ones before u started:
https://developers.google.com/speed/pagespeed/insights/


Thanks for your time im sure this helped
I did ask u to save those 2 screenshots from PageSpeed Insights, kindly drop them here and also check your website rating now.
 
Last edited:

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
Updated!
Added GZIP to JQERY.MIN.JS (y)

Re add this code from step 2 at the bottom:

imageb448ce7b8ab07a7a.md.png


imageeef54f5be1a2b788.md.png
Code:
####NEW GZIP JQUERY.MIN.JS FROM GOOGLE###
<IfModule mod_headers.c>
    # Serve gzip compressed CSS and JS files if they exist
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.(css|js)"         "$1\.$2\.gz" [QSA]

    # Serve correct content types, and prevent mod_deflate double gzip.
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
    RewriteRule "\.js\.gz$"  "-" [T=text/javascript,E=no-gzip:1]


    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header append Content-Encoding gzip

      # Force proxies to cache gzipped &
      # non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>
####NEW GZIP JQUERY.MIN.JS FROM GOOGLE###
 

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
Step 2 Updated

Added Font caching its a little trippy though well I did find that google fonts are making some problem in page loads bcs they're cached only for 24hours
U can localhost them and increase that however its a complex process
 

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
Added 1.1: Caching using Cloudflare[CDN]
Will help to leverage cache on user browser for longer period and reduce server load
 

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
8: Cache almost everything on user browser:
What's the idea behind this?
1st Load: Everything is fetched when u load a website(i.e. css, images, js, fonts, bla, blaa, blaaa)
2nd Load[reload]: Again everything is fetched considering smth might have changed (what can change?html and some shit[technical]
BUT!!!
CSS and all images stay static and don't change RIGHT? Fuk im right u dump bitch keep reading...
So we will download everything on 1st load and then next time load everything that doesent change[static data] from the browser disk]
EX:
1st Load [WHEN U JUST OPEN ANY SITE FOR 1ST TIME(try in incognito mode)]:
image.md.png

2nd Load [Reload the page]:
99% of every shit is loaded from disk/memory and server didnt have to do anything hehe BOOM
imageec14fedd05aca521.md.png
How to do it?
Pay me 500$ right now and ill tell ya :cool: :cool: :cool:


xD Im joking...fk the monies.... Love Homies <3
1: For this you need CloudFlare!!!!! open dashboard and select your website
2: Go to (Page) Rules:
imagecc956d1a2f62e16e.png
3: Make 3 page rules:
~1: This one's for fun xD

imaged60fe32d68f6020c.md.png
~2: Cache your CSS!!! [This is the largest file on your website that slows it down so we hit the big guy]

imagedcd091df88e7e225.md.png
~3: Under this directory lies avatar images and most of other image
[ NOTE: I WOULD ADVICE MAKE A DIRECTORY IN /data/mydata : where u keep your node icons and forum logos/banners or shits like those that are like image shit so they're cached ]

image70adbcc538ec9ec7.md.png

Then it will look smth like this:
imagee219deb4d270462a.md.png
Result will be as I showed u open Network tab in Dev tools of your browser and thank me later <3

9: Fix Too Much Rendering

content-visibility: the new CSS property that boosts your rendering performance


The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content. Pretty neat.

Baseline: What we all normally use
Chunks: What it will become later


image77a7b704f5fc9dfc.md.png

1: Inspect Element your main page - focus on the category

image42ccddb104c7085e.md.png
2: Write that exact name down in notepad or whatever [ex: div.block.block--category.block--category86 ]

3: open Extra.Less from your ACP and past the above like this:

Code:
/* Renderer Less Categories */

div.block.block--category.block--category86  {
        content-visibility: auto;
      }
 
/* Renderer Less Categories */

4: Repeat this process for all categories [NOTE: Make sure they're below the page fold (The actual page without scrolling down - Not visible on initial load)

image8eae2e0d82c84c77.md.png
5: Same thing can be applied to sidebar but it might break your website, so do it while utilizing some brain cells

A better method proposed by user @O3S is just add this code rather than for each category individually:

Code:
div.block.block--category[class*="block--category"] {
    content-visibility: auto;
}





NOTE: If your website fucks up just remove the code and leave it as it is because the theme might already be doing smth else bla bla bla (Test on PC and Phone)

Watch this video maybe might clear some doubts:
Use content-visibility: auto to Improve Initial Page Load Time

More details:
content-visibility: the new CSS property that boosts your rendering performance
 
Last edited:

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
If you face any problem or have some suggestion u can always hit that inbox & I wont bite;)
 

O3S

Registered Member
Joined: Sep 9, 2021
Messages: 4
Points: 3
Reaction score: 10
4: Repeat this process for all categories
In case you have many categories, to avoid placing 100k lines repeated layers it is more useful to use the following css code..

CSS:
div.block.block--category[class*="block--category"] {
    content-visibility: auto;
}
This code will ignore the category ID
 

Marks-Man

Administrator
Joined: Mar 15, 2021
Messages: 743
Resources: 330
Points: 63
Reaction score: 339
In case you have many categories, to avoid placing 100k lines repeated layers it is more useful to use the following css code..

CSS:
div.block.block--category[class*="block--category"] {
    content-visibility: auto;
}
This code will ignore the category ID
I agree ;)
 

ThanosCrax

Registered Member
Joined: Jul 3, 2021
Messages: 58
Points: 18
Reaction score: 72
In case you have many categories, to avoid placing 100k lines repeated layers it is more useful to use the following css code..

CSS:
div.block.block--category[class*="block--category"] {
    content-visibility: auto;
}
This code will ignore the category ID
Great work❤️👌
 

Blaze_Hadden

Registered Member
Joined: Aug 19, 2021
Messages: 135
Resources: 1
Points: 28
Reaction score: 82
This guide is written by my personal experiences for over a year with xenforo

You may or may not use all options but at the end u will find your forum more responsive then before and I can guarantee that


Go here: PageSpeed Insights
Enter your website url and analyze it
Then screenshot both Mobile+Desktop ratings and save them!
[Mine were 30s for Mobile, 60s for Desktop]


1: Minify CSS/HTML/JS


Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It’s also beneficial to users accessing your website through a limited data plan and who would like to save on their bandwidth usage while surfing the web.


How to enable it?
Just head over to https://dash.cloudflare.com/ and register/login
add you website and they will ask if u need Auto Minify[So enable it for all three as below]

image782f3a765aca447e.md.png

Brotli also helps so don't forget to enable it

Auto Minify removes unnecessary characters from your source code (like whitespace, comments, etc.) without changing its functionality.

Minification can compress source file size which reduces the amount of data that needs to be transferred to visitors and thus improves page load times.

1.1: Caching using Cloudflare[CDN]:
CF also helps us with cache by acting CDN for our websites
Go to your Dashboard > Caching > Configuration
Scroll down to Browser Cache TTL and Change it to 1 Year

image0f41e8956dc54f26.png


The Browser Cache TTL specifies how long cached files will remain in your visitor’s browser cache. This expiration time is what Cloudflare will set unless longer time periods are specified at your web server.

A longer expiration time ensures faster load times for repeat visitors. However, a longer expiration time also means slower update times if those files are modified.

To learn more about Browser Cache TTL see here.

Note: You can also increase the cache expiration by specifying a longer cache time on the origin server, or you can set a different Cache Expiration for a specific path or resource using the Page Rules app. Cloudflare will use whichever value is longer between your origin server cache headers and your Cloudflare setting



While doing some work with PageSpeed insight I found a flaw in Cloudflare too
imageaabd356debe47da2.md.png

Rocket Loader took 732ms of the page load for doing what?eh.......To slow it down xD

What does Rocket Loader do?​

Rocket Loader improves paint times for pages that include Javascript. Visitors will have a better experience by seeing content load faster and speed is also a factor in some search rankings.
Rocket Loader improves paint times by asynchronously loading your Javascripts, including third party scripts, so that they do not block rendering the content of your pages.

But it slows down the page so I just disabled it from Cloudflare settings

- Open your website on Cloudflare
- Go to Speed then Optimization

image4fc1b71f7518e1e8.md.png
- Scroll down and u may find Rocket Loader

image939e74b0dad7da7c.md.png
- Turn the bad boy off and move to step 2 xD

Note: I saw other people also doing same thing bcs it delayed the page load by 700-1500ms in most cases[WHY? IDK!!! Someone if knows explain or maybe im wrong not 100% sure]


2: Improvements through .HTACCESS [APACHE ONLY!]


Everyone will be familiar with apache and its daily use nowadays. There are others like nginx/litespeed...But I wont recommend using those bcs the code I'm giving is for apache only[I guess so xD]

Go to your server/host and open the main directory.
Then open the .htaccess file

Paste this code AT THE BOTTOM


Code:
https://controlc.com/71ba05e9
Password: crax.pro

[I have constant use of the code and shall keep updating the paste so stay tuned;)]


NOTE: If your website goes down after saving the htaccess file means it didn't work then just remove the code[it works on mine but idk anything is possibe]

Well its a long and complex code. Ill just give a small explanation that the files being given to the user will be saved on his browser as long as theyre used[1 year most] so he wont have to fetch them again and again which will improve the performance of your forum ETC.


3: Proper Caching


Basically Xenforo has its own caching methods that aren't defaultly enabled. I tried to understand them but it was kinda complex but so far I achieved some success in some points



- Go to your server/Host
- open file src/config.php
- Paste this code at the bottom:

Code:
$config['pageCache']['enabled'] = true;
$config['cache']['enabled'] = true;

image75286e89660b2d98.png

And save it

That's it cache will be started and will be working
NOTE: If you website goes down remove the code and it will start working again.


4: Optimizing Phone [My Most Fav xD]


Some people use AMP and yes it might be a lot worth it but its paid sadly
I have an alternative that might help [10-30 rating points will increase]

- Get this add-on:
Browser Detection
[ Upload the files to your server/host before installation ]


- Then open src/config.php
- Paste this code[at the bottom below cache one]:
Code:
$config['pageCache']['onSetup'] = function (\XF\PageCache $pageCache) {
    $pageCache->setCacheIdGenerator(function(\XF\Http\Request $request) {
        return \SV\BrowserDetection\CacheHelper::getPageCacheId($request);
    });
};

Then save it


5: Reducing Fontawsome icons size:


A huge amount of fontawsome icons are grabbed every time u visit your forum.
Why? Bcs Xenforo has a load of FA5 icons all over the forum almost on every page!


XenForo uses the icon font Font Awesome Pro 5 that contains over 7.000 icons of which XenForo typically uses only a few hundred.
But as all icons are included in the CSS and font files, browsers have to download the full font files and CSS which does cause a significant overhead in most cases.

By subsetting the font to include only those icons that are actually being used, the size of the font files and CSS can often be drastically reduced which does improve page loading time.
Typically, the size of the font files can be reduced by over 80%.

Well It was hard setting it up the 1st time[for me]
But ill tell u the best options so u dont get carried away:

- Install the add-on
- Open options and check this:

image40c71fb8b51f8449.md.png

- Go down and uncheck this option:

image8435f7bba26c581d.md.png

- Then Go to
  • Appearance > Styles > Style properties > Font Awesome

Do exactly as this [im sure for the top 2 but the bottom idk still I did and things were now working]

imaged3b8b420faec948e.md.png

If this happens make sure u followed all me steps
Reload your pages a couple of times and xenforo will automatically grab all icons
Still issues refer to the FAQ: Beta - Font Awesome Manager - Extra info



5.1: How to setup pyftsubset



Open your ssh and type these commands:

1:
Code:
apt full-upgrade

2:
Code:
apt upgrade python

3:
Code:
yum install python3-pip

4:
Code:
python -m pip install --upgrade pip

5:
Code:
pip install fonttools
&
Code:
apt install fonttools

6:
Code:
pip install fonttools[ufo,lxml,woff,unicode]

7:
Code:
pip install zopfli


Then just check pyftsubset and the one below it [the path will be autoscrapped

image.md.png


6: Instant.page Code


instant.page uses just-in-time preloading — it preloads a page right before a user clicks on it.
Head over to their webpage: Instant.Page
1627297010577.md.jpg

Copy the snippet on the webpage then go to your forum

Search in ACP for PAGE_CONTAINER
then click in the box below press CTRL+F and type: /body

Past the snippet above the [/body] tag and save
1627297056832.md.png


7: Optimizing/Compressing Images:


Why? Bcs Images are them one of the reasons that cost u slow pageloads!
Too much heavy and useless PNG/JPG/JPEG/GIFS on our forums

How to resolve without a headache?
Install this add-on:


BUT!!!
There is work to do not just leave it like me[bcs I didnt know how to use it sometime ago xD]
Step 1: Install the add-on like u usually do idc how tf u do that.
Step 2: Open your ssh[Of your host/server/vps or whatever u use(ask your host if u dont have it and use putty to login no rocket science im sure its even possible on phone) & no its not possible without SSH]. Then type these commands and press enter each time separately:

Code:
apt install gifsicle
apt install pngquant
apt install jpegoptim

Step 3:
Go here: /admin.php?options/groups/th_imageOptimizer
and do like this [or just make sure its that way] - I mean both of these options should be checked no shit
image5ca0e437c15fbba2.md.png

Step 4:
Go here: /admin.php?th-image-optimizer/providers/

image7a0d7217cafec3db.md.png
Open each of these 3 and click on "Provider is active"

imagebf66c9a40213c476.md.png
Step 5:
Go here: /admin.php?th-image-optimizer/
image7de69e1d57d5019b.md.png

You just saved 50-70% storage and also stress on user browser to load heavy images and shit hehehe xD


Your done!


Once again check PageSpeed Rating of your website and compare with old ones before u started:
https://developers.google.com/speed/pagespeed/insights/


Thanks for your time im sure this helped
I did ask u to save those 2 screenshots from PageSpeed Insights, kindly drop them here and also check your website rating now.
great upload....
 
  • Tags
    responsive forum ultimate guide to faster + responsive forum
  • Top