Skip to content

Instantly share code, notes, and snippets.

@mariobox

mariobox/fastcss.md

Last active June 2, 2020 22:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mariobox/98fee74fcc476ff53734252df57b60d5 to your computer and use it in GitHub Desktop.
Save mariobox/98fee74fcc476ff53734252df57b60d5 to your computer and use it in GitHub Desktop.
Download ZIP
Optimizing CSS Style Sheet
Raw
fastcss.md

Optimizing CSS Style Sheet

I have a custom CSS sheet for my personal site mariosanchez.org. I decided to make some changes to optimize for speed without altering the look and feel of the site too much. The main idea is to take advantage of browsers' default settings as much as possible, and only add custom styling to parts of the site where we want a distinct look (e.g. navigation, image gallery, icons).

Some of the things I've changed are:

  • Remove custom font: I'm using the standard browser font font-family: "DejaVu Sans", sans-serif; to eliminate the server call to Google Fonts.
  • Remove font size declaration: I'm removing the font-size declaration we will use the default browser font size
  • Remove all Heading styling: I'm removing all style declarations from my headings and letting the browser defaults control them.
  • Remove all ul and li styling: Except making the bullet points square
  • Remove hr styling
  • Create a .centered class to use whenever I need to center text (useful for DRY)

Some of the things I'm keeping are:

  • Code custom styling: since I'm using a syntax highlighter I need to make sure that they don't clash with the browser defaults.
  • Blockquote custom styling: quotes are displayed in a more readable way, with a vertical line covering the hight of the quote, mild indentation and italics.
  • Logo, navigation, and photo gallery custom styling: since they need to have a distinct look.

These changes improved the load time of the home page from an average of 17.84ms to 15.02ms. The page was already fast, but with this optimization it is loading 15% faster.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment