Straylight Run

I had an existing site I created using Blueprint CSS a while ago. I wanted to make it mobile-friendly. There are responsive CSS grid frameworks out there now, but I didn’t feel like replacing Blueprint, and I figured all I had to do was, using media queries, make every column span a fixed width. That was mostly correct. In the end, I used 100% widths, plus a few other alterations.  Here is how I ended up doing it.

Normally, you will link to your Blueprint screen.css file like so:

The following lines tell the browser to link first to a mobile-friendly CSS file. Then, if and when the width is 600px, link to the normal, desktop CSS file. The idea is that bandwidth is scarcer on mobile, so we don’t mind downloading two files on a desktop machine if we have to.

To create my mobile.css, I copied screen.css, and made the following changes.

1. Change table elements padding to 2px 

   th, td, caption {padding: 2px;}

2. Resize all image widths to fit on screen 

   a img {border:none;max-width:90%}

3. Change input text fields to 67% width. 

   input.text, input.title {width: 67%; padding: 5px;}

4. Change textarea inputs to 80% width, and reduce height to 150px. 

   textarea {width: 80%; height: 150px; padding: 5px;}

5. Change the overall container to 90% width. 

   .container {width: 90%; margin: 0 auto;}

6. Change all span grid classes to 100% width. 

   .span-1 {width: 100%;}
   ...
   .span-24 {width: 100%; margin-right: 0;}

7. For some reason, I ended up deleting all input.span and textarea.span classes, though I’m not sure why now.
8. Change all append grid classes to 0px right padding. 

   .append-1 {padding-right: 0;}
   ...
   .append-24 {padding-right: 0;}

9. Change all prepend grid classes to 0px left padding. 

   .prepend-1 {padding-left: 0;}
   ...
   .prepend-24 {padding-left: 0;}

10. Change all pull grid classes to 0px left margin. 

    .pull-1 {margin-left: 0;}
    ...
    .pull-24 {margin-left: 0;}

11. Change all push grid classes to 0px margin. 

    .push-1 {margin: 0;}
    ...
    .push-24 {margin: 0;}

Not pretty, but it seems to work well.  Happy CSS!

Well, it only took me 18 months, but I finally got around to cleaning up and publishing the Phing filters we use to automatically transform a static site into one that implements many of Yahoo’s Exceptional Performance Rules.  These filters, together with the Apache configurations in the README, implement the process outlined in this talk from php|works 2008:

To see it in action, first create an VirtualHost pointing to the mysite directory in the project as the web root.  Then run:

% phing optimize

which creates a parallel site in a build directory.  Point your VirtualHost to the new build directory to see the same site with the performance transformations.

You could run this Phing task in a continuous integration process as part of deployment.  You could run it at production deployment time, but it’s probably a good idea to run it at staging time in case it flubs on some CSS or HTML syntax that it is not expecting.

Note that there are other miscellaneous Phing tasks in that github project.  I threw these in there in case they could be of use to other Phing users.

Editor’s note: This post formed the basis of the Front-End Optimization talk I’ve given in the past.

You’ve programmed websites for years, know the ins & outs of PHP, MySQL, why are Javascript and CSS files such a big deal? You put them in a directory, and link to them from your pages. Done. Right?

Not if you want maximum performance.

According to the Yahoo Exception Performance team:

…Only 10% of the time is spent here for the browser to request the HTML page, and for apache to stitch together the HTML and return the response back to the browser. The other 90% of the time is spent fetching other components in the page including images, scripts and stylesheets.

So static content is very important. The same Yahoo people provide us with a comprehensive list of Best (Front-end) Practices for Speeding Up Your Website.  IMO, some of the rules are more important than others, and some are more easily achieved.  Leaving aside hardware solutions (static server, CDN, etc.) for now, let’s look at six of the rules:

1. Rule 1: Make Fewer HTTP Requests, or combine files. The less downloads the better. Simple file concatenation would do. Our goal is at most one Javascript and one CSS file per page.
2. Rule 3: Add an Expires Header, or every static file must accompany a time-stamp so we can take advantage of the HTTP Expires: header. A time-stamp in the GET parameters might work, but some say that some CDN’s and browser/version/platform combinations will not request a new file if the query string changes. A better solution would be to put the time-stamp in the filename somewhere.
3. Rule 4: Gzip Components. This is easily achieved by enabling mod_deflate in Apache.
4. Rule 9: Reduce DNS Lookups. Okay, the real value in this rule is introducing parallel downloads by using at least two but no more than four host names. This is better explained here.
   
5. Rule 10: Minify JavaScript, or at the least strip out all whitespace and comments. There are more sophisticated compressors out there that replace your actual variables with shorter symbols, but the chances of introducing bugs is higher.
6. Rule 12: Remove Duplicate Scripts, which as they say is more common than you think.

Rule 3 is a matter of configuring Apache. How to achieve the other five?

As I see it, there are three broad ways to achieve them.

1. Handle every request in real-time.  This means using a PHP file to serve the files (e.g. <link rel="stylesheet" type="text/css" href="custom_handler.php?file1.css,file2.css" /> or something like that).  It can also mean using mod_rewrite to direct incoming requests for CSS and Javascript to go to a PHP script. Either way, there is processing on every page load. Caching the end-product helps. Still, there must be a better way.
2. Use a template or view plugin.  If you are using a templating system to dynamically generate your HTML, you can use some sort of plugin or function to read in a list of static files, check their last-modified times, and if changed build a combined, minified, time-stamped output file to serve up.  This is better than method #1 because by the time the page is built, there is a static file that is simply served to the browser.  Still, there must be a better way.
3. The best way is to do it offline.  This means a job that checks static files to see if they’ve been modified.  If so, it processes the files and builds the output file that is directly served to the browser.  This job could be run in cron, or run manually by developers, but the best way is to make it a part of the build server.

Don’t have a build server?  That’s a whole other topic.