Saving the web 1kb at a time

Animations by Kai
Before Unsplash After
252 Total Score 61
76% Reduction
63 Floats 2
23 Unique Colors 9
29 Font sizes 2
7 Font Families 2
60 Specificity 31
9 Media Queries 3
114 File Size kb 6
Prototype Code

Immunity

The way to beat CSSitis and Divitis is to apply small soldiers of classes that become Classitis.

It’s like taking small doses of poison to build up an immunity

— Jimmy McGill, Better call Saul

This is the complete opposite to how you have been coding for years if not decades. Using less classes, targeting HTML elements, using more properties keeps your code clean. On the outside to users, it may look clean, but on the inside, its not so pretty.

Clearly, for large sites that change many hands with different levels of CSS skills, the file can become a burden.

Or simply designers and developers may not know or lack the time to fix these things, and just do what works, I've done this many times.

You may find yourself creating more classes, the specificity stack is getting bigger, you go on holiday, fixes were required, more code, more potential problems.

Using a framework like Tachyons, apply classes like lego and then you use unCSS to remove css that is not used.

Experiment

The goal is to reduce your score by mainly focusing on the CSS to make a decent comparison. The styling won't be like for like, it's more of achieving a similar look with a leaner, systematic file.

  1. Recreate the main pages without looking too much into the markup if not any.
  2. Not a lot of attention on Javascript and jQuery, but look at CSS solutions if supported in best browsers then have fallbacks. Such as the Masonry
  3. Apply the Tachyons framework and soldier modular class approach.
  4. So less css, more classes on elements = leaner css
  5. Performance, speed is a bonus.

Best browsers - performance hit

  1. Masonry: You may have noticed when resizing the screen, the pictures look squashed or lose the correct aspect ratio since the window is resizing and the jquery is resizing each image
  2. For the latest browsers, use css3 multi columns, then fall back
  3. Used one menu i've just repositioned the elements when the screen is mobile, tablet size

Delight

  1. Once the core stuff is done, focus on interaction, we could look into animations on the actions when you hover on an image.

Subscribe for survival tips