Improve Page Load Times with CSS Optimization

Before Content

Improve Page Load Times with CSS Optimization

Here at SiteWired we've previously discussed the importance of speedy loading times when developing a new website for our customers. Every web designer's goal is to deliver an engaging layout with the perfect user interface (UI). However, connection speeds and processor power vary greatly between a home user and someone on their new mobile phone wandering around Denver or elsewhere.

Today we're going to take a closer look at the nuts and bolts of coding to find a simple way for getting rid of excess lines and improving load times.

The Basics of CSS

CSS is short for Cascading Style Sheets. It's an essential language used on practically every website imaginable. When you open up your favorite word processor, you'll see a myriad of formatting options. You can alter the style, size, and layout of anything you want in your document.

Back in the day, it was necessary to code backgrounds, colors, borders, and alignments in HTML. Unfortunately, websites with many pages would need to revise the HTML code on every page if a site-wide style change was in order. Talk about a painstaking task!

A main file, or style sheet, now handles all of this. There are quite a few other creative uses of CSS, but it's best to view it as a language for aesthetics and UI control.

Web Page Loading

When you point your browser at a page, your device of choice will go through a bit of communication and begin loading the page. Every page is really just lines upon lines of code. Your browser and device must load the lines of code to display the web page.

First of all, coders are rarely perfect despite extensive experience. Sometimes deadlines are looming, or the coder is attempting to utilize a fairly new technique. Thus, the code can tend to have extra or unnecessary lines for achieving the goal.

On top of this, CSS has to load before everything else. For the page viewer, this means staring at a blank page until it has finished loading. The problem is further compounded by slower processor speeds on mobile devices.

CSS Optimization Made Simple

There is always someone out there with more knowledge about a topic and more time to put that knowledge to use. Luckily, a large portion of these people believe in providing an open-source, free (donations welcome) tool to share this knowledge.

Enter CSS Shrink. This nifty optimizer looks at your current CSS code and uses every trick imaginable to trim it down and consolidate it. You'll see the size of the code before and after optimization, but, best of all, you'll get a visual look at how the code has been changed.

CSS Shrink is a fantastic way to provide your users with quicker load times, often greatly reduced for mobile users. And who knows? You might even learn a trick or two along the way!