PDA

View Full Version : Slowdown and Lag Issues in CSS



Omega
Mar 17th, 2007, 08:16 PM
Hello, I read your rules and posting guidelines and I'd hope I'm in the right place.

What I'd really like is for some experienced coders to look at the page source of the coding in my forum and on the overall main site, and if you can, give me any suggestions for improvement or error fixes.

My main problem is on the forum as it seems to be lagging in load times while switching through pages and we think it's due to the transparency effect we are using.

Also we are using an animated User Rank that has little animated gifs in a background repeat thing, or perhaps the background repeat error I'm seeing in Firefox is in regards to the BG being stretched.

I don't really know.

I know I need a solution to the front page, in my Bible Verse of the Day thing, as the size issues of the font keep messing up because the scroll bar doesn't adjust to fit the text. The actual image scroll there does not change is what I'm saying, and a side-scroll bar would probably eliminate the problem of font size within that small image.

The main issue is really speed, and browser coding problems. As apparently the site looks "ugly" in IE 6, and looks good in both IE and FF. But both are running slower and I don't know what is causing it, or how it can be fixed.

Any help or advice would be appreciated.

Thank you,

Omega

Links:

http://www.legionofangels.net

http://www.legionofangels.net/forum/

Xiong Chiamiov
Mar 17th, 2007, 08:27 PM
I'm just looking rather quickly, but I would guess that it's slow because of all the images you're using. However, your speed report is good (http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.legionofangels.net/), and I don't have any problems. You may simply be accessing it at a time that the server has load.

twodayslate
Mar 17th, 2007, 08:35 PM
Agreed. You have a lot of semi big images. It looks good though. I did not see any lag.

Did you make those images? They looks great!

In the forum the only thing that takes long for me is the Avatars.

One suggestion for the background image for the forum, make it the image and then black so you do not get an ugly repeating background.

background: #000 url(#);
background-repeat: none;

Omega
Mar 17th, 2007, 09:08 PM
Thanks for the responses.

I noted that the speed test you did was on the front page, and so I went into the forums and did a speed test on this, and this is what I got:

