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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

lucy24

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



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)

10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



[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)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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)

10+ Year Member



Tonearm - where did you receive that message from Google?

Cheers

Mick

Mentat

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member



giggle, I get it from:

developers.google.com/speed/pagespeed/insights

giggle

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

10+ Year Member



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