Simple CSS Optimization Hacks

Hi, folks
thought I’d share the current simple hacks I do for the Newsmag 5x CSS file in the theme root; which must be done after each theme update manually.

STEP 1 FONTS:
convert all default and Google fonts to “browser native stack” – this sets the default fonts to the optimium use of browser/OS native fonts.

Search and replace both of these in CSS file:

font-family: sans-serif;

font-family: 'Open Sans', arial, sans-serif;

/ replace with:
font-family: "Segoe UI",Frutiger,"Frutiger Linotype","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Dejavu Sans",Oxygen-Sans,Ubuntu,Cantarell,Arial,arial,sans-serif;

Save copy, rename as style-fontmod.css for backup.

STEP 2 – MINIFY CSS:

Next, copy all the text in the doc and place into a CSS minifier; I use this one from TopTal (free):
https://www.toptal.com/developers/cssminifier

Open your style-fontmod.css file, and copy all text below the

Text Domain:    Newsmag
Tags:black, white, one-column, two-columns, fixed-layout
*/

(( you must keep all the text at top of original doc identifying theme and theme version, or it won’t work!! ))
then paste in the text from the minified version on TopTal.

Resave doc as style-min.css

Rename your ORIGINAL unedited style.css to bak-style.css
make copy of style-min.css and rename style.css

replace in theme folder on your live site, and double check all works.

Not only will you remove any font loading at all (unless you setup custom fonts in theme panel; if you did, just change all theme panel font settings to ‘default’); but, you will go from about 170k to 97k CSS. Notable size savings even before gzip on server.

Hope that helps somebody. This is one of the simplest optimization tricks for the theme.
(1) not loading external fonts of any kind; all browser/app native
(2) cutting the CSS file by 80%

Enjoy! 🙂

• This topic was modified 1 year by simchris.
• This topic was modified 1 year by simchris.