<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Gabriel de Kadt &#187; Sprites</title>
	<atom:link href="http://www.lazydada.com/tag/sprites/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lazydada.com</link>
	<description>Personal notes on Mac based web development and design.</description>
	<lastBuildDate>Tue, 30 Aug 2011 10:47:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Keeping your sites optimised</title>
		<link>http://www.lazydada.com/2009-06-11/keeping-your-sites-optimised/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=keeping-your-sites-optimised</link>
		<comments>http://www.lazydada.com/2009-06-11/keeping-your-sites-optimised/#comments</comments>
		<pubDate>Thu, 11 Jun 2009 09:16:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Web design & development]]></category>
		<category><![CDATA[.htaccess]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Optimisation]]></category>
		<category><![CDATA[shadowbox]]></category>
		<category><![CDATA[Sprites]]></category>

		<guid isPermaLink="false">http://www.lazydada.com/?p=382</guid>
		<description><![CDATA[The sites I&#8217;ve been working on had been suffering from flab. A JavaScript library here (jQuery of course), a plug-in there, another, another, another&#8230; then a large plug-in that loads it&#8217;s own plug-ins (Shadowbox v3 &#8211; I&#8217;m talking to you). It took a kick from outside (&#8220;your site x sucks HTTP requests and bandwidth&#8221;) to [...]]]></description>
			<content:encoded><![CDATA[<p>The sites I&#8217;ve been working on had been suffering from flab. A JavaScript library here (<a href="http://jquery.com/">jQuery</a> of course), a plug-in there, another, another, another&#8230; then a large plug-in that loads it&#8217;s own plug-ins (<a href="http://www.shadowbox-js.com/">Shadowbox v3</a> &#8211; I&#8217;m talking to <em>you</em>).</p>
<p>It took a kick from outside (&#8220;your site <em>x</em> sucks HTTP requests and bandwidth&#8221;) to realise things were going downhill.</p>
<p>So &#8211; with the help of the good folk at <a href="http://developer.yahoo.com/yslow/">Yahoo YSlow</a> and the new copy-cat-kid on the block (<a href="http://code.google.com/speed/page-speed/">Google Page Speed</a>) with their plug-ins for a plug-in(<a href="http://www.getfirebug.com/">firebug</a>) for Firefox [oh the irony]&#8230; I&#8217;ve started to get things in line again.</p>
<p>Both YSlow and Page Speed have helpful links and information once called &#8211; and now I can pat myself on the back for having improved my YSlow scores from an &#8216;F&#8217; to a &#8216;B&#8217;. Wetware heh.</p>
<p>Main issues I was able were too fix were too many HTTP requests and a lack of explicit caching direction from the web server. Nextly I&#8217;ll be looking at getting interface elements into a sprites for future jobs. (Must take this <a href="http://spritegen.website-performance.org/">sprite/CSS creation tool</a> for a spin. Looks absolutely fab.)</p>
<h3>Reduce HTTP requests</h3>
<p>While combining CSS files is trivial, combining a bunch of disparate JS files into one is not painless &#8211; I&#8217;ve had to drop a jQuery tooltip plug-in as it wouldn&#8217;t play nice when bundled up with its playground compatriots.</p>
<h3>Server side caching and compression</h3>
<p>is achieved the following htaccess rules:</p>
<pre>##Cacheing static components

FileETag none
Header unset Etag

# Far future 1 YEAR
&lt;FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$"&gt;
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
&lt;/FilesMatch&gt;
&lt;FilesMatch "scripts.inc.php$"&gt;
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
&lt;/FilesMatch&gt;

# Past last modified
&lt;FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$"&gt;
Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT"
&lt;/FilesMatch&gt;
&lt;FilesMatch "scripts.inc.php$"&gt;
Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT"
&lt;/FilesMatch&gt;

#Compress
&lt;IfModule mod_deflate.c&gt;
&lt;FilesMatch "\.(js|css)$"&gt;
SetOutputFilter DEFLATE
&lt;/FilesMatch&gt;
&lt;/IfModule&gt;</pre>
<h3>Shadowbox woes</h3>
<p>I now may be on the lookout for a replacement to Shadowbox. Shadowbow v2 was great &#8211; it came with lots of build options and could be explicitly launched by jQuery on Document Ready. v2 wasn&#8217;t IE8 compatible however &#8211; forcing an upgrade to v3 &#8211; still in beta&#8230; Ho hum. This required an updated version of the <a href="http://www.longtailvideo.com/players/jw-flv-player/">JW FLV</a> media player which I&#8217;m not mad keen on &#8211; and that needs a new licence. While Shadowbox is now very clever and can automatically find it&#8217;s own dependencies &#8211; it has many of these &#8211; each one with an HTTP request. While it is easy to combine the whole bundle into a single file its something I&#8217;d rather not have to do/keep track of &#8211; I&#8217;ve already got a rod for my back with the other jQuery plugins&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lazydada.com/2009-06-11/keeping-your-sites-optimised/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->
