Block 81 Archive Block 81 Archive

This is Block 81's archive of past articles. Once in a while we may add more, but it's rare.

Block 81 is a design studio producing beautifully crafted websites and brands for independent businesses and startups.

Tips for Optimizing Your Website’s Performance



Slow websites suck. No one really likes to sit there and wait for a page to load no matter how cool that progress bar may be. And here's the kicker – a slow site will cost you visitors and, potentially, dollars. So yeah, slow loading websites suck.

Depending on your source, some people say that visitors will only wait three seconds or seven seconds or no seconds for your webpage to load. In all honesty, you shouldn't care what the exact magic number is supposed to be. That doesn't mean the number of seconds doesn't matter – it does. However, there just doesn't seem to be a magic number that fits all sites in all scenarios. That's why metrics and analytics tools should be used — to meaasure your own site's performance.

That all said, there are certain things you can do right now to scrape away at your site's lag in performance.

Use a good web host

Choosing the right web hosting company and the right web hosting package does make a difference in your site's performance.

Not all web hosting companies are created equal and not all really care about performance. Some larger web hosting companies have a pretty bad habit of stuffing a server with as many user accounts as they can, regardless of what package limitations each account has and what resources limitations there are on that one server. This is called overselling. The goal here is to get as much money out of one server by sheer quantity. What ends up happening is that on a shared server (also known as shared hosting), there may be one or two site owners that use up the majority of the server's resources which then causes a slow down for all the other sites. That very scenario happened with a client of ours years ago. Switching web hosts drastically improved their website performance by at least 30%.

That all said, overselling in and of itself isn't a horrible thing. It happens. It's what hosting companies do when server performance (and the performance of the sites on that server) starts to degrade that makes a difference. Not all hosting companies care.

So who do you choose for hosting? With so many options, it's hard to decide and price shouldn't be your only factor. Here are a few of our suggestions 1:

Keep image file sizes down — way down

Images can be a major culprit in poor site performance, particularly if your site is image-heavy. This becomes even more evident when a user is on a mobile data network as those connections tend to be slower at times.

Don't just grab an image from your camera or your phone and upload it to your site. (That should be some sort of cardinal rule or something.) Images straight off your camera or phone or tablet are often way too big for the web. It's not usually a case of the site or server not being able to handle the image though. Generally those images will just take a long time to load over the Internet, even with faster connections. Additionally, without any editing before uploading, you're likely forcing the browser to resize the image (HTML scaling) which can be a drag since it will still load the original size of the image before scaling it. 2

So what you really need to do is size, scale, and crop your images before you upload them. Using virtually any image editor will allow you to do this. Adobe Photoshop is a good tool for this if you already have it and know how to use the Save for Web function. However, there are two caveats here.

Caveat 1: Photoshop just for resizing images is dumb

Buying a copy of Photoshop (or subscribing to Creative Cloud) just for resizing images is complete overkill. Don't do that. Instead consider these alternatives (some are standalone apps, some are online tools):

  • Pixelmator (Mac; $30; our recommendation for Mac users)
  • Gimp (Mac, Windows; Free; our recommendation for Windows users)
  • Picasa (Mac, Windows; Free)
  • PicResize (Online; Free)
  • Web Resizer (Online; Free)

Caveat 2: Photoshop's Save for Web is not great

Even though Photoshop can compress an image's file size using Save for Web, it's not great at it. There are usually additional bytes or kilobytes that can be squeezed out of an image without losing quality.

The apps listed above may do a better job at reducing an image's file size for it to be more "web and mobile friendly". Our favorite app for this is, hands down, ImageOptim. It's what we use for image optimization for most, if not all, our web projects. There are others out there that work well too:

Enable caching

Caching is essentially a way for a web browser to store data for future use. A site's code can "tell" a browser whether or not to cache a page or even its various pieces. Without caching though, your web browser will download / show all of the resources on a given web page every time a user loads and reloads it regardless if it was changed or not. The result of this is a slow loading page.

Enabling caching is something that your web developer should do for you when they build or maintain your site. There are different ways to enable caching, most of which require technical expertise, so it's probably best to leave it to the pros. That said, you'll want to check with your web development team if caching is something they implement.

Pro tip: We like and recommend CloudFlare for page caching.

Keep ads to a minumum

While a lot of ads on your web page (especially if they're animated) will likely turn visitors away simply because the ads are there, they can quickly cause a page to become slow, and in really bad cases, prevent a page from loading completely at all.

Having ads in and of itself isn't the issue though. The key is to keep them to a minimum if you have to have ads at all. It's also a good idea to make sure that your pages load completely before the ads do.

Ditch the social media widgets

Similar to ads, those social media widgets that allow your visitors to share your content can cause page load times to get bad. If you can, get rid of them altogether. If you can't, then try to stick to one service like AddThis or ShareThis to provide the widgets and, like with ads, try to ensure that the content on your page loads completely before your sharing widgets.

Use a CDN (Content Delivery Network)

One of the things that affects your site's speed is your user's location relative to your web server. Basically, the further away the visitor they are, the longer the distance the data being transmitted has to travel.

A CDN helps with this problem by having your content cached across multiple, strategically placed geographical locations. Using a CDN may cause your operating costs to go up a bit but your site will gain a pretty good speed boost. That said, there are free options too. Here are a few options for CDNs:





  1. If there's any host you should avoid like the plague, it's GoD*ddy
  2. Hopefully your web design studio has implemented techniques to do some resizing on the server before inserting the image in the code so this is less of an issue. Even if they have, you still shouldn't be uploading huge images to your site.



« Back