CHAPTER 5 Robust, Responsible, Responsive Web Design
components in a layout rather than entire pages, or you risk presenting the
user with a flash of unstyled content.A Little Help from the Server
These conditional requests can add up quickly on a large project: a
JavaScript framework, a few plugin libraries, scripts to add device-specific
enhancements like offline storage or touch support. While they’re no
longer running the risk of delaying a page’s core content from loading,
enough asynchronous requests will still have the potential to make a site
feel sluggish, and prevent our enhancements from being available to the
user as quickly as they might expect.
To get around this, we’re using a server-side concatenation pattern
called QuickConcat^14 , built to work with Enhance.js, to bundle up all our
conditional scripts and style sheets into a single request.
QuickConcat is a small PHP file that intercepts and parses requests for
comma-separated sets of scripts or style sheets, and assembles them into a
single file for delivery to the user. For example:<script src="quickconcat.php?files=js/file1.js, js/file2.js,
js/file3.js"></script>Or:<link href="quickconcat.php?files=css/file1.css,css/file2.css,
css/file3.css" rel="stylesheet">With a bit of clean-up via an .htaccess file (or the equivalent for your server
environment):<script src="js/file1.js, js/file2.js, js/file3.js"></script>
<link href="css/file1.css, css/file2.css, css/file3.css" rel="stylesheet">14 https://github.com/filamentgroup/quickconcat