How to compress JavaScript and css with gzip in typo3 || How to minify JavaScript and css in typo3 || How to speed up typo3 || scriptmerger extension


 
One of the easiest ways to improve the performance of a website is to compress the JavaScript and CSS files.

For compress your css and js file with gzip. you have to use scriptmerger extension for minify your js and css file.

For that you have to first install “scriptmerger” extensions from extension manager.

then after you have to include “scriptmerger” in your static template file [Template -> (Edit the whole template record) -> Include Static]

Following script should do the trick and paste below script in your .htaccess file.

### BEGIN EXT:scriptmerger ###

# Removal of ETag (saves some bytes; the last modified header is still there)
FileETag MTime Size
<IfModule mod_headers.c>
	FileETag none
</IfModule>

# Client caching of JS/CSS files (because they are merged with an applied hash!)
# Note: Unsetting of the last modified header causes a permant 200 Ok status
<FilesMatch "\.(merge|min|gz)(\.gz)?\.(js|css)">
	<IfModule mod_expires.c>
		ExpiresActive on
		ExpiresDefault "access plus 1 year"
	</IfModule>

	<IfModule mod_headers.c>
		Header append Cache-Control "public"
	</IfModule>
</FilesMatch>

# deliver the uncompressed file if gzip encoding isn't accepted
AddEncoding x-gzip .gz
RewriteCond %{HTTP:accept-encoding} !gzip [NC]
RewriteRule ^typo3temp/scriptmerger/compressed/(.+)\.gz\.(js|css) typo3temp/scriptmerger/uncompressed/$1.$2 [L,NC]

### END EXT:scriptmerger ###

If you want to compress your css file then you have to set below typoscript in your set file [template]

plugin.tx_scriptmerger {
  css.enable = 1
  css.minify.enable = 1
  css.compress.enable = 1
}

Note : css.enable = 0
It means it will not compress

Compress your JS file then you have to set below typoscript in your set file [template]

plugin.tx_scriptmerger {
  javascript.enable = 1
  javascript.minify.enable = 1
  javascript.compress.enable = 1
}

Note :
1 is stand for enable to compress your file.
0 is stand for disable to compress your file.

By default all setting are enable. you can modify your setting as per your requirement.

When compressing these files, you will get the fastest possible response from your website.

I hope it will work for you 🙂

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Advertisements