Inline Style vs CSS

[duwitmu]

Is it using inline style vs CSS impacting the page speed? Is it CSS better to improve speed?

[Marshall]

If you are just styling something specific to one page, inline styles are fine. However, if it is a style that affects the entire site (or a lot of pages) a style sheet is better.

Marshall

[duwitmu]

Does inline style impact the page speed? I mean in terms of page speed, is it better using style sheet?

[rainborick]

Strictly speaking, inline styles probably tend to be a tiny bit slower than a rule in a stylesheet because you're adding an additional cascade level. As a practical matter, the difference is likely negligible unless you're using a high percentage of inline styles.

But, as Marshall points out, it's always best practice to put your CSS rules in a stylesheet. Inline styles make site maintenance more complicated if only because you have to check two places to modify the CSS. Even an embedded stylesheet using the <style> tag is better since it would be easier to extract the CSS code in the future and transfer it to an external stylesheet.

[not2easy]

If your css is a very large file and you do not use caching it can slow down page load speed. It is better to split your css into what is essential and what is extra and load only essentials until the page has loaded. Add the rest after the end of the page. But, unless your css file is huge, it does not make a significant difference. The speed advantage to css is mainly gained by caching it so the next page already has it applied.

If you are having page load speed issues the first thing to look at is always images. I have seen huge images (over 3Mb)in some sites and if you can imagine loading that via a phone data plan, you'll know why page speed is important to Google. It is important to do some processing on images for the web. Even little background images can be critical to page speed. Google offers lots of suggestions here: [developers.google.com...]

[Dammy]

thanks a lot for the info. if you're loading too much of .png images, it may also slow down the speed of your site...

[not2easy]

@Dammy, .png format images would not slow down page loading unless they are being badly implemented, do you have a reference for that information?

The png format is specifically recommended to use if you are flattening and indexing your images such as buttons, spacers, background images because they reduce sweetly. As an example, I used a 1 pixel clear gif that is only 807 bytes, but as a png, it is 135 bytes. Not a huge saving in itself, but cumulatively with other image modifications, it does make a difference, usually between 20 - 35% less bandwidth used. At the link above you can find out how to optimize images.

Photographs or images with subtle shading or gradations or high level of fine detail should be formatted as jpg, because in that case a png would be a larger file. Either format should be optimized for use on the web.

[lucy24]

Is it using inline style vs CSS impacting the page speed?

Every byte of content adds to page loading time. If you say the same thing three or more times instead of putting it in the stylesheet, that's almost certainly additional space. (Saying the same thing exactly twice probably comes out about the same, depending on what you're saying.)

External CSS is a different question, because you're then looking at a whole additional request. 1K of information divided among two requests takes more time than the identical amount of information on a single request.

[tangor]

A CSS file loaded ONCE at the beginning will ultimately produce faster times for all other pages using that sheet. How much depends on how much styling you actually have. Most sites, truthfully, it doesn't make that much difference considering today's connection speeds... even the lower end USA (crap) bandwidth numbers.

One has to hit a two-three second (or more) overhead load speed for any styling to make a difference. (This does NOT include any pics, audio, or vids which appear on the page).

Since most browsers open up to eight sockets for downloading, these times are much shorter than they used to be. The test page loading re: difference between a CSS file styled site and one that is in-line styled, there are any number of "how fast is my page" test widgets out there...

Frankly, jquery and js tend to be more bandwidth hogs than anything else... and have to load to make some sites work.

[lucy24]

most browsers open up to eight sockets for downloading

Most CMS seem to be happily oblivious to this detail, as they will routinely throw in between 10 and 20 separate stylesheets-- some of which may not even be used by the originating page-- which have to load up before anything else can happen. Every now and then when I have occasion to snoop into a page's HTML, I count. I think the record to date is 19 stylesheets and 8 script files, but it's possible the number was actually higher and I've blocked it from memory.

Admittedly it would be helpful if g###'s Page Speed Thingy would stop blathering about every single external stylesheet it ever meets anywhere. Yes, even if there's only one. Show me a site with no external stylesheets and I'll show you a one-page site ;)

[numnum]

If your css is a very large file and you do not use caching it can slow down page load speed. It is better to split your css into what is essential and what is extra and load only essentials until the page has loaded. Add the rest after the end of the page.

What do you means by the bolded sentence?
I take it your suggestion it to position <link rel="stylesheet" type="text/css" href="non-essential-style-sheet.css"> after </body> ?

[not2easy]

No, not after </body> - put it after </html> and after that you can put in the favicon link. I do not know whether this works without indenting as you would for javascript but it works fine across all browsers I've tested. (Note: I don't test on IE unless I absolutely have to.)

I got that from "g###'s Page Speed Thingy" that said to put the whole external style sheet after the </html> tag. Yes it works that way except that until it loads, the page is a horrible convoluted mess. So I split the style sheet into "essential" and "extra" sheets and load the tiny "essential.css" in the head and by the time anyone might notice, the "extra.css" has already loaded.

[lucy24]

put the whole external style sheet after the </html> tag

Do you suppose it worries g### the teeniest, tiniest bit that putting a <link> -- or, presumably, any other content whatsoever-- in this location means the file will not validate?