This is a long standing issue that’s been bothering me for a while. It’s only recently when I started getting into templates that I reliazed this more and more. I have taken a strong interest into performance websites, reducing the filesize and increasing the speed.
The way in which we write CSS affects the performance of the site, and indeed the Google Page Speed. I wanted to know what methods you all take into optimizing your site for speed, whether your host accepts GZIP or whether you’re using a CDN. CSS in my understanding plays a lot of role into the way which your site is viewed and has an infleunce on any flash-of-unstyled content.
Luckily I don’t get involved in the server side aspect but from my point of view (psd to css/html conversions) the main things I cater for are optimised images and using sprites where possible accompanied by clean css and html without bloat. Some people torture their css to death with optimisation to save a few k and then they sling in a 200k background image which makes little sense. CSS is really the last link in the chain where savings should be made as other areas will yield better results.
Browser rendering is where I have an issue with, not so much speed and file size. If you had 2 pages one with 100’s of CSS3 background-gradients or another page with simple background-colors, those pages would have a big difference in browser rendering. As far as I noticed Chrome is probably the best browser for rendering. I have taken an interest in magazine-style web layouts and I noticed they mostly use background-colour’s as oppose to gradients and excess drop shadows. Their performance speaks for it’s self.
Yes, Firefox is incredibly slow with gradients as it was previously with fixed backgrounds and makes the whole page feel sluggish. The newer versions are better but still make the page feel less snappy. The demo page I did for a previous quiz is still very slow on Firefox but a lot snappier in Chrome.
Just viewed that in FF, completely unusable, can’t imagine a corporate site being like this. In Chrome it works fine, and looks really quite amazing. In the past I use to moan about IE, but it appears that FF will be the new moan as it fails to compete with web standards. Are there conditional statements etc. to exclude it from the running on the page. It’s that or dropping excessive drop shadows. I designed my web design website and I was very liberal on CSS3. It appears okay with Chrome, but I am not too fond of it in FF. In fact I am now in the process of doing the blog pages, and I am doing a whole new theme, and decided to stay clear from CSS3 gradients.
I feel some of my CSS was also excessive (2500 lines+ of code), despite it ranking 93/100 on the Speed Test by Google, I also managed to target scripts for each page without running unessential scripts without cause.
I am going to build the blog pages with all this performance in mind, it will probably have to be powered by Drupal for more flexibility as it will contain 3/4 blogs in one site.
Am still a relative newbie on this issue, but One thing I have learned is that CSS and in deed web design in general is neither logical nor intuitive; it requires singular-goal relative consideration. In short the thin is to be PRACTICAL, not academic.
As Paul pointed out some people start trying to write ‘minimal’ CSS before they reduce/optimize images or even trim their mark up. As I understood it, CSS is there so you can style your mark up… if you come up with convoluted design concepts, many variations etc ( usually the best AESTHETIC rule is KEEP IT SIMPLE, STUPID.This is not because as a designer you are unable to do tricks, but because good design doesn’t rely on gimmicks)
Now, back to TECHNICAL considerations. For example, legacy IE consideration aside, when targeting ALL elements that are direct children of Content you could do :
The latter technique would allow you to micromanage elements manually ( maybe there is ONE direct child of Content you dont want styled so you dont add class=‘contentChild’ to that element). Sure you avoid using the universal selector… but you still force the browser to look trough the DOM for .contentChild ( this is assuming you were disciplined enough to only add .contentChild ONLY to the children of Content)
By contrast the earlier technique keeps your mark up extra clean, is all inclusive, and only requires intervention WHEN you you make an EXCEPTION ( so you can count that it would be few or far between) and you dont have to touch (add class=‘whatever’) to you mark up. this is ease of update and clean mark up and really you haven’t forced the UA to parse that many more extra DOM elements than if it had to look for every element with class =‘contentChild’.
Don’t confuse what I am saying with abuse of *
{color:blue;} /* seriously?!?!?! */
{ padding:0;}
a {text-decoration:none;}
In reality I don’t think one can summarily say “this method is bad form” when it comes to web design unless one considers IN DEPTH the specific implementation.
Yes it was only done for fun for the quiz and within the rules of the quiz which is why its a bit odd.
I find the gradient filters totally unusable and will not use them in a real site. It’s far quicker to create a gradient image than it is to type all that css out and indeed the image renders quicker than the gradients and doesn’t slow the page down when scrolling and once cached has no negative impact unlike the gradient filters which continually slow the page down when redrawing/scrolling etc… and the image works everywhere.
Chrome and indeed IE seem a lot quicker than Firefox these days and I think that Chrome will be the browser of choice soon. Firefox is good for developing as there are loads of extensions but its not the best for browsing.
I designed my web design website and I was very liberal on CSS3. It appears okay with Chrome, but I am not too fond of it in FF. In fact I am now in the process of doing the blog pages, and I am doing a whole new theme, and decided to stay clear from CSS3 gradients.
Yes that’s a nice looking page ( Although I would have trouble allowing myself to add a 172k image in the footer as I’m still living in 1999 and if an image is bigger than 20k I get frightened :))
I feel some of my CSS was also excessive (2500 lines+ of code), despite it ranking 93/100 on the Speed Test by Google, I also managed to target scripts for each page without running unessential scripts without cause.
I am going to build the blog pages with all this performance in mind, it will probably have to be powered by Drupal for more flexibility as it will contain 3/4 blogs in one site.
I think that sometimes when you’ve built a site you realise what you could have done better afterwards. I think that in some ways its good to get something up and running quickly and then to reverse engineer it to be more efficient. Of course it depends on the size of the project and on large projects you just have to do it right form the start as there is often no turning back after months of code have been thrown at a project.
Yes that’s a nice looking page ( Although I would have trouble allowing myself to add a 172k image in the footer as I’m still living in 1999 and if an image is bigger than 20k I get frightened )
I have to fix this. I sometimes run this through FastStone viewer. It does do a better job that PhotoShop and it happens to be free. The gradients were placed. I think we are however safe to use test-shadows and multiple backgrounds images. Gradients are a bit early. This was my first project with a background image. I used PIE script for consistency on other browsers, but in my opinion it’s still loading slow. The blog will be completely different. This has to be fast because it’s a blog. Want to put adverts on it too.
( Although I would have trouble allowing myself to add a 172k image in the footer as I’m still living in 1999 and if an image is bigger than 20k I get frightened :))