CSS Optimization Project

After several years of having the same set CSS of files for all pages at Topix.com, it came a point in which such files had grown into monolithic blocks of code that were slowing down the site, making very difficult to edit.

Breaking down the problem

• Due to the continuously evolving nature of Topix’ content, the CSS and Icon files kept growing consistently over the years, making it difficult to remove legacy elements.

• The number of CSS dependencies across multiple sections of the site,  made most updates error prone and time consuming.

• There was a mix-up of styles for the public facing pages and the internal-admin only features of Topix.

• As shown below, there were hundreds of different font-sizes and colors.

Action Plan

1. Identify which elements are specific to each page type, and which elements are common to the entire site.

2. Remove duplicates an organize similar definition types into SCSS includes such as 

   • _colors.scss

   • _typography.scss

   • _animations.scss, etc

3. Create a new icon set which would include only the handful of icons needed on the public facing pages.

4. Separate the styles needed by public facing pages from the styles needed for admin-only pages.

Results

After going through the above process on the entire site, the results spoke for themselves:

• Number of icons reduced from 255 to 51, lightening the icon file size from 73kb to 16kb (about 78% reduction).

• A 90% reduction in file size and number of declarations, making the code significantly more lean, organized and easier to edit.