External CSS vs inline style performance difference?

Question

A friend of mine said that using <div style=""></div> instead of compressed css file put as link href at the head section gives some performance boost. Is that true?

As far as I know, they're (roughly) the same, but I can't verify that. — Nightfirecat, Nov 27 '11 at 08:14
It would have to be a significant performance boost to deal with the maintenance nightmares that are inline styles. So far I've seen no eviidence of thatt. — steveax, Nov 27 '11 at 08:58
This might shed some light : http://mathiasbynens.be/notes/inline-vs-separate-file — Sudhir Bastakoti, Nov 27 '11 at 08:15
For older versions of IE the performance boost is VERY significant. I've seen HTML tables behave like glue with CSS styling. — Jonathan, May 22 '14 at 09:39

mauris · Accepted Answer · 2012-12-05T12:03:38.217

120

The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file.

Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time for the CSS engine to find which elements match the CSS selector (e.g. a.hover or #someContainer li).

However, putting styling at element level would mean that you cannot cache the CSS style rules separately. Usually putting styles in CSS files would allow the caching to be done, thus reducing the amount of load from the server each time you load a page.

Putting style rules at the element level will also make you lose track of what elements are styled what way. It might also backfire the performance boost of painting a particular element where you can repaint multiple elements together. Using CSS files separates the CSS from HTML, and thus allows you to make sure that your styles are correct and it's easier to modify later on.

Therefore if you look at the comparison, you would see that using a CSS file has much more benefit than styling at element level.

Not to forget when you have an external CSS stylesheet file, your browser can cache the file which increases your application efficiency!

edited Dec 05 '12 at 12:03

answered Nov 27 '11 at 08:20

mauris

42,982
15
99
131

5

Can you provide any statistics with chrome profiler? CPU & GPU are costly on mobile and tablet, where battery consumption is huge cost. I think there is a trade off. And what is the benefit of Cache? Browser will have to compute style for current element and resolving styles will be more costly if there are many rules. – Akash Kava Feb 17 '13 at 06:21
37

Note that all the disadvantages related to maintenance disappear when there is an engine that inlines the styles before sending to clients – Moshe Shaham Mar 06 '13 at 12:35
7

The disadvantages related to maintenance also disappear when using React + Radium. – Ozymandias Jun 20 '16 at 09:12
1

@AjaxLeung no doubt what you and Shaham had said is is true. This answer was written in 2011, when most modern tools were not available yet. – mauris Jun 20 '16 at 09:16
2

Yes. I was simply adding the comment for those seeing this answer today and beyond. – Ozymandias Jun 20 '16 at 19:20
1

about the caching issue. Don't html files get cached? And if they do, wouldn't the inline CSS inside them get cached with them too? – snow Jan 06 '17 at 05:26
Maybe at that moment this response was accurate. At this time, try Google SpeedPage to confirm otherwise. For PHP scripts, for example, stylesheets are selected, minified and previously included (include()) in the page. So the page scripts, those that the server compiles and delivers to the browser, are never modified directly. You only work with independent stylesheets. In my experience, to achieve a 100/100 rating in PageSpeed you usually have to use inline styles. – Felipe Alameda A Nov 29 '17 at 05:56
Many web applications use webpack style-loader (which produce inline style). Should we stop to use style-loader based on this answer? – Lee Chee Kiam May 29 '20 at 08:42
Also Note, html pages can be cached as well. – Muhammad Umer Feb 27 '21 at 20:18

score 8 · Answer 2 · answered Apr 12 '16 at 15:47

8

The page will load faster if you use inline styles vs style sheets. In some cases must faster.

When you use a style sheet using href it requires another request to the server, then the parsing of the file after response. With inline styles there is none of that, just direct parsing.

If a client has slow internet then that single request could be very slow leaving the page style-less until the style sheet get delivered. Again, if it were inline there would be no delay at all.

The only reason we use style sheets is to be organised. There are times when they are not needed, so inline styles or in-document style sheets suffice.

answered Apr 12 '16 at 15:47

sebjwallace

753
1
8
17

14

This answer completely ignores browser caching. Stylesheets allow for only requesting the styles once and caching them, decreasing the amount of content sent over the wire. – GeekOnCoffee Oct 11 '18 at 16:28
4

This answer also ignores the fact that inline styles make the HTML file larger. Potentially, especially when using repeated inline styling, a number of times larger than CSS file. By the way, browsers can load multiple files in parallel (and cache them like mentioned above). – Jan Van der Haegen Aug 17 '20 at 12:10
2

@GeekOnCoffee but the HTML page will hopefully be cached (304), so caching isn't really ignored. – Vidar Jan 07 '21 at 16:56
2

@JanVanderHaegen The initial load time might be faster if you don't have to include CSS that isn't used on the particular page you are visiting. If you put all of your CSS in external files then the HTML file is smaller, true, but the external CSS file might be larger. Pros and cons. – Vidar Jan 07 '21 at 16:56
@GeekOnCoffee's comment completely ignores browser caching... of JS and HTML files too – Matthias Mar 15 '23 at 22:07

s.ermakovich · Answer 3 · 2013-09-30T12:12:08.883

6

It's not an easy question to answer, because the perfomance in this case depends on many factors (complexity of CSS selectors, document size, etc.). However, if we take an isolated case, then we can see that CSS class is in general faster than inline style:
Inline style vs CSS class

edited Sep 30 '13 at 12:12

answered Sep 30 '13 at 10:46

s.ermakovich

2,641
2
26
24

5

Pretty sure this is testing the speed at which the node class or style attribute is changed rather than the speed at which the style is applied which is what the question is asking – Sam Dec 10 '14 at 15:53
@Sam What do you mean by the "speed at which the style is applied"? Can you provide a test which measures this speed? If you take a look at the test code, you will see that page reflow occurs on each iteration, which means that test covers not only class/attribute modification, but also actual impact on the page. – s.ermakovich Dec 10 '14 at 16:48
It maybe includes the time to add the style but it also adds time. What if the document already had the class test or an inline style without JS needing to add it. I'm getting at the speed for the CSS to be resolved in either case and (I might be wrong) but I don't think this test just does that, I think it does extra work. – Sam Dec 10 '14 at 17:01
@Sam This test ignores possible footprint of loading CSS by browser and processing it. I mentioned in my answer that this is an isolated case. It just measures performance of applying styles using different ways (inline vs external). This is what typical web applications do today - change HTML document from JavaScript without page reload. – s.ermakovich Dec 10 '14 at 21:14
Ah OK, I was referring to non-dynamically added styles – Sam Dec 11 '14 at 09:07
1

@s.ermakovich link is now dead – Aryan Beezadhur Nov 02 '20 at 17:41

score 3 · Answer 4 · edited Jul 19 '16 at 13:43

3

Well it can but the reason for the linked or external style sheet is so it can be cached in the browser especially when your using the same div in multiple pages for the site. This means the browser only has to load the style sheet once instead of having to reload the code every time the browser reloads page. It also makes for cleaner code which makes any changes or debugging easier.

edited Jul 19 '16 at 13:43

Krupesh Kotecha

2,396
3
21
40

answered Nov 27 '11 at 08:16

eciusr

163
2
12

3

It's the essence of caching mechanism. It doesn't need proofs. – stroncium Apr 04 '13 at 13:08
5

It can be "cashed" doesn't mean is "cashed"; and "essences" are not facts. – Ivan Castellanos Mar 13 '14 at 08:12
6

Guys, it's not duke nukem era anymore, we don't cash people. **Cache** on the other hand... – Sebas Jan 29 '15 at 15:46
3

The caching argument doesn't hold for single page applications, which generally load everything once up front and generate pages on the fly. – MindJuice Feb 11 '15 at 20:16

score 2 · Answer 5 · answered Aug 20 '13 at 22:18

THE TRUTH IS 'YES'

There is a huge difference. Especially when you are automating user interface. Try the following code. I use IE10 and notepad to develop. I am learning as I go and make tests this is a shortened version test. (there maybe errors as I reduced the code to show your answer)

Click on the image you reference and read the alert messages. HINT: Save this file the save again as an edit before editing (testing).

Best wishes, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>

__I use IE10 and notepad to develop.__ ? – AlexGrafe Mar 09 '18 at 13:17 — AlexGrafe, Mar 09 '18 at 13:17

score 2 · Answer 6 · answered Feb 23 '20 at 23:11

There is no fixed answer in my opinion.

An inline CSS will load faster if the CSS content size downloads faster than your server would respond to an external CSS file request (considering DNS time, server latency, etc).

For normal size CSS I would inline them in the page, for something over 15-20KB I would probably put it in an external file and make sure it can be cached.

I am sure there are many other considerations I am missing now, but there is no fixed answer for inline vs external.

score 0 · Answer 7 · answered Oct 29 '21 at 20:16

0

Definitely yes, as there's no server requests the css is loaded and rendered together with the html, making it much faster.

But I recommend using internal css instead of inline css, using the <style> inside the <head> tag with your core styles needed to display the homepage and then loads external CSS files

answered Oct 29 '21 at 20:16

Toninho Toddy

23
5

Can you explain this recommendation further? – Nick Saunders Nov 20 '21 at 20:43
yes ... inside head use – Toninho Toddy Dec 17 '21 at 11:45

score -1 · Answer 8 · answered Oct 24 '13 at 12:59

Using external style sheets is definitely a better option because it will help you to remember the style you have applied on the div(s). It reduces the time of loading the page because the lesser the HTML code the faster it will load.

But in some cases you might have to change some property of a particular div then the inline style is the best option. And truly speaking, one or two inline style won't make any change the time of loading the page.

There is another option of internal style sheet but it is used only when you have a single page website like if you are making a template. This is because you have to write CSS in every HTML page

less html doesn't mean less load, It's differently a factor but the first contentful paint needs your CSS to be loaded as well. — Ibrahim Rahhal, Mar 24 '21 at 20:08

score -2 · Answer 9 · answered Oct 12 '18 at 10:05

-2

I prefer using inline CSS over external CSS where there are multiple small CSS files for every other element or image. No point in downloading several CSS files with merely 5-10 lines of code in each. If your element contains properties such as hover, active, checked etc. you're then supposed to use an external CSS file as it will avoid complicating your development process.

answered Oct 12 '18 at 10:05

atuls1396

11
2

That makes maintaining extremely difficult. CSS, JS files should be cached on your user's browser by default. – dave2118 Dec 12 '19 at 15:14

External CSS vs inline style performance difference?

9 Answers9

Linked

Related