You can also log in to Magento admin to do the setup
- Navigate to Stores > Configuration > Advanced > Developer > CSS Settings
- Set Minify CSS Files option to Yes
- Go to Stores > Configuration > Advanced > Developer
- Set Minify Javascript Files option to Yes
As you notice, we only recommended minifying the JS and CSS and not bundling or merging the JS and CSS, as merging or bundling will increase the single file size, which causes the load time for asset and page speed score to decrease.
To improve the load speed of JS and CSS, you can use CDN services like AWS CloudFront, Cloudflare, etc.
Images:
Magento uses the PHP library to resize the images as needed on the catalogue and other pages, but still, the load time of images is crucial in frontend optimization.
To improve the load speed of images, you can use CDN services like AWS CloudFront, Cloudflare, etc.
If your theme does not provide a lazy loading HTML5 attribute for images below the fold, then you can update the theme code and make sure you are lazy loading the images below the first fold.
GZIP Compression:
Hosting Provides, by default, provides the GZIP Compression. You can verify the GZIP compression by following the steps.
- Go to the Browser inspect element and switch to the network tab.
- Visit the page and check the response header content-encoding
If you are missing the GZIP Compression, you can do it per your PHP Server ( NGINX or Apache).
Apache:
<IfModule mod_deflate.c>
############################################
## Enable compression for files served by Apache.
## http://developer.yahoo.com/performance/rules.html#gzip
# Insert filter for all contents
SetOutputFilter DEFLATE
# Apply the filter only to the selected types of content.
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json image/svg+xml
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Ensure that the proxies are delivering correct content.
Header append Vary User-Agent env=!dont-vary
</IfModule>
