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

3 thoughts on “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

  1. Pingback: Minify your Javascript during the TFS Build process! | Nerd Blog

  2. Hi Jainish,
    nice article, but I am facing problem with this on nginx, everything works fine except the compression thing, if I set compress.enable = 1 the file changes from .css to .gz.css, but the content is not readable. (Both js and css) shows strange characters. I checked for header , it shows as follows,
    HTTP/1.1 200 OK
    Server: nginx/1.4.6 (Ubuntu)
    Date: Tue, 12 Jul 2016 13:26:46 GMT
    Content-Type: text/css
    Last-Modified: Tue, 12 Jul 2016 13:25:14 GMT
    Connection: keep-alive
    Vary: Accept-Encoding
    Expires: Wed, 12 Jul 2017 13:26:46 GMT
    Cache-Control: max-age=31536000
    Cache-Control: public
    Content-Type: text/css; charset=utf-8
    Content-Encoding: gzip

    Any Idea?

    Reply
    • Hey Rohit,

      Thanks for comment.

      If you are facing issue with this extension then you can also you following script. it will merge all your js and css with concatenate

      config{
      concatenateJs = 1
      concatenateCss = 1

      compressJs = 1
      compressCss = 1
      }

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s