Speed of a site, it’s not just about how fast a server is, but how fast the front-end is too. It’s a multi-way street, that is for sure. Everybody knows this. EnvyGeeks takes high-impact and makes it low-impact for it’s audience, high-availability is always a thing of concern, whether it be speed or other. As part of a 3 Part tutorial from server to site to celebrate my one month happiness with VPS.Net, we will start with our sites. How can we improve their speed and make them faster.

1.) Use JavaScript to reduce the amount being loaded based on situation. Recently we moved to using JavaScript to detect if we have source code in our posts, and if we do, than load the JavaScript for that, if not then don’t load it at all reducing the amount having the be loaded and overall response time. An example:

2.) Use PNG instead of JPG and GIF where you don’t need PNG. JPEG is much larger than GIF and PNG and PNG is much smaller and better for transparency than GIF so use this to chose which to do based on situation. I usually only display screenshots and real life photographs with JPEG the rest is GIF and PNG for me.

3.) Validate your HTML as XHTML and your XHTML too. Validation is a necessary step, ever played with your server or talk to an Engineer and hear them say to enable optimisation in APC, eAccelerator or XCache? This is the same situation, unvalidated error-ed out XHTML and HTML can lead to a slow loading page.

4.) GZIP everything, Images, HTML, XHTML, Text, CSS and JavaScript, even Microsoft hates IE6 so go ahead and GZIP it all. If you are really worried you can build rules into your .htaccess to account for that.

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
Header append Vary User-Agent env=!dont-vary

5.) Reduce the amount you load from other sites. This is a big factor, EnvyGeeks does nothing but big images from other sites, this is because Flickr loads slow, so we cache everything from flickr, including our API calls. This reduced our overall load time on the front-end by 1 second and our overall load time in the back-end by 1 second as well. Go visit a site that uses a raw pull from Flickr without a cache, using Curl (since most hosts disable URL-FOpen) and tell me that stuff isn’t slow sometimes.

6.) Use JavaScript to create new-window links. This can reduce the amount of overall code in your page if you have a lot of external links. We use it because of usability and validity. XHTML has no attribute “target” on anchors, only crazy beehive chicks use that old-skool stuff anyways.

<script type="text/javascript" src="jquery.min.js"></script>
$("a").click(function(){
 if (/^https?:\/\/(?:www\.)?envygeeks.com.+/.test(this.href)===false) {
   window.open(this); return false;
 }
});

7.) Use Browser-Caching. Set Access times for all your images, as well as E-Tags, this will create better caching, and faster loading sites, by far. This is also why we don’t want to load images from other sites, we don’t know if they do and it could create a slower site if they don’t properly do it. You can enable all this easily using Apache Rules.

FileETag MTime Size
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

8.) Load Tracking scripts like Google Analytics from your own site, not from theirs. We all know Google is fast, but not that fast and it can create longer response times depending on location. We load our GA into our own server and serve it there, that allows a constant stream and faster download because of keep-alive and not having to query yet another server.