Some Warnings (http://www.websiteoptimization.com/services/analyze/wso.php)

Xiong Chiamiov
Mar 17th, 2007, 09:27 PM
Once again, I'm thinking that it's mostly just your images (which look great btw). That's when you have to decide what's most important to you - speed or looks.

Omega
Mar 17th, 2007, 09:36 PM
Once again, I'm thinking that it's mostly just your images (which look great btw). That's when you have to decide what's most important to you - speed or looks.

Looks

Easily. I'd tell people to get faster pc's...lolz.

But again it's net connection speed that affects it to.

I guess I need to know what I need to compress some, the BG image, or is this just the small in thread imagery...like avatars and sig's? If thats the case I can reduce the number of posts on each page and that will reduce the load times for each forum page.

Thats the issue I want both great imagery as well as performance, and I don't see why I can't get some good measure of both. The transparency boggles my mind even more, on the Dark Sky and Pure Sky skins, I mean...to me that would seem easier to load, since your not loading a forum "image" table, you're loading an outline with a picture behind it that you can see. Unless of course the semi-transparency is our issue as that is like a mini-layer in photoshop or something than uploaded to the site and therefore is...it's own image, which I'd bet it is.

When you said make it a black BG, I hope you weren't considering I remove the sky, as that takes away what we tried to accomplish by making this skin???

Omega
Mar 17th, 2007, 10:47 PM
Sorry, not meaning to bump here, but I have another question unrelated somewhat to the last one.

If I condense or compress the imagery and shrink file size...somehow. And then I add a flash animation to the forum, is that going to greatly reduce the sites speed? Or specifically the forums?

The flash would be around 1024 x 72 or even thinner possibly, like x 50.

godspeed
Mar 17th, 2007, 11:09 PM
no it will make it the response times even worse!

Arbitrator
Mar 17th, 2007, 11:29 PM
Issues:


I’m not sure if the below code actually works, but they look like they’re meant to prevent browser caching. That would be bad for both speed and your bandwidth.


<meta http-equiv="expires" content="31 Dec 2000">
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="pragma" content="no-cache">
Your site lacks image-less accessibility. The text is difficult to read with the fall-back background colors and several hyperlinks are not visible when images are disabled. The navigation should always be visible.
“Powered by BibleGateway.com” is being cut off for me in Firefox. I didn’t check other browsers.
All of your CSS should be in an external file so that it doesn’t have to be downloaded over and over. This is primarily regarding the forum; I assume that the CSS on the home page will only be used once, so that can stay in the document source. If that is not the case though, it should go into an external CSS file as well. This is a good way to increase load times and one of the key benefits of CSS.
Your forum background image is too small for a 1280×1024 resolution, so it doesn’t appear as I guess that you intended. Since it repeats, readability is also impacted at the boundaries between the repetitions. The text at the bottom of this page is also unreadable when it’s over the black, bottom portion of the background image.
Your XHTML documents contain errors. You can catch some of them using Validome (http://www.validome.org/validate/?uri=http%3A%2F%2Fwww.legionofangels.net%2F). Among them I see unclosed tags (home page frame), a missing end tag (forum page), and missing XML namespace declarations (various pages). Errors that the validators probably won’t catch include the commenting out of your style sheets and scripts; remember that, in real XHTML, comments are taken literally and those things are literally commented out.




background: #000 url(#);
background-repeat: none;That declaration should be background-repeat: no-repeat. Both declarations can be combined too: background: #000 url("…") no-repeat.


If I condense or compress the imagery and shrink file size...somehow. And then I add a flash animation to the forum, is that going to greatly reduce the sites speed? Or specifically the forums?As a dial-up user, I would tell you to avoid Flash if it’s just eye candy or the effect could be done with normal images or JavaScript. That’s one more plug-in the user needs and still more to download on the user’s end. Browsers like Firefox don’t seem to cache Flash well either, so it has be downloaded multiple times.

Omega
Mar 17th, 2007, 11:52 PM
As a dial-up user, I would tell you to avoid Flash if it’s just eye candy or the effect could be done with normal images or JavaScript. That’s one more plug-in the user needs and still more to download on the user’s end. Browsers like Firefox don’t seem to cache Flash well either, so it has be downloaded multiple times.

First, thank you so much for your very detailed response.

I'm not the coder, I'm actually the site owner. I have a good friend, that I've known for over 5 years now doing the coding on the site, and they actually learned it as they went along. So they are not quote en quote "a pro" but he's done a very good job so far.

We just have been running into slowdown on both IE and FF browsers since making those two themes, and it's frustrating since we want it to look good and have decent speed or optimal.

I can show you an example of the flash thing I want to add to the site, that I'm contracting someone to do, and copyrighting the appearance of. The issue is I want a horizontal bar across the top of the forum that is no more than 1/4'' thick/thin on screen where 30 x 30 pixel images can be placed. If you've ever seen the website mkarmageddon.com for that video game I got the idea from them in there character displays where they show the characters of the game in a top to bottom scroll down menu with lil faces.

What I want is for the 30 staff members that I get eventually, I want them to go through 10 levels of opacity changes at 10% increments of there avatar appearing within that 1/4'' x 1024 wide fully transparent bar. I want them to align in a preset number order, auto center based upon how many are online, and fully disappear when they log out(10 lvls. opacity changes, at 10% increments). All this is for, is for a "mystique" effect, as this is an Angel themed website. I don't care the speed of the flash, it could be 5 seconds of loggin in graphic and 5 seconds of loggin out. So please don't mistake this, as there is something flash scripted "moving" at all times. Only when staff members log in or out.

Lastly I want the avatars, which will be normal JPEGS mind you or GIFS, they will not be animated. I want them to link to the staff members profile.

I found a coder who will do it contracturally and am hiring him of course. Issue that I'm asking here, is...and he might be able to answer this for me, but this is a second opinion. If I do this, will this greatly affect the speed of the forum for my members, providing I do the changes you've listed above.

A crude example of what this looks like would be found below with a black background.

Xiong Chiamiov
Mar 18th, 2007, 12:11 AM
Mmm, just remembered something. As far as text goes, if you can get him to put just one line (http://www.whatsmyip.org/mod_gzip_test/phpgzip/) of php code at the top of each page, your pages will load much faster.
EDIT: Nevermind. It's already gzipped. But this might be helpful for someone else.

Arbitrator
Mar 18th, 2007, 12:32 AM
What I want is for the 30 staff members that I get eventually, I want them to go through 10 levels of opacity changes at 10% increments of there avatar appearing within that 1/4'' x 1024 wide fully transparent bar. I want them to align in a preset number order, auto center based upon how many are online, and fully disappear when they log out(10 lvls. opacity changes, at 10% increments). All this is for, is for a "mystique" effect, as this is an Angel themed website. I don't care the speed of the flash, it could be 5 seconds of loggin in graphic and 5 seconds of loggin out. So please don't mistake this, as there is something flash scripted "moving" at all times. Only when staff members log in or out.

Lastly I want the avatars, which will be normal JPEGS mind you or GIFS, they will not be animated. I want them to link to the staff members profile.Hmm. I guess that might be your “appropriate” use of Flash. You might want to make it clearer as to what the icons and fading effect mean though. For example: “Staff Members Currently Online (4): [Four Icons]”.


If I do this, will this greatly affect the speed of the forum for my members, providing I do the changes you've listed above.I don’t how “greatly” should be defined, so I can’t give a direct answer, but fixing the noted problems will increase your load times. The accessibility problems and coding mistakes should be fixed as a matter of course.

Omega
Mar 18th, 2007, 01:05 AM
Hmm. I guess that might be your “appropriate” use of Flash. You might want to make it clearer as to what the icons and fading effect mean though. For example: “Staff Members Currently Online (4): [Four Icons]”.

Yes that is exactly what I meant, but they then become kind of like "fixated images" within that bar, so as long as no one else logs in of course.

If someone else logs in they move the existing 4 icons over, using your example, or get spaced evenly out based upon which number of staff member logs in, or wherever they are in the alignment. Then once it goes through the opacity changes, they are logged in and it remains or goes dormant again in a sense or fixated. Whichever word you prefer.

But yes, in short that is exactly what I meant.

twodayslate
Mar 18th, 2007, 03:04 AM
When you said make it a black BG, I hope you weren't considering I remove the sky, as that takes away what we tried to accomplish by making this skin???
I am browsing with a pretty big resolution so the image repeats. I was telling you a way to make it look better when the image does repeat.
Currently the clouds go from really dark to really bright and it makes it looks bad.


That declaration should be background-repeat: no-repeat. Both declarations can be combined too: background: #000 url("…") no-repeat.

Opps... sorry!


For the content of that main page make a fading white image to transparency (Solid white on top then fades to the bottom) so you do not have a scroll bar for the content. It would make the site looks much better.