21 replies [Last post]
shahid
Offline
newbie
Last seen: 13 years 50 weeks ago
Joined: 2005-09-30
Posts: 1
Points: 0

hi guys

i have got a website totally done in CSS, now problem is when we load site on Slow Dialup connection sometimes the page loads without CSS and on refreshing it loads with CSS.

I guess it is a problem with loading CSS, so is thier a way where i can preload CSS forcefully....

My CSS file size is 10kb.

anybody around with CSS knwledge pls help me

regards

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 4 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

preloading CSS in a webpage

You can't really preload the css - you could but it shouldn't be a problem, even on dialup.

Post all your CSS here between the tags and we'll see if we can shave it down for you D

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

preloading CSS in a webpage

As briski mentioned please refrain from double posting your questions, once is sufficient, it will be seen.

Please read the forum guidelines.

I am deleting the duplicate topic.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

whats the solution to the problem

Hello guys,

Can someone tell me what will be the solution for the thread topic, that is is there is a way to pre-load a css file , because many site, does the problem like not loading css, we have to refresh to load the css.

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

simple, put the stylesheet

simple,

put the stylesheet within the header tag and don't like to it externally.

As a rule, I never touch anything more sophisticated and delicate than myself

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

ok

ok thats perfect, but what if your css file be very big, and you want it to separate the css from html, thus there might be a solution to preload the css before it display in the browser

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

cannot be done. Simply

cannot be done.

Simply because you are doing it already.

When linking to it externally the HTML is processed whilst the css file is being downloaded. When the CSS download is complete, the HTML should automatically get styled afterwards.

When you put it directly within the header, your source will be bigger and your stylesheet will not be cached, causing bigger files to be downloaded every page refresh, but it will load before the HTML so your page won't be shown un-styled.

it's either one or the other.

Another option could be throwing in an intro-page where your stylesheet is being downloaded and cached.

Or maybe you could choose to put the most important styles directly within the header (say the styles you need on your homepage), and link to an external css file as well, which hopefully will be downloaded when the user hits a link.

As a rule, I never touch anything more sophisticated and delicate than myself

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

just check

I found something , just check : http://www.bluerobot.com/web/css/fouc.asp/

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

that looks like an answer to

that looks like an answer to another question Smile

As a rule, I never touch anything more sophisticated and delicate than myself

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

F.O.U.C is a separate issue

F.O.U.C is a separate issue and it's particular to IE , if it was IE that you were having a problem with it would have helped to mention it.

You shouldn't really have a problem with html rendering unstyled, but another option would be too Gzip the CSS.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

compressing and optimizing

Compressing and optimizing, can be done using the server side code only ...what about the static pages?

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

I think he means putting the

I think he means putting the css in a gzip and linking to that file. I don't know if this is possible.

It would completely miss the point if the server had to extract it and send you all the data anyway, which means filesize would stay exactly the same (because you receive extracted, thus non-zipped, data) but server load increases.

So IF it's possible, your stylesheet would be compressed.

As a rule, I never touch anything more sophisticated and delicate than myself

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Apache, at least, can

Apache, at least, can compress the files before serving if the browser indicates it can uncompress on the fly. This is part of the content negotiation.

Check to see whether you have mod_gzip installed. Here is the response header from this page:

Date: Fri, 06 Apr 2007 14:36:10 GMT
Server: Apache/1.3.37 (Unix) PHP/5.1.6 mod_gzip/1.3.26.1a mod_auth_passthrough/1.8 mod_log_bytes/1.2 mod_bwlimited/1.4 mod_ssl/2.8.28 OpenSSL/0.9.7a
X-Powered-By: PHP/5.1.6
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified: Fri, 06 Apr 2007 14:36:10 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 5805

200 OK

There is a price to pay. It adds work to the server and the client in exchange for the reduced bandwidth.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Desdinova wrote:I think he

Desdinova wrote:
I think he means putting the css in a gzip and linking to that file. I don't know if this is possible.

It would completely miss the point if the server had to extract it and send you all the data anyway, which means filesize would stay exactly the same (because you receive extracted, thus non-zipped, data) but server load increases.

So IF it's possible, your stylesheet would be compressed.
Nah didn't mean that and it didn't miss the point :mad: Smile anyways Gary has explained things.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

sarav_dude wrote:Compressing

sarav_dude wrote:
Compressing and optimizing, can be done using the server side code only ...what about the static pages?

What about static pages?

Is there really a problem here? a 10k stylesheet while slightly large is not that large and shouldn't cause a noticeable delay.

Are you sure there aren't other factors at work somewhere?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

Compressing is fine

Compressing and decompressing is fine, what about directing the browser to load the css first before displaying the contents , as you mentioned FOUC is a separate issue is true, for only IE, for preventing to run in the quirks mode ... what we need is to find a way to load the css first, may be some js function will solve the purpose ...

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Desdinova
Desdinova's picture
Offline
Enthusiast
Last seen: 6 years 40 weeks ago
Timezone: GMT+1
Joined: 2006-03-28
Posts: 341
Points: 4

did you even read what I

did you even read what I said?

As a rule, I never touch anything more sophisticated and delicate than myself

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

yes but

Yes i read , but it is not the proper solution for the matter ....

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 6 years 51 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Your answers aren't exactly

Your answers aren't exactly going to inspire additional help. Have you actually tried any solutions for this problem?

I think you need to work on your problem solving technique.

These are things you could/should try:

SERVER:
- ensuring compression is enabled for webserver output. This should significantly reduce the size of the css file.
- make sure HTTP headers are set correctly to properly inform the client whether or not it can use its cached version of the CSS file
- check your server performance, is it operating efficiently? This may not be a download speed issue but a network latency issue. How many http requests to the server is your page making? It may be better to split some files on to another server, e.g. images.

CSS:
- ensure you have constructed your CSS (and its HTML) efficiently. ie. No unnecessary duplication of properties. Use short-cut properties.
- keep your id and class names succinct

DESIGN:
- split your CSS file into smaller files, isolate all those styles need for the home page and basic page layout and put them in one file. Ensure that file is included first. Put additional styles for other pages into a second css file. If the first file is still too slow, move unimportant styles into the second style sheet, ones that you don't mind if they are missed.

TESTING:
- get some tools and find out exactly what is going on. Profile the server and the page.
- have you checked the various page object loading times in Firebug?

Also paste a link to the page here.

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

Thanks

Hi Chris, Thanks for the complete answer , i was looking for ... and my site is yet under construction and not yet online, when it will be finished be paste my links for the checking purposes ... thanks.

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oh you were after the

Oh you were after the 'complete' answer were you Smile funny we were trying/hopping to get you too actually explain what you were doing and in actual fact Chris's post was pointing out to you that you were not helping yourself and loosing the interest of everyone, it did'nt actually provide any answers as such just a set of common practises :shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sarav_dude
sarav_dude's picture
Offline
Regular
Last seen: 2 years 41 weeks ago
Timezone: GMT+5.5
Joined: 2007-02-22
Posts: 29
Points: 0

yes you are right

You all helped me a lot ... i was just trying to figure out the factors that cause F.O.U.C.

Experience the Organized Web!
Its the Fastest, Most Accessible way to Save Bookmarks Online. Users can Save, Share, Discover favorite Bookmarks and more. https://www.urlsave.net