Page load time is a big part of the user experience.
Site speed can make or break conversion rates and impact your site’s revenue, so keep your page load time low by writing code semantically, use best practices and routinely cleaning up your CSS, HTML and images.
The root issue of heavy page load is typically poor planning at the beginning of a project or poor planning for routine site updates. For example: if a developer didn’t realize a block of content would be reused on another page, additional classes and ID’s may be added to “make it work” in the additional design. If a designer hasn’t created a master style guide for a site, tons of different hexadecimal color codes or RGB values may be used for the same purpose throughout the main CSS stylesheet. If pages involving unique designs are removed, their originally well-coded CSS may be left behind for all visitors to continue to download.
Page load time will increase as a site ages or as more hands are involved. Page size creep is a natural part of site growth, so we need to make this routine cleaning a natural part of the workflow to ensure a positive user experience.
Let’s get started!
Effects of clean code
- not saving images effectively for web: +28% page load time
- using @import to call one half of a stylesheet into the other half: +7.6%
- using inefficient CSS selectors: +5.5%
- adding 10kb of extra HTML: +4.8%
I ran the tests using a very small page (the baseline average load time was 0.55s) and tested in different browsers. You can see more of these tests and how they were performed on writegoodcode.com.
Clean code means a faster site and happy visitors. Clean code is easy to edit by others involved in the project and easily reused in new work, saving you time. Designers and developers who keep their code clean will be able to finish a project more quickly and have it perform successfully across browsers.
Take the time to plan out and clean your code so it’ll remain semantic, reusable and fast.
Unused styles will quickly bloat your stylesheets. Tools like Dust Me Selectors will help you find them (I use these to initially make a guess at what can be removed and test from there). Unused styles can crop up from deleted elements or pages, renamed content areas, etc. There is no reason to keep unused styles, but if you think you need to save them for a rainy day, do so on your operating system or in your version control repository and not on your live site where visitors are forced to download them on each page they visit.
Look for opportunities to combine or condense styles. You’re not alone in seeing duplicate styles for unique elements; it’s a natural part of a good design to have consistent styling throughout your site. Just ensure that you’re only attributing one set of declarations to all the elements that should share styles.
If you use tools like Firebug to find and test CSS changes, consider reorganizing your CSS to keep like styles together, rather than organizing your stylesheet by area of the site. You’ll find more styles can be condensed when you have similarly-styled elements near each other; for example, instead of creating a section in your CSS file to store a new set of background-image icons, put these styles near other sprite styles and see what can be combined with your existing code.
If you find lots of different colors in your CSS, consider building a style guide to determine which colors should be used for what purpose and define a limited list of hexadecimal codes or RGB values to be used across your site. This includes shades of gray. Afterward, update your stylesheet to reflect your new style guide rules, combining same-color declarations to eliminate duplicate styles. When we did this for DynDNS.com, we decreased our CSS file size by 6%.
Inefficient selectors can be quickly found using Page Speed, but I find that Page Speed doesn’t catch everything. You may find many more cases where there’s unnecessary weight being added. As you build CSS from scratch, only add extra selectors as necessary. Always start with the smallest selector possible and add specificity from there. It’ll keep your CSS small and infinitely more manageable as you need to override styles.
In the tests, adding IE-specific stylesheets added an average 8% increase in page load time, inefficient rules added 5.5% and embedding 24 lines of CSS on the page added 4.2%. Cleaning these things from DynDNS.com’s stylesheets saved 11% file size in the main stylesheet.
As you go through your CSS, start to think about your HTML. Are you seeing class and ID names that aren’t semantic? Are you seeing lots of IE hacks or !important tags that could be eliminated through better coding? Are you seeing reuse of elements that could be rewritten to be more efficient? A bloated CSS file can indicate that your HTML needs to be reworked.
Divitis will add bloat to both your HTML and your CSS. Removing unnecessary elements will create a simpler hierarchy, and it’ll be easier to see how you can write your CSS. Often, sites that have unnecessary elements like extraneous
div tags will also have lots of inefficient selectors in the stylesheet. The developer may have become overwhelmed with the amount of parent elements and didn’t realize adding their weight in the stylesheet was unnecessary.
Similarly, developers that are wrestling with weight in stylesheets may add unsemantic and unnecessary parent elements in their HTML so that they can override styles using additional selectors. Avoid this altogether by keeping your HTML clean and only using semantic names for your classes and IDs.
When cleaning HTML, look for:
- embedded or inline styles
- unnecessary selectors
- elements which have no need for special styling (unnecessary classes or IDs)
- old, commented-out code
If a site has been worked on by numerous developers, there may be markup that you don’t understand or don’t see a use for. Don’t be shy about eliminating it, especially if you use a form of version control. Again, don’t keep commented code “just in case” — it’ll often be better to build it from scratch using newer techniques as your skill set grows. If you see outdated code, tabled content that should live outside a table or code that’s been repurposed in a square peg/round hole situation, rewrite it. Often, clean HTML and CSS will go hand-in-hand and making one more efficient will have the same impact on the other.
Lastly, out-of-the-box grid frameworks can be terrific for initial comps and design. However, extraneous grid-based markup that’s not semantic can hurt the page load time of your site. Stick to your grid, but keep only the elements and classes/IDs that are semantic and necessary for your content structure – it’ll keep both your HTML and CSS clean. In the tests, adding 10KB extra HTML to a page (which could represent divitis, unnecessary/commented-out HTML, extraneous grid-based markup, etc.) increased page load time by 4.8%.
Keeping your images clean comes down to three things: optimizing their size and format, using sprites and planning.
In the tests, exporting JPGs using Photoshop’s Save for Web dialogue at 75% instead of 50% increased page load time by 15%. Using JPGs at 50% instead of PNGs increased page load time by 10%. It all comes down to knowing what to use different file types for and what level of optimization you can squeeze out of each image. I also like to use ImageOptim for final compression, especially on PNGs.
It’s often obvious when you should use a sprite; there may be multiple images of the same size and purpose or there may be lots of little icons used across the site. Look for opportunities to create a single sprite for all repeating
1px background images on each site. Consider opportunities to reuse your code and images as better coding leads to easy recycling of work, saving you time as you build new things.
Image efficiency comes down to planning. If you know what you’re going to be using images for and the different places they’ll be used across your site, you can plan for things like transparency, size, repeating backgrounds and the ability to combine images in sprites. As a site grows, or if there are multiple designers creating images, your images folder may grow inefficiently. Do a routine check to see what images can be reused, combined or re-exported in a different format.
Clean site planning
Whether you work as a team or as an individual, you should have a workflow to follow as you build out a site and a method of revisiting a site to clean it up at regular intervals. Coding with the big picture in mind will alleviate a lot of the pain points associated with page load time.
For your site, consider:
- how content relates to the design
- how users will navigate through your site
- how you measure the success of each page
It’s important to track page load time as your site ages. Check the following at regular intervals:
- homepage load time (you can use tools like WebPageTest or Yottaa)
- any e-commerce or checkout process load time
- major conversion rates (or other measures of success) on heavy pages
If you find large, unexpected spikes in page load time or major changes to conversion rates, check to see what you can optimize and clean on the page. An image may have been re-uploaded without compression, a new set of unrelated styles may have been added to the stylesheet, etc. Page load time is an excellent indicator of the health of your site, so stay on top of keeping your pages clean.