Yesterday, while helping Caloe with the website for her company De Buitenkok, I came across the mother of all stupid bugs in Safari. Me having recently announced payformystay.com, I loaded it up in Apple’s hipster browser only to notice that the CSS wasn’t loaded. Oops!
Reloading didn’t help, but … going over to the development version, everything loaded just fine. Conclusion? My recent optimizations—concatenating + gzipping all javascript and css—somehow fucked up payformystay for Safari users. The 14 Safari visitors (16.28% of our small group of alpha users) I received since the sixth must have gotten a pretty bleak image of the technical abilities of payformystay.com’s Chief Technician (me). 😥
The old cat | gzip
So, what happened?
To reduce the number of HTTP requests per page for all the JavaScript/CSS stuff (especially when none of it is in the browser cache yet), I made a few changes to my build file to scrape the <head> of my layout template (layout.php), which I made to look something like this:
<?php if (DEV_MODE): ?> <link rel="stylesheet" type="text/css" href="/layout/jquery.ui.selectmenu.css" /> <!--MERGE ME--> <link rel="stylesheet" type="text/css" href="/layout/fancybox/jquery.fancybox-1.3.4.css" /> <!--MERGE ME--> <link rel="stylesheet" type="text/css" href="/layout/style.css" /> <!--MERGE ME--> <script src="/layout/jquery-1.4.4.min.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/jquery.base64.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/jquery.ui.selectmenu.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/jquery.cookie.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/jquery.ba-hashchange.min.js" type="text/javascript"></script> <!--MERGE ME--> <script src="/layout/jquery.writeCapture-1.0.5-min.js" type="text/javascript"></script> <!--MERGE ME--> <?php else: # if (!DEV_MODE) ?> <link href="/layout/motherofall.css.gz?2" rel="stylesheet" type="text/css" /> <script src="/layout/3rdparty.js.gz?2" type="text/javascript"></script> <?php endif ?>
It’s very simple: All the files with a “<!--MERGE ME-->” comment on the same line got concatenated and gzipped into motherofall.css.gz and 3rdparty.js.gz respectively, like so:
MERGE_JS_FILES := $(shell grep '<script.*<!--MERGE ME-->' layout/layout.php|sed -e 's/^.*<script src="\/\([^"]*\)".*/\1/') MERGE_CSS_FILES := $(shell grep '<link.*<!--MERGE ME-->' layout/layout.php|sed -e 's/^.*<link .*href="\/\([^"]*\)".*/\1/') all: layout/3rdparty.js.gz layout/motherofall.css.gz layout/3rdparty.js.gz: layout/layout.php $(MERGE_JS_FILES) cat $(MERGE_JS_FILES) | gzip > $@ layout/motherofall.css.gz: layout/layout.php $(MERGE_CSS_FILES) cat $(MERGE_CSS_FILES) | gzip > $@
Of course, I simplified away the rest of my Makefile. You may notice that I could have used yui-compressor or something alike to minify the concatenated files before gzipping them, but yui-compressor chokes on some of the third-party stuff. I am using it for optimizing my own css/js (again, only in production).
Safari ignores the Content-Type for anything ending in .gz
As far as the HTTP spec is concerned, “file” extensions mean absolutely nothing. They’re trivial drivel. Whether an URL ends in .gz, .css, .gif or .png, what it all comes down to is what the Content-Type header tells the browser about the response being sent.
You may have noticed me being lazy in the layout template above when I referenced the merged files:
<link href="/layout/motherofall.css.gz?2" rel="stylesheet" type="text/css" /> <script src="/layout/3rdparty.js.gz?2" type="text/javascript"></script>
I chose to directly reference the gzipped version of the css/js, even though I had a .htaccess files in place (within /layout/) which was perfectly capable of using the right Content-Encoding for each Accept-Encoding.
$ cat /layout/.htaccess
AddEncoding gzip .gz RewriteEngine On RewriteCond %{HTTP:Accept-Encoding} gzip RewriteCond %{REQUEST_FILENAME}.gz -f RewriteRule ^(.*)$ $1.gz [QSA,L] <Files *.css.gz> ForceType text/css </Files> <Files *.js.gz> ForceType application/javascript </Files>
You may notice that the .htaccess file contains some configuration to make sure that the .gz files are not served as something like application/gzip-compressed.
Anyway, I went to see if there were any browsers left that do not yet Accept-Encoding: gzip and could find none. When, yesterday, I was faced with an unstyled version of my homepage, my first reaction was (after the one where I was like hitting reload 20 times, embarrassedly mumbling something about “those damn browser-caches!”): “O then, apparently, Safari must be some exception to the rule that browsers have all been supporting gzip encoding for like forever!”
No, it isn’t so. Apparently Safari ignores the Content-Type header for any resource with an URL ending in .gz. Yes, that’s right. Safari understands Content-Encoding: gzip just fine. No problem. Just don’t call it .gz.
The new cat ; gzip
So, let’s remove the .gz suffix from these files and be done with it. The .htaccess was already capable of instructing all necessary negotiations to be able to properly serve the gzipped version only when it’s accepted (which is always, but I digress).
A few adjustments to my Makefile:
MERGE_JS_FILES := $(shell grep '<script.*<!--MERGE ME-->' layout/layout.php|sed -e 's/^.*<script src="\/\([^"]*\)".*/\1/') MERGE_CSS_FILES := $(shell grep '<link.*<!--MERGE ME-->' layout/layout.php|sed -e 's/^.*<link .*href="\/\([^"]*\)".*/\1/') all: layout/3rdparty.js.gz layout/motherofall.css.gz layout/pfms.min.js.gz layout/3rdparty.js: layout/layout.php $(MERGE_JS_FILES) cat $(MERGE_JS_FILES) > $@ layout/motherofall.css: layout/layout.php $(MERGE_CSS_FILES) cat $(MERGE_CSS_FILES) > $@ %.gz: % gzip -c $^ > $@
And here’s the simple change to my layout.php template:
<link href="/layout/motherofall.css?2" rel="stylesheet" type="text/css" /> <script src="/layout/3rdparty.js?2" type="text/javascript"></script>
That’s it. I welcome back all 14 Safari users looking for paid work abroad! Be it that you’re looking for international work in Africa, in America, in Asia or in Europe, please come visit and have a look at what we have on offer. 😉
Recent Comments