[Ed note: This is the third in a series of posts on web design and performance. You can see the first two posts here and here.]
Optimizing your markup can have a substantial impact on your site’s page load time. Bloated HTML leads to bloated CSS, and vice-versa. For example, during a semantics and reusability template cleanup, I was able to significantly reduce the file size of site-wide HTML, CSS, and stylesheet images.
I achieved this by simply renaming existing elements to have more semantic meaning and then removed unnecessary elements in the HTML (also known as divitis) to focus on reusability. Later in the same cleanup effort, I was able to cut CSS by 39% by removing unused selectors, combining and condensing styles, and normalizing the colors used across the site.
I recommend naming elements semantically and sensibly. Element naming patterns are debated in our industry, but semantic names are my main suggestion for a small- to medium-sized site. A large site like Facebook should use an object oriented naming pattern because of the site’s scale and how many developers are touching the code. However, for your average site, being semantic with your element names can be hugely beneficial for a reusability revamp and elimination of unnecessary elements.
If you use a CSS preprocessor, however, you may want to consider OOCSS. What starts as a small mixin could end up as an incredibly bloated CSS file without you noticing total file size growth after compiling. Reusing the same CSS objects instead of repeating CSS declarations may help reduce your total CSS file size—in the same article linked above, Jonathan Klein recommends aiming for 30KB or less of CSS.
Inefficient selectors tend to be a result of CSS that is added or updated after initial development, typically because a designer or developer is attempting to override old CSS. This often means something else is wrong and the markup could be more efficient. Many people used to think that inefficient selectors were inherently bad for performance, but that’s less of a concern these days with modern browsers. Regardless, it’s still good to clean them up as they can help you maintain your front end architecture.
Approaching development with reusability in mind tends to save future development time as well as existing page load time. As you’re designing and developing, ask yourself, “Can someone else use this pattern?” Assets that get re-used can get cached, which is a huge performance win! Asset caching affects more than just images; you should be caching stylesheets and scripts, too. While you’re cleaning up your caching rules, be sure to check and see if your CSS is at the top and JavaScript is at the bottom, and that both are minified. Lastly, ensure that you’re not using @import, and that you are loading as few stylesheets and scripts as possible by combining files where it’s feasible.
As you dig through the HTML and CSS used to structure your site, ask yourself:
- Did I create a design pattern that can be repurposed?
- Did I use semantic element names and a solid HTML hierarchy?
- Could I save future development time and page load time by cleaning up my markup now?
- Have I implemented smart minification and caching of assets?
Next we will look at approaches to improving the performance of responsive web design implementation, as your page speed is especially crucial for mobile users.