<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="padding: 4px; background-color: #c3d9ff;"><h3 style="margin:0px 3px;font-family:sans-serif">Sent to you by Bawebl via Google Reader:</h3></div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="font-family:sans-serif;overflow:auto;width:100%;margin: 0px 10px"><h2 style="margin: 0.25em 0 0 0"><div class=""><a href="http://feedproxy.google.com/~r/Bludice/~3/XrztlS9x9n0/speeding-website">Speeding Up My Website</a></div></h2>
<div style="margin-bottom: 0.5em">via <a href="http://davidwalsh.name/" class="f">David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else</a> by David Walsh on 9/21/09</div><br style="display:none">
<p>One of the biggest goals with my website redesign was to update something no one sees — website speed. Sure I’m using different colors, fonts, javascript techniques, and images but I’m most proud of the the speed increases I made. Let me explain the ways I’ve improved my website performance — maybe you can learn something from what I implemented.</p>
<h2>Image Optimization – PNG Crush</h2>
<p>Unlike varying content pages, Images are a fixed download size so I sought out to optimize image sizes. I used <a href="http://davidwalsh.name/pngcrush">PNGCrush to compress images without loss of image quality</a>. Using PNGCrush I was able to knock off 120KB of useless image space.</p>
<h2>Plugin Removal</h2>
<p>I wasn’t happy about doing it but I removed the WP-Polls plugin. Removing this plugin allowed me to avoid loading both jQuery and MooTools on every page. Removing WP-Polls also allowed me to avoid a few server requests (to CSS and JS files). I saved approximately 75KB by doing this alone.</p>
<h2>Javascript Compression and Consolidation</h2>
<p>I’ve placed all of my javascript into one file. MooTools More classes and custom plugins were all compressed and jammed into one file. This allows for less requests to the server. About 40KB was saved using compression.</p>
<h2>Google AJAX API</h2>
<p>Instead of bogging my virtual server down by serving up the same MooTools Core javascript file, I’ve started letting Google carry that burden using their <a href="http://code.google.com/apis/ajaxlibs/documentation/index.html#mootools">AJAX Libraries API library</a>. What’s great about using their API is that if you’ve been to other websites that use Google’s AJAX API, the file is already cached and my site loads faster.</p>
<h2>.htaccess ETags and Compression
</h2>
<p>I took full advantage of Eric Wendelin’s guest post, <a href="http://davidwalsh.name/yslow-htaccess">Improve Your YSlow Grade Using .htaccess</a>, and used .htaccess to add Expires headers and file compression strategies to decrease load time and implement file caching.</p>
<h2>PHP Caching</h2>
<p>You’ll notice that my new design displays my RSS subscriber count, Twitter follower count, and latest tweet. I’ve added caching strategies to my website to make the RSS subscriber count and Twitter follower count check once per day and my latest tweet check once per hour. Implementing these caching strategies saves me remote requests on every page load.</p>
<h2>Database Query Caching</h2>
<p>I’ve implemented <a href="http://wordpress.org/extend/plugins/db-cache/">WordPress’ DB Cache</a> plugin which caches query results and is proven more effective than WP-Cache and WP-SuperCache. I was having a lot of problems with WP-Cache so this plugin was a godsend for me — the site feel faster and I don’t run into problems with other caching methods.</p>
<h2>Room for Improvement</h2>
<p>My website is not yet perfect — there are a few things I can improved:</p>
<ul>
<li>CSS Sprites — Since I’ve just launched the redesign, I didn’t want to go into spriting yet in case I need to overhaul things. Sprites will save me quite a few server requests.</li>
<li>Media Temple Issues — Unfortunately I get a “Cannot Establish Connection” every once in a while so I need to check out what’s causing that. I never got those warnings on Dreamhost hosting.</li>
<li>BuySellAds — I need to twists BSA’s arm into Gzipping their resources to speed up downloading of those files. BSA implementing GZipping would help out thousands of websites.</li>
</ul>
<p>Have any other ideas for optimization? Let me know!</p><p>Don't forget to <a href="http://twitter.com/davidwalshblog">follow me on Twitter</a> and be sure to visit <a href="http://scriptandstyle.com">Script & Style</a> for the best Javascript and CSS articles around!
Blog traffic is booming. <a href="http://buysellads.com/buy/detail/1687">Sponsor the David Walsh Blog</a> and get your brand in front of several thousand users per day!<br><br><a href="http://davidwalsh.name/speeding-website">Speeding Up My Website</a></p>
<p>Related posts:<ol><li><a href="http://davidwalsh.name/pngcrush" rel="bookmark" title="Permanent Link: Reduce PNG Graphic Size Using PNGCRUSH">Reduce PNG Graphic Size Using PNGCRUSH</a></li><li><a href="http://davidwalsh.name/php-mysql-database-optimization-function" rel="bookmark" title="Permanent Link: PHP / MySQL Database Optimization Function">PHP / MySQL Database Optimization Function</a></li><li><a href="http://davidwalsh.name/script-style-feed" rel="bookmark" title="Permanent Link: Add the Script & Style Feed to Your Website">Add the Script & Style Feed to Your Website</a></li><li><a href="http://davidwalsh.name/judging-candidates-based-website" rel="bookmark" title="Permanent Link: Judging the Candidates Based Upon What Else? Their Website!">Judging the Candidates Based Upon What Else? Their Website!</a></li><li><a href="http://davidwalsh.name/optimizing-structure-print-css" rel="bookmark" title="Permanent Link: Optimizing Your Website Structure For Print Using CSS">Optimizing Your Website Structure For Print Using CSS</a></li></ol></p><img src="http://feeds.feedburner.com/~r/Bludice/~4/XrztlS9x9n0" height="1" width="1"></div>
<br>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="padding: 4px; background-color: #c3d9ff;"><h3 style="margin:0px 3px;font-family:sans-serif">Things you can do from here:</h3>
<ul style="font-family:sans-serif"><li><a href="http://www.google.com/reader/view/feed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2FBludice?source=email">Subscribe to David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else</a> using <b>Google Reader</b></li>
<li><a href="http://www.google.com/reader/?source=email">Get started using Google Reader</a> to easily keep up with <b>all your favorite sites</b></li></ul></div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>