Help needed - Caching and speed improvements

[Frode789]

Desktop speed test:


Mobile speed test:


So it's pretty bad, mobile is horrid.
So a lot of it is down to images I think. I have auto image optimization with TH Image Optimizer (paying for a Kraken.io plan). It's on max optimization with Lossy and stripping all metadata. "Swap attachments with thumbnails on mobile" is ON, so not sure why it is complaining about it being served some large images on mobile.
What I really need is WebP... (ahem XF 2.3).

And I want to make sure I'm not caching content 3-4 times And that settings are as optimal as possible.
So what caching techniques is recommended of the above? What "works well together", and what should be disabled?

Litespeed web server.
Some relevant (I think) settings from my php.ini (php 8.1):
opcache v
memcached v
redis v
zip v
zlib v

zlib output compression disabled
gzip compression enabled
bzip2 compression enabled

Style: Omni based from pixelexit.

Cloudfare:
Argo Tiered Cache ON
Caching level standard
TTL 4 hours
Crawler Hints ON
Brotli ON
Auto minify OFF (using XFOptimize minify)
Early Hints ON

Xenforo:
LSCache ON.
Font Awesome Manager enabled.

XFOptimize:
Minify on max.
Swap attachments with thumbnails on mobile ON.
Pre-connect ON
Preload core XF JS/CSS
Preload images (main content)
Defer scripts and CSS.

Xon Lazy loading, but it doesn't work for XenPorta. :\

Htaccess:

Spoiler: Htaccess

# LiteSpeed XenForo cache
<IfModule litespeed>
CacheLookup public on
RewriteEngine On
# cache
RewriteCond %{HTTP_COOKIE} !(xf_lscxf_logged_in|xf_user|xf_session_admin) [NC]
RewriteCond %{REQUEST_URI} !/install/ [NC]
RewriteRule .* - [E=Cache-Control:max-age=360,E="cache-vary:xf_style_id,xf_language_id"]
# no cache
RewriteCond %{HTTP_COOKIE} (xf_lscxf_logged_in|xf_user|xf_session_admin) [NC]
RewriteRule .* - [E=Cache-Control:vary=loggedin,E=Cache-Control:no-cache]
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On

# If you are having problems with the rewrite rules, remove the "#" from the
# line that begins "RewriteBase" below. You will also have to change the path
# of the rewrite to reflect the path to your XenForo installation.
#RewriteBase /xenforo

# This line may be needed to enable WebDAV editing with PHP as a CGI.
#RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - [NC,L]
RewriteRule ^.*$ index.php [NC,L]
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On

# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"

# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"

# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"

# CSS, JavaScript
ExpiresByType text/css "access plus 4 months"
ExpiresByType text/javascript "access plus 4 months"
ExpiresByType application/javascript "access plus 4 months"

# Others
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

# <IfModule php7_module>
# php_flag display_errors Off
# php_value max_execution_time 30
# php_value max_input_time 60
# php_value max_input_vars 1000
# php_value memory_limit 2048M
# php_value post_max_size 50M
# php_value session.gc_maxlifetime 1440
# php_value session.save_path "/var/cpanel/php/sessions/ea-php72"
# php_value upload_max_filesize 50M
# php_flag zlib.output_compression Off
# </IfModule>
# <IfModule lsapi_module>
# php_flag display_errors Off
# php_value max_execution_time 30
# php_value max_input_time 60
# php_value max_input_vars 1000
# php_value memory_limit 128M
# php_value post_max_size 50M
# php_value session.gc_maxlifetime 1440
# php_value session.save_path "/var/cpanel/php/sessions/ea-php72"
# php_value upload_max_filesize 50M
# php_flag zlib.output_compression Off
# </IfModule>
# END cPanel-generated php ini directives, do not edit
RewriteCond %{HTTP_HOST} ^boardgamedungeon\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.boardgamedungeon\.com$
RewriteRule ^/?$ "http\:\/\/boardgamedungeon\.net\/" [R=301,L]

 

[Muddy Boots]

Use @eva2000 's CentMinMod Install, you wont go wrong with speed issues if set up correctly

I use Hetzner VPS's

CentminMod

PixelExits Themes

A couple of my XF sites, one not being cloudflare and the other behind cloudflare (the faster one)

 

[Kirby]

Optimization suggestions ordered by incressing difficulty

• Optimize the logo image, seems waay too heavy
• Cloudflare is not configured to cache css.php, change that
• If you use CloudFlare Pro: Enable Polish
• You are using Roboto from Google Fonts, try to remove that. If this is not possible consider to host it locally
• Your homepage uses many full size attachments which can't be cached. Consider if using (larger) thumbnails would be possible. If not the attachments should at least be loaded lazily (doesn't seem to be the case right now)
• TTFB seems to be a bit (too) slow to me, try to find out why
• As you are optimizing attachment images: Consider using progressive JPEG
• Try to reduce the amount of JavaScript
• Consider full page caching in XF, LiteSpeed or CloudFlare

 

[MySiteGuy]

Use @eva2000 's CentMinMod Install, you wont go wrong with speed issues if set up correctly

I use Hetzner VPS's

CentminMod

PixelExits Themes

A couple of my XF sites, one not being cloudflare and the other behind cloudflare (the faster one)

View attachment 281031
View attachment 281033

The problems with his site are not due to the server backend.

 

[Frode789]

Optimization suggestions in incressing difficulty order

• Optimize the logo image, seems waay too heavy
• Cloudflare is not configured to cache css.php, change that
• You are using Roboto from Google Fonts, try to remove that. If this is not possible consider to host it locally
• Your homepage uses many full size attachments which can't be cached. Consider if using (larger) thumbnails would be possible. If not the attachments should at least be loaded lazily (doesn't seem to be the case right now)
• Try to reduce the amount of JavaScript
• Consider full page caching in XF, LiteSpeed or CloudFlare

• Logo: I was sure I did that.. But apparently not, thanks! Done, from 50 KB to 16 KB.
• css.php: What pagerule setting do you have for it? The page rule has so many options (type of expression, cache type etc).
• Google font: I will check to see if it can be hosted locally.
• Images on front page: So I'm using XFOptimize, which should deal with this according to the description. The setting on XFO to "Swap attachments with thumbnails on mobile", so responsiveNarrow = thumbnail, not attachements. But maybe it's not working. And I'm waiting on Xon to add support for XP2 for the lazy loading, which would help a lot.
• JS Reduction: Don't see many areas to remove and keep Xen Porta. The only one is the youtube widget js file (which is useless anyway as I never use YT media embeds in the slider), and I've pinged @Jaxel and @Ozzy47 about it for the respective addons (XP2/XPI) to see if something can be implemented to remove this as something that always loads, regardless of if you need it or not
• So I do run on Litespeed server and have the LS XF2 addon. I've confirmed it works by receiving a "hit" on litespeed-cache for guests. Do I need to do something more? The addon doesn't have any settings as I remember.

Thanks for the help Kirby

 

[Kirby]

Cloudflare optimizations for XenForo

I've had a few people that use my Cloudflare add-on ask me what Cloudflare options/settings are best for XenForo. So rather than repeating myself privately, I'm going to turn this post into a bit of a configuration help document for those that want to read it. Cloudflare is pretty great out of...

xenforo.com

I"d probably also test various XFOptimize options (Preload / Preconnect / Minify HTML).
In theory those are good ideas but they can have quite a different effect.