Speeding Up Websites
Recently I've found myself trying to find ways to speed up a website I run beyond server level optimizations. What I've found is that there are a multitude of ways for anybody (or any webmaster in particular) to improve the speed at which is content is delivered on the web. To boil it down, there are essentially three bottlenecks in anything that resides on the web:
- Network (content delivery)
- Client side
- Server side
So to help you make sense of it all, here are some helpful resources, tips, and tricks that I’ve discovered along the way. Since I’ll be covering this topic in some depth, I will break the topics up into multiple posts to make it easier to digest.
Delivery of content
The first topics I’d like to cover, is the speed at which your content is delivered (network bottleneck). This optimization technique probably requires the least amount of effort on the part of the webmaster, yet it yields the least amount of benefit unless the content is intended for a global audience. To summarize this section, here are the following topics I’ll be covering:
- Content Distribution Networks
- Content Optimization
Content Distribution Networks (CDNs) are a system of computers that cache content for you around the globe. In short, there is no way you can improve the speed that it takes a network cable to bring your content faster to your customers other than placing your content closer to your customers. A round trip connection between the north pole and south pole is relatively stay the same if unlimited amount of bandwidth was available between the two points. In network terms, this is also referred to as Latency.
If you are a big organization, you can possibly afford to setup multiple data centers around the globe to ensure that your content is close to your customers. This approach however is much less feasible to smaller businesses like the SMB market, this is also one of the best reasons to use a CDN, to level the playing field for small-to-medium businesses while also providing your content globally fast!
Content optimization will also help improve the speed of your site. When I say content optimization, I am referring to data on the wire that is transfered between the content provider and the customer. Content optimization includes the following tactics (ordered from easiest to hardest to implement):
- Compression to reduce the amount of data needed to be transfered. This can be done through minifying CSS, JavaScript, and HTML
- Lossless compression images
- Reducing network requests. This includes reducing DNS lookups, HTTP requests, and image requests
- Combining images and utilizing CSS sprites
All of these tactics are quite easy to do, but simply take way too much time to do if not automated or thought of beforehand. The benefit of each tactic also isn’t realized without performing the rest of the operations. A difference of 10Kb or 5 HTTP requests may not be significant to one user, but when multiplied exponentially it can make a notable difference for all parties involved.
Here are some tools to help you get started with all the suggestions noted above:
- CDN: AWS's CloudFront
- Minify: JS/CSS Minify
- CSS Sprites: CSS Sprite Generator
- Misc: WebPageTest.org