Should I inline my external CSS?

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Should I inline my external CSS?

Tonearm

9:15 pm on Mar 8, 2015 (gmt 0)

Most of my CSS is loaded in a 70-line external file but Google references it and says:

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Should I move it inline?

Mentat

9:58 pm on Mar 8, 2015 (gmt 0)

Move only the parts needed to render the basic page structure.

lucy24

10:01 pm on Mar 8, 2015 (gmt 0)

Should I move it inline?

This may count as The Most Lame-Brained Suggestion Ever. From, er, google. Not from you. They've currently got a bee in their bonnet about CSS in the <head>. Ignore them and, with any luck, they'll go away.

If your external CSS is one file, you are already way ahead of the game compared to most sites.

not2easy

10:41 pm on Mar 8, 2015 (gmt 0)

You can reduce the filesize by 15 - 23% or more by compressing the file, but honestly for a 70 line file it won't save enough file size to be worth the extra trouble.

IF some of the css in the external stylesheet is for media resources such as background images, that can set off alarms and it may load the page a few nanoseconds faster using inline css for that. It is true that Google seems to be on a crusade about css and javascript files and getting them to load asynchronously. From what I can tell, they do not spend nearly enough resources on optimizing their own. The errors I see most often when checking show their responsive ads flagging their own guidelines for "tap targets too close together".

SnowLeppard

11:01 pm on Mar 8, 2015 (gmt 0)

I changed my ones from:
<link rel="stylesheet" type="text/css" href="mystyle.css">

to:
<style>
<?php
include "mystyle.css";
?>
</style>

... and the pages load faster despite the lack of caching.

I use Gzip in my htaccess and the page zips down to quite a small size.

Wilburforce

11:42 pm on Mar 8, 2015 (gmt 0)

it may load the page a few nanoseconds faster using inline css

A major advantage in using an external stylesheet is that it can be cached, so that styles that are common to all (or many) pages only need to be loaded once.

If css styles are inline, they have to be loaded separately for every page. You might gain a few extra nanoseconds on the first page load, but you lose them on every subsequent page.

Google's analysis tool is per page (it doesn't consider whether the stylesheet is already in the browser's cache).

The same applies to js files that are common to multiple pages: once they are in the browser's cache, they do not impede the loading of subsequent pages.

Tonearm

1:19 am on Mar 9, 2015 (gmt 0)

Move only the parts needed to render the basic page structure.

Maybe this is the way to go. How can I determine which parts?

Mentat

10:13 am on Mar 9, 2015 (gmt 0)

[developers.google.com...]

It's not really an exact science.

Move inline the CSS used for the fold.

I've used this technique only for my mobile pages...

aristotle

2:34 pm on Mar 9, 2015 (gmt 0)

I see pages everyday on big well-known sites, especially "brands", that are slow to load, with things jumping around as different ads load. How can a 70 line css file be any slower to load than these pages?

lucy24

4:02 pm on Mar 9, 2015 (gmt 0)

How can a 70 line css file be any slower to load than these pages?

It's not the size of the file, it's its mere existence. But caviling at a single external stylesheet is just ridiculous.

:: resisting urge to stop by subdomain.google.com, open a random page and count the <link rel = "stylesheet" lines ::

tangor

6:18 am on Mar 10, 2015 (gmt 0)

lucy24, that's "do as I say, not as I do"...

Wondering how much of this admonition against external css is due to their (g) recent "mobile friendly" posture?

giggle

10:57 am on Mar 10, 2015 (gmt 0)

Tonearm - where did you receive that message from Google?

Cheers

Mick

Mentat

12:09 pm on Mar 10, 2015 (gmt 0)

External CSS issue is very old in PageSpeed insight

[developers.google.com...]

LOL, google has 78/100 on mobile score :D

Tonearm

11:48 am on Mar 11, 2015 (gmt 0)

giggle, I get it from:

developers.google.com/speed/pagespeed/insights

giggle

7:42 am on Mar 12, 2015 (gmt 0)

Thanks Tonearm. Groan. 44/100 - much to do!