Speed Up CSS rendering in firefox

I never took the time to think that browsers would render different web content faster or slower than another browser. However, my website (in sig) is heavy in css. I notice that when i scroll up and down using firefox, it is a big laggy. When i test the site in internet explorer 7, it works great! It is smooth like a babies bottom! But firefox is slow and choppy.

I did read up on it a little, and i found some speed tests that show firefox IS slower at rendering css than internet explorer. Now, is there something i can tweak in my browser to speed up css rendering, or is it site related, like do i have to make changes on the site itself to fix this.

I'm kind of inexperienced in this field, so any help is appreciated!

 

It's just the rendering engine, and stuffs. Back end coding you'd have to compile your own source if you wanted to do it. I'd just wait for FF3. It's much faster, and supports Acid.

 

You've also got 5 css files. Can you combine them into one? This usually helps. Tables slow rendering. Static background images often affect scrolling. I would also put some blame on the Joomla theme you're using. It's very complicated.

http://www.websiteoptimization.com/services/analyze/wso.php?url=http://pctipguys.com/

Just my .02

 

wow.....
nice site
SHINY hehe

 

thanks for this! i see some optimization i can do ... we will see how much better i can make it!

 

I-bench is an application which tests benchmarks performance of various browsers on your machine..


P.S: Steve Jobs used this in his latest keynote speech to introduce Safari on windows...(check out my thread on Safari)

 

If you don't mind losing most of your extensions, you could try out Firefox 3 alpha 8. It supposedly renders things a lot better/faster than ff2.

 

well, its not just for me using firefox, its for all of the users of the site too i guess. so i guess my problem was a combination of a crappy site and a crappy rendering browser...

using that site you showed earlier, i managed to reduce the load time by 40%. I don't notice the difference on my 3mb connection, but i guess a dial up user would! im going to try and see what else i can do a little later tonight. time to get back to work!

 

It loaded fine here using Firefox. No slower than IE that I could tell.

 

By the way, how long did it take you to learn how to build a website like that? And where did you learn? It looks great. I generally pick things up by browsing. Home schooled.

 

Well, the site is hosted on a linux server and has a mysql database with joomla 1.13 installed. The "bling" is just a theme that I tweaked to fit my needs and most of what you see as components are all available through what joomla calls mambots and modules. Its actually quite easy once you get started. I have just learned everything i know along the way. Thats why i consider this site my "project site" because im really just using it to learn. I have had a few sites in the past couple years (free ones...aka angelfire blogger etc..). I got this domain and hosting about 6 months ago and initially had it as a wordpress installation, but changed it to joomla once a coworker showed me about it. So this site has been on joomla for about 4 months...if your interested in getting started, godaddy offers deals where its about $40 for a year of hosting with a domain included. Thats what i have, and it has worked great so far, i don't have the traffic to need to increase it to anything better. (averages around 200 hits a day right now).

 

So i think i have it as good as i can for optimization...i went from initially:

70 requests @ 243.3kb
to
35 requests @ 138.1kb

time:
1.5mb line -> 15.29 seconds
to
1.5mb line -> 7.73 seconds

honestly i think it is faster than this...it loads near instant for me...but if it says its 2x as fast ill take it for what its worth...

is there any site that can let you virtual load a page on a dialup connection? I'm just curious in the real world how fast it really loads.

 

Not that many people have dial-up. Though i know there are speed limiting programs out there on the web. Just google it man.

 

Firefox is much more standards compliant than any version of IE. If you are worried about rendering speed I suggest you disable the phishing protection.

As far as your site is concerned have you used photoshop to optimize the images? Reduing color depth, changing gifs to pngs, lowering jpg quality, etc.

 

yes, everything is optimized...its not the size of things that is slow, loading is fine and fast...its scrolling that is a big laggy. if i scroll up or down in IE 7 it is perfectly smooth. but in firefox it is jumpy. maybe its just me, i dunno...

 

Thanks for the tip, pages do load faster now. I never even needed it.

 

For you it may be, but is it for someone with a 3kb connection?

Also the Web Developer Toolbar for Firefox is your friend! - http://chrispederick.com/work/web-developer/

 

just had a look at the site,very nice

and yes it is laggy in FF.but ok when i use the IE tab in FF

 

i have a 3mb dsl connection...not 3kb -> 3mb == 3008kb...

the pages load fine! its not the connection, its the browser differences...

 

Deputy although we should always try and minimize things not only for 56k users but also for speed but a lot of the new things that are out need more resources and for those people who can't utilize it we can't just hold back the webs development, all we can do is feel sorry for them. Also, yeah the page is kinda laggy in FF.

 

On the other hand, it renders more than 30% of it correctly. Imo a good tradeoff...

Anyway, the obvious answer is "fix your site".
If you want others to visit your site, then it has to work well in *their* browser. So it doesn't really matter how many tweaks you make to your own browser, unless it's a personal site for your own use only.

And to fix your site: Find out what it is that slows it down.
Install Firebug, and use that to enable/disable bits of the CSS code on the fly, and see what affects performance. Once you know what it is that causes it to be choppy, you can start looking at workarounds.

 

That is ridiculous! By designing a site over 800x600 you immediately alienate 9% of possible visitors. Design over 1024x768 and you alienate 46%.

When we talk about connections speed we need to realize that just because you and I have broadband doesn't mean everyone does. I would hazzard a guess that 50% of the population don't. The reasons are many: ignorance, lack of service, money, etc. I will also go out on a limb and say that those with dialup are generally the type of person who would benefit most from a site such as http://www.pctipguys.com.

Now let's talk browsers. How many still use ie6? What about opera, firefox, safari, netscape, etc. What about blind visitors who have to use special "reading" browsers.

By building the a site with wiz-bang cutting edge technology you are alienating readers. The extent depends on the readers connections speed, OS, browser, etc, but the numbers will be high.

Why spend your time building said site only to limit your audience?

Again, just my .02

 

Well that page size thing was eliminated a long time ago with fluid pages, and you can always redirect people to download ff if they have ie6.

And i have to say that if a blind person wants to read a web page, or has a program to do it then it's fine.

But if he program spoofs up it's not the web developers fault.

Then again there is always "Contact me" to request special pages for that person, or th classic "Print this page" for a notepad style page no special effects. I understand what you are trying to say but i believe that sometimes you just have to move on.

For big time websites like CNN they have to watch out, but an average web blog, let's be serious here, only gets maybe 1,000 visitors a month and i will say that .01% of that will be blind.

 

Do you have adsence on your site? Are you creating ANY income? http://www.dralegal.org/cases/private_business/nfb_v_target.php

Maybe sites like CNN got that way because their content was viewable by a wider variety of visitors?

BTW, not everyone wants firefox.

 

The world will never know. *shrug* =\

 

Works fine for me. No lagginess here with Firefox

 

Maybe it's just because i have smooth scrolling on. I heard that messes up some pages. =\

 

yes i do have google ads...you should be able to see it if you dont have an adblocker on...and i do make money. well not MAKE its more breaking even on the costs of hosting

 

It's the background image that causes the slowdown on Firefox. Just removing the scaling helps a lot.

 

actually i found its a bug with the google adsense modules...im not alone with this problem. the newest version (3.0) which was just released doesnt fix it either. Its frustrating now because i know there is no fix unless i want to pay for the site all out of my pocket...

so consider this solved for now.

 

I'm a web & graphic designer by trade.
I'm not sure how you have your site setup and since you have four stylesheets, I'm not going to go poke around but I assume you've got your layout's background set to 50/60% opacity, correct?

That's most likely your culprit. This is basically a non-compliant value and browsers aren't too good at calculating it. From here, it was very slow in Firefox and slow in Internet Explorer 6. I don't have any others on this machine I could test on unfortunately.

To make sure that's the problem, try to set your background's opacity to 100% and try to see if it resolves it.

 

*shrug*
I just tried changing the background image scale to 100%, and the scroll became smooth.
As I said, install Firebug if you're going to do web development. Makes it a lot easier to troubleshoot the problems that occur.