Help needed - Caching and speed improvements

Frode789

Well-known member
Desktop speed test:
Screenshot 2023-02-03 220601.jpg

Mobile speed test:
Screenshot 2023-02-03 220642.jpg

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 :p 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:
# 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]
 
Last edited:
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
 
Last edited:
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 :)
 

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.
 
Back
Top Bottom