PageSpeed Insights can show a big improvement for your website if the CSS and JS files are combined. The speed increase will, of course, depend on how many CSS and JS files are required. After installing and configuring Fast Velocity Minify, make sure your JS files are combined into one or two files. If they are not, no worries, they will with just a few settings.
When combining the files you might run into layout issues or other issues so you need to test thoroughly before implementing this. You want high Google Page Speed but you also need your layout to look good. The plugin will let you exclude some files which should not be combined.
For most websites, you can combine all CSS files in one file.
For JS files you need to manually populate some fields to make sure the JS files are combined. Below are some settings for the JS Settings setup that you can use when starting the process. You might need to tweak them based on the results you get.
Enable JS Processing: Checked
Advanced JS Options
- Combine JS Files: Checked
- Disable JS Files Minification: Not checked
- Disable JS Inline Minification: Not checked
- Disable JS link Preload: Not checked
Ignore Script Files: blank
Render Blocking JS file
/jquery-migrate-
/jquery-migrate.js
/jquery-migrate.min.js
/jquery.js
/jquery.min.js
Defer JS Files
/ajax.aspnetcdn.com/ajax/
/ajax.googleapis.com/ajax/libs/
/cdnjs.cloudflare.com/ajax/libs/
/stackpath.bootstrapcdn.com/bootstrap/
/wp-admin/
/wp-content/
/wp-includes/Defer Inline JavaScript
wp.i18n
Delay third party scripts until user interaction
assets.pinterest.com/js/pinit_main.js
connect.facebook.net
fbq(
function(f,b,e,v,n,t,s)
function(h,o,t,j,a,r)
function(w,d,s,l,i)
gtag(
pintrk(
www.googletagmanager.comRemove JavaScript Scripts: blank
If you are using a CDN, you might want to look at those options, too. I am not sure how they will impact your actual speed and Google Page Speed, GTmetrix, etc. results. Here are the settings that I use, which I believe are pretty much the default values for CDN Settings:
CDN Options
- Enable CDN Processing: Checked
- Enable CDN for merged CSS files: Checked
- Enable CDN for merged JS files: Checked
CDN Integration
a[data-interchange*=/wp-content/]
div[data-background-image], section[data-background-image]
form[data-product_variations]
image[height]
img[src*=/wp-content/], img[data-src*=/wp-content/], img[data-srcset*=/wp-content/]
link[rel=icon], link[rel=apple-touch-icon]
meta[name=msapplication-TileImage]
picture source[srcset*=/wp-content/]
rs-slide[data-thumb]
video source[type*=video]
(If you don’t use a CDN, no need to populate any of the CDN related settings.)
I found that sometimes, even if there were some layout issues after combining the files, when using the CDN the issues were resolved.
Also, make sure to test your website with and without being logged in as different CSS/JS will be loaded and you need to make sure your website is working fine in all scenarios.