What's new

Maldinor

Maldinor

Site Owner
Staff member
Administrator
Moderator
Go here: https://developers.google.com/speed/pagespeed/insights
Enter your website url and analyze it
Then screenshot both Mobile+Desktop ratings and save them!

1: Minify CSS/HTML/JS
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, enable all three options (JS, CSS & HTML)

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


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

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.

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

- Open your website on Cloudflare
- Go to Speed then Optimization
- Scroll down and you may find Rocket Loader
- 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:
Paste: https://controlc.com/71ba05e9
Password: crax.pro

NOTE: If your website goes down after saving the htaccess file means it didn't work then just remove the code.

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 they're 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

Code:
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;

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]

Install this add-on: https://xfworld.net/index.php?resources/browser-detection-2-2-0.311/
[ 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!

Install this add-on: https://xfworld.net/index.php?threads/kirby-font-awesome-manager-1-2-1.1462/

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: Automatically add missing icons (under Build Mode)
- Go down and uncheck Load subsets only option & CHECK ENABLE PUSH
- Then Go to
  • Admin CP > 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]
- Check 'Enable DuoTone Icons'
- Uncheck 'Only use CSS for select weight'
- Main Icons: Select 'Standard'
- Brand Icons: Select 'Lazy Load Share Buttons for Guests'

If this happens make sure u followed all me steps

Read this if still:
https://xenforo.com/community/resources/font-awesome-manager.8407/field?field=faq

5.1: How to setup pyftsubset
Open your ssh and type these commands:

Code:
apt full-upgrade
apt upgrade python
yum install python3-pip
python -m pip install --upgrade pip
pip install fonttools
apt install fonttools
pip install fonttools[ufo,lxml,woff,unicode]
pip install zopfli

Then go to
  • Admin CP > Setup > Options > Font Awesome
just check pyftsubset and the one below it [the path will be autoscrapped]

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
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

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: https://xfworld.net/index.php?resources/th-image-optimizer-1-2-0-patch-level-1.312/

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 CP > Setup > Options > [TH] Image optimizer
and check both options
1628271955066

Step 4:
Go here:
  • Admin CP > Content > Providers
1628272050204
Open each of these 3 and click on "Provider is active"

Step 5:
Go here:
  • Admin CP > Content > Status queue
You just saved 50-70% storage and also stress on user browser to load heavy images hehehe xD

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 technical stuff)
BUT!!!
CSS and all images stay static and don't change RIGHT? Keep reading...
So we will download everything on 1st load and then next time load everything that doesn't change[static data] from the browser disk]

1: For this you need CloudFlare!!!!! open dashboard and select your website
2: Go to (Page) Rules:

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


3: Make 3 page rules:
~1: This one's for fun xD
Imagedcd091df88e7e225
~2: Cache your CSS!!! [This is the largest file on your website that slows it down so we hit the big guy]
Imaged60fe32d68f6020c
~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
Then it will look something like this:
1630430345332
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​

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

1632745166935
1: Inspect Element your main page - focus on the category
1632745394780
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)
1632745678380
5: Same thing can be applied to sidebar but it might break your website, so do it while utilizing some brain cells

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

Watch this video maybe might clear some doubts:
https://egghead.io/lessons/css-use-content-visibility-auto-to-improve-initial-page-load-time

More details:
https://web.dev/content-visibility/

Your done!

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

Additional checking can be done using this site:
https://www.webpagetest.org/

[It gives a lot of good info about how your website reacts to every aspect and u shall notice a lot of data is now cached and compressed thanks to me hhh xD]
 
  • Top