How to optimize your website for speed, and why you still should
December 08, 2014
Why bother?I completely understand a lack of interest when most internet connections in the US are fairly fast these days. I mean, if everything works fine already why bother? Performance and optimization are about more than how quickly we can download content. There are also quite a few SEO and UX benefits to be had by taking the time to look at our code. Not to mention, decreasing file sizes by optimizing our code for better performance has the added bonus of decreasing our bandwidth costs as hosts, and decreases bandwidth usage (think ISP/cellular data caps) on the user level as well.
Minimize HTTP and dependency requestsDependency requests are by far the biggest factor in slowing down most page loading speeds. Each additional request adds bloat and another layer of complexity to the parsing and downloading process. It's often easy to forget that calling images from your stylesheet also count as well, so be sure to limit those and use alternative optimization methods such as sprites or SVG when possible. While we’re on the topic of external dependencies, if your website is large enough to require a few dozen requests at minimum… It may be time to consider using a CDN. Using a CDN to distribute your content won't decrease file sizes and/or load times as much as removing extra HTTP requests all together, but it can likely remove any slow server connections out of the equation at least.
Production vs. development environment code basesThere should be a very stark difference when comparing your development and production level code bases. Taking this step alone can sometimes see the largest decrease in file sizes across the board. It’s typical today to see developers refer to their "production" or "development" environment, especially on large scale projects. But it’s also useful on the smaller end of things as well. The largest difference between the two environments can be seen with image compression and the minifying/compression of code. In the end, we want our production environment to be as lean and fast as possible while our development environment should be the same, only minus the image/code compression optimization. Using the built-in tools like Photoshop's "Save for web" compression can be a good starting point for images. There is a plethora of knowledge to be explored elsewhere as well with conversations on image formats, compression algorithms, quality control, and best practices. For code, the best use of compression usually depends on the language you’re working with. It’s also highly debatable whether compression of code helps or hurts other people trying to understand your code, but that’s a conversation for another time. When it comes to plain HTML and CSS, I use services like Google’s htmlcompressor and the YUI Compressor for CSS.
Keep HTML very simpleIn keeping with our goal to write leaner CSS selectors and keep bloat to a minimum, writing efficient HTML should also be a priority. CSS resets often target all common elements and enforce "resetting" styling on them. So even if you aren’t targeting that extra div, it’s likely still slowing things down by having to have its padding and margin reset at a minimum. Typically, an extra div or two won't really hurt anything though. Only when you start ending up with dozens of them do things get crazy. With the introduction of more elements into the HTML5 spec, we also have much more flexibility in this area as well.
ConclusionWhen optimizing our code, we have to not only think about file sizes but also consider how it will be read; either by browsers or even other humans. Mobile use should also be taken into consideration, with many service providers enforcing very constraining data caps these days. So while it may take extra time to perform all this optimization, it’s certainly a worthwhile endeavor since it not only offers better performance in the browser and on mobile, but also has the chance to promote better development practices and even get your content a higher rank on search engines like Google. Next time you prepare to launch, throw your images into a compression engine… You may be surprised how many megabytes it can shave off! Featured image, modular speed image via Shutterstock.
Dustin Cartwright is a UI/Web Designer & Front-End Developer from Baltimore, Maryland. He spends the majority of his time focusing on user experience research and is passionate about building things for the web.
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…