RT Cunningham

The Right Way to Use CSS with Today’s Technology

When setting up web pages, every millisecond you can shave off the loading time counts. When you use CSS the right way, it doesn’t add to the loading time.

There’s a magic number when it comes to page size. It’s 14 KB or less. You’ll understand when you read this article and this section of another.

I misunderstood the 14 KB limit until I realized it’s 14 KB after the server compresses it. I tested my longest article and the compressed version is well under 14 KB. Certain non-article pages are over that limit and I don’t really care. The articles are the most important pages.

Regular and AMP CSS

There are three ways to work with styles: An external style sheet, an internal style sheet (within the HTML “style” tags) and inline styles (style=”border:0″, for example). You can use any or all of them with regular web pages. With AMP, you’re only allowed to use internal style sheets. That is, unless the external style sheets are whitelisted by the AMP Project. I use these and they’re whitelisted:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=[your font]">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

I used some inline styles until I started working on my AMP. Today, I replaced the external style sheet for my regular pages with an internal style sheet, minified. Even with that code added to my longest article, it still doesn’t reach 14 KB. You can test any page here.

The Right Way to Use CSS?

For my website, an internal style sheet is the right way. Today, that is. Who knows what things will be like in 10 years? When the technology companies decide to stop milking their cash cows, some things won’t matter anymore.

With web browsing, why aren’t cell phones as fast as desktop computers no matter what HTML, JavaScript and CSS techniques we use? The technology already exists.

I won’t know if changing my CSS will visibly speed things up for my visitors. I know it will be easier for me to update it. The expire headers for my HTML pages is one hour. The external style sheet expires at “max” (which is more than a month if I remember correctly).


August 22, 2017
Web Development

You May Also Like: