Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Web Optimization: Embedding CSS is better than linking?
My clients txp website was constantly slow. So I tried using gzip to compress the website + turning of txp logs + using jpcache. Using these techniques din’t make a big difference in the loading time. Look below.
Connection Rate / Download Time
14.4K / 194.83 seconds
28.8K / 97.92 seconds
33.6K / 84.07 seconds
56K / 50.84 seconds
ISDN 128K / 16.26 seconds
T1 1.44Mbps / 2.33 seconds
I got the above results with CSS files linked to the HTML. When I included CSS direclty inside the HTML I got the following results…
Connection Rate / Download Time
14.4K / 20.28 seconds
28.8K / 10.14 seconds
33.6K / 8.69 seconds
56K / 5.21 seconds
ISDN 128K / 1.60 seconds
T1 1.44Mbps / 0.14 seconds
NOW, That’s quite a difference. A 45 second difference on a 56k modem. So folks, Is embedding CSS bad? How bad is it? What are the disadvantages? And WHY such a big difference in loading time?
Last edited by creativesplash (2005-12-21 07:19:30)
“Take a point, stretch it into a line, curl it into a circle, twist it into a sphere, and punch through the sphere.”
— Albert Einstein
Offline
#2 2005-12-21 07:32:03
- zem
- Developer Emeritus
- From: Melbourne, Australia
- Registered: 2004-04-08
- Posts: 2,579
Re: Web Optimization: Embedding CSS is better than linking?
How did you measure that? (And what did you measure, exactly? Repeated or single page hits? From a single IP, or multiple?)
Last edited by zem (2005-12-21 07:38:01)
Alex
Offline
Re: Web Optimization: Embedding CSS is better than linking?
I haven’t heard anything about CSS linked files slowing down page loads. Although I have heard that using the internal TXP CSS editor can slow down page loads compared to using normal CSS files..
Offline
Re: Web Optimization: Embedding CSS is better than linking?
I used the <a href=“http://www.websiteoptimization.com/services/analyze”>web optimizer</a> tool to calculate the loading time of the homepage. It calculates the size of HTML, size of linked css files, size of linked js files etc of a provided url.
It may look phony but believe me, I could actually see it on my screen. The page loaded very fast.
I repeated the search hits several time
Repeated hits.
From a single IP, or multiple?
From multple IP’s and platforms (Linux, Mac and Windows) and browsers.
Last edited by creativesplash (2005-12-21 08:21:24)
“Take a point, stretch it into a line, curl it into a circle, twist it into a sphere, and punch through the sphere.”
— Albert Einstein
Offline
Re: Web Optimization: Embedding CSS is better than linking?
Those tools are very …. “crude” to put it friendly(*). A linked .css file will only be one additional HTTP request, just like one for an image (only that css files are usually much smaller). Putting all the CSS into the html document hardly cuts down on the total transfered bytes, it only moves them around, the only data you save is the overhead of an additional request which is very small.
Additionally (external) .css files will be cached by the browser, whereas included css has to be transfered every time (you won’t have this advantage with the built-in css-editor and dynamic .css-files, because it doesn’t support caching yet).
Your problem has nothing to do connection speeds. In your special case it sounds like either your server or the tool is having plenty of problems, or the connection between the two is having serious problems.
You can rule out problems with your server, by enabling test-mode and looking at the debug-output at the bottom of your page, it will show you page generation times, which usually will be below one second (but it depends on the hardware and server load).
Offline
Re: Web Optimization: Embedding CSS is better than linking?
I’ll second that. If your CSS file is, say 5kb, it’s exactly the same as an 5kb image.
Maybe you should try putting your styles into a separate CSS file, and link to it. See if it’s the TXP generation of the CSS file that cause the delay.
Offline
Re: Web Optimization: Embedding CSS is better than linking?
Sencer, I understand you perfectly well. Technically a linked CSS file should not take time to load. But in my case it has been a bit different. My website loads twice as fast when I embedd CSS directly in the webpage. Atleast, It works for me. (If it works for anyone else, please let me know). This is not a textpattern problem. Whether I use static HTML files or static php files I’m getting the same results. It maybe because the browser loads the CSS first before it starts loading html?
This also calls for a second question: Why is css.php in the textpattern folder? (shouldnt it be in the root directory?)
BTW I enabled testing mode and I get this in my pages
<strike>Without linking CSS</strike> With CSS embedded in page template (using forms)
<code><!— Runtime: 0.9521 —>
<!— Queries: 25 —>
<!— Memory: no info available —>
<!— txp tag trace: secondpass
—></code>
With CSS linked
<code><!— Runtime: 0.2901 —>
<!— Queries: 23 —>
<!— Memory: no info available —>
<!— txp tag trace: secondpass
—></code>
Last edited by creativesplash (2005-12-21 10:12:39)
“Take a point, stretch it into a line, curl it into a circle, twist it into a sphere, and punch through the sphere.”
— Albert Einstein
Offline
Re: Web Optimization: Embedding CSS is better than linking?
You have to repeat this a few times to see if there is a consistent difference, or whether it just regular variance.
Also: the time only shows the amount necessary to generate the page, and given that the only difference is a single very small query to generate the link.
I just saw this:
using jpcache.
Which would explain something: asy_jpcache (if that’s what you are talking about) doesn’t cache css-files (It assumes you’ll be using static .css files if performance is important). So that could explain why a plain (cached) txp-page would be faster (with and without the css), than the additional request to the css-file.
But if you say that using static .css files on the webserver doesn’t make a difference, then you problem seems to be with the inet-connection of the server. (I am assuming you mean a real world difference, not those fantasy numbers by those “test”-tools)
Offline
Re: Web Optimization: Embedding CSS is better than linking?
Maybe you should try putting your styles into a separate CSS file, and link to it.
I just tried doing that. Looks like txp:css slows things down a bit. Am I the only one with such a prob? Can someone test this out?
“Take a point, stretch it into a line, curl it into a circle, twist it into a sphere, and punch through the sphere.”
— Albert Einstein
Offline
#10 2005-12-21 12:52:38
- NXArmada
- Member
- From: Sevierville, TN
- Registered: 2005-09-13
- Posts: 82
Re: Web Optimization: Embedding CSS is better than linking?
Dont use TXP:CSS or Directly embed the css use a seperate .css file.
I dont get any problems with load times when my css is in a seperate .css files i dont use TXP:CSS or Embed it in the html code.
Ryan
Offline
Re: Web Optimization: Embedding CSS is better than linking?
No I haven’t had this problem before.
Offline
Re: Web Optimization: Embedding CSS is better than linking?
Why is css.php in the textpattern folder? It should be in the root directory. What do you guys think?
“Take a point, stretch it into a line, curl it into a circle, twist it into a sphere, and punch through the sphere.”
— Albert Einstein
Offline