Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,595
GitHub Twitter

Gzip CSS files

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 ;)


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

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

ruud
Developer Emeritus
From: a galaxy far far away
Registered: 2006-06-04
Posts: 5,068
Website

Re: Gzip CSS files

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

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Gzip CSS files

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

Offline

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

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,379
Website GitHub Mastodon

Re: Gzip CSS files

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).

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Gzip CSS files

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.

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Gzip CSS files

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>

Offline

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

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,595
GitHub Twitter

Re: Gzip CSS files

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


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Gzip CSS files

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)


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

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

ruud
Developer Emeritus
From: a galaxy far far away
Registered: 2006-06-04
Posts: 5,068
Website

Re: Gzip CSS files

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.

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Gzip CSS files

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?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,134
GitHub

Re: Gzip CSS files

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.

Offline

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

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Gzip CSS files

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).

Offline

Board footer

Powered by FluxBB