XF 2.1 Improve PageSpeed / GTmetrix Scores

Chad

Active member
Trying to improve the scores.

PageSpeed (Google Direct)
50 Mobile / 94 Desktop

GTmetrix
79% Pagespeed / 72% YSlow

I have a custom skin (proprietary), Cloudflare CDN enabled. My htaccess is:

Code:
RewriteEngine On

RewriteCond %{HTTP_HOST} ^talkjesus\.com [NC]
RewriteRule ^(.*)$ https://www.talkjesus.com/$1 [L,R=301]

# Mod_security can interfere with uploading of content such as attachments. If you
# cannot attach files, remove the "#" from the lines below.
#<IfModule mod_security.c>
# SecFilterEngine Off
# SecFilterScanPOST Off
#</IfModule>

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

# TN - BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# TN - END Cache-Control Headers

Header unset Pragma
FileETag None
Header unset ETag

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</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>

ErrorDocument 401 default
ErrorDocument 403 default
ErrorDocument 404 default
ErrorDocument 500 default

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

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

RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteRule ^(data/|js/|styles/|install/|favicon\.ico|crossdomain\.xml|robots\.txt) - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

</IfModule>

<Files 403.shtml>
order allow,deny
allow from all
</Files>

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php73” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php73 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit
 

Attachments

  • Screenshot_2020-01-17 PageSpeed Insights.webp
    Screenshot_2020-01-17 PageSpeed Insights.webp
    38.5 KB · Views: 22
  • Screenshot_2020-01-17 GTmetrix Performance Report C (79%) C (73%).webp
    Screenshot_2020-01-17 GTmetrix Performance Report C (79%) C (73%).webp
    66 KB · Views: 24
I took a quick look.

Things that jump out:

TTFB seems slow at times. This usually has to do with server-stuff. PHP performance / Guest Caching. https://www.bytecheck.com/results?resource=https://www.talkjesus.com/

Looks like you are using Railgun, but I think guest caching could be faster. Not sure you compared.

Is cloudflare caching enabled?


I don't see these files being cached. Cloudflare probably doesn't cache these files automatically since it doesn't have a traditional .css extension. I have these page rules to make sure they are cached.

Screen Shot 2020-02-03 at 4.43.52 PM.png

The other thing I noticed is that, my site has a much worse PageSpeed score, but based on field data, my page loads faster for more people. Which is what matters to google.

Screen Shot 2020-02-03 at 4.48.20 PM.png

So you might want to research what affects FCP. It may be that you have more users from countries with slower internet connections. Unfortunately that affects these timings and you get penalized for them.
 
I don't see these files being cached. Cloudflare probably doesn't cache these files automatically since it doesn't have a traditional .css extension. I have these page rules to make sure they are cached.

Where is that added in Cloudflare panel?

I have CF enabled. These are my settings.

Screenshot_2020-02-03 Caching talkjesus com Account Cloudflare - Web Performance Security.webp

Screenshot_2020-02-03 Speed talkjesus com Account Cloudflare - Web Performance Security.webp
 
I think I found it in CF and added this...

View attachment 217773

That won't work. You can tell what Cloudflare's doing based on the response headers. In this case CF-Cache-Status: dynamic means it's not caching.

By default Cloudflare caches certain file extensions. Not file types. File extensions. So it doesn't know that css.php is a css file, so it won't cache it.

You have to set up a rule to "Cache Everything" for that url. And I'd use the full css.php* rather than css*, just to avoid it accidentally matching something unintended.

arn
 

Attachments

  • Screen Shot 2020-02-03 at 5.39.45 PM.webp
    Screen Shot 2020-02-03 at 5.39.45 PM.webp
    145.9 KB · Views: 46
You have to set up a rule to "Cache Everything" for that url. And I'd use the full css.php* rather than css*, just to avoid it accidentally matching something unintended.

That was a mistake. Just fixed it.

That won't work. You can tell what Cloudflare's doing based on the response headers. In this case CF-Cache-Status: dynamic means it's not caching.

Sorry, where do you find response headers exactly? I followed this but not exactly understanding whether now CF is caching the css or not.

 
Hmm.. I'm not sure... and not sure if that would work.

For some reason, they make it sound like you need a Business plan (with Bypass on Cookie) to get there:
 
Hmm.. I'm not sure... and not sure if that would work.

oops, sorry. I got confused. I thought his server sends 'private' for his css.
regarding caching pages... I wish I could tell Clowdflare to cache those pages with x-xf-cache headers without paying $200 a month )
 
Top Bottom