Gzip CSS files

Pat64 · 2014-12-17 07:54:16

Hi folks ;)

I’ve got some gzip CSS files (main-min.css.gz) and I can’t figure how to link that into my page templates :(

All files are created on the fly with a fork of the (great) rvm_css plugin. Could you tell me how to achieve that?

Thanks lot by advance ;)

ruud · 2014-12-17 08:32:46

In most cases it’s easier to let the webserver handle the compression of transmitted files. That way it can be done transparently, without having to mess with .gz extensions and you can compress more than just CSS files.

In Apache this can be done with mod_deflate

philwareham · 2014-12-17 08:35:52

I’d always use mod_deflate instead if you can. If mod_deflate is not available or you don’t want to use it, then try this in your .htaccess file…

#Serve gzip compressed CSS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]

# Serve gzip compressed JS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]

# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1,E=is_gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1,E=is_gzip:1]
Header set Content-Encoding "gzip" env=is_gzip

michaelkpate · 2014-12-17 16:30:45

I just listened to Floss Weekly’s episode about mod_pagespeed. It might be worth checking out if you control your own server (or your host provides it).

philwareham · 2014-12-17 17:10:42

Be careful with mod_pagespeed – it can be fairly resource hungry.

I use it on my server, but only for a handful of tasks. Where I can provide the assets already optimised beforehand then I do. Don’t lazily rely on the server to do work you should be doing yourself.

i.e. do your own image optimisation, CSS/JS minification, concatenation, etc. and don’t force the server to do it. In fact the only thing I use it for is to collapse whitespace in HTML and a bit of cacheing of dynamic content. I also use CloudFlare for cacheing of static assets.

philwareham · 2014-12-17 17:19:09

Here’s a good starting point for setting up mod_deflate (lifted from H5BP’s Apache Server Configs) – ideally this should go in your Apache config files but you could put it in a .htaccess file if you don’t have full access to your host server.

<IfModule mod_deflate.c>

    # Force compression for mangled `Accept-Encoding` request headers
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Compress all output labeled with one of the following media types.
    #
    # (!) For Apache versions below version 2.3.7 you don't need to
    # enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
    # and `</IfModule>` lines as `AddOutputFilterByType` is still in
    # the core directives.
    #
    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Map the following filename extensions to the specified
    # encoding type in order to make Apache serve the file types
    # with the appropriate `Content-Encoding` response header
    # (do note that this will NOT make Apache compress them!).
    #
    # If these files types would be served without an appropriate
    # `Content-Enable` response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress
    # the response, and thus, wouldn't be able to understand the
    # content.
    #
    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>

Pat64 · 2014-12-19 14:15:39

Oh! Sorry for my late: I didn’t come back.
Super thanks, guys ;)

colak · 2015-05-03 07:30:57

Hi all I am using the rules phil posted but pagespeed is somehow asking me to compress the content

The tool on this site confirms that the content is delivered using the compression. Any ideas on why pagespeed and yslow do not recognise it?

>Edit: I am wondering if the rules do not work for html5 as text/javascript is no longer needed when linking to a js file.

Last edited by colak (2015-05-03 08:26:31)

ruud · 2015-05-03 12:04:05

colak wrote #290394:

I am wondering if the rules do not work for html5 as text/javascript is no longer needed when linking to a js file.

No, that’s not it, the Apache rules are based on the mime-type of the delivered file. Apache doesn’t look at what’s in the HTML code.

PS. If you want to support MSIE 6, then compressing all those mime-types may cause problems.

colak · 2015-05-03 14:21:13

hmmm… Thanks Ruud, Further investigation revealed that the code gzips the html but not the css and js files. I am using rvm_css and spf_js create those files which I am sure that they don’t interfere with the htacces rules.

Re ie6… I haven’t thought about it for some time. Do you think that it still has a high user-base?

gaekwad · 2015-05-03 16:31:17

colak wrote #290402:

Re ie6… I haven’t thought about it for some time. Do you think that it still has a high user-base?

Globally, no. IE represents a sub-10% demographic overall – www.w3schools.com/browsers/browsers_stats.asp

You’re more likely to find institutions with certain versions of IE baked-in and set by policy. Windows XP can run IE8, I think.

philwareham · 2015-05-04 09:04:24

IE6 is well obsolete now – you can safely ignore that. I don’t even develop for IE8 any more (Google dropped IE8 support about a year ago).

Textpattern CMS

Textpattern CMS support forum

#1 2014-12-17 07:54:16

Gzip CSS files

#2 2014-12-17 08:32:46

Re: Gzip CSS files

#3 2014-12-17 08:35:52

Re: Gzip CSS files

#4 2014-12-17 16:30:45

Re: Gzip CSS files

#5 2014-12-17 17:10:42

Re: Gzip CSS files

#6 2014-12-17 17:19:09

Re: Gzip CSS files

#7 2014-12-19 14:15:39

Re: Gzip CSS files

#8 2015-05-03 07:30:57

Re: Gzip CSS files

#9 2015-05-03 12:04:05

Re: Gzip CSS files

colak wrote #290394:

#10 2015-05-03 14:21:13

Re: Gzip CSS files

#11 2015-05-03 16:31:17

Re: Gzip CSS files

colak wrote #290402:

#12 2015-05-04 09:04:24

Re: Gzip CSS files

Board footer