Web Sites Now Ranked by Performance
Praise jeebus, it's about time Google acknowledged speed as a major factor in web design usability and user retention. I just hope my site's not too bloated :-)
Actually, I've already checked my Google Webmaster tools and apparently my site is faster than 74% of other websites, which - with my use of graphic elements makes me extremely happy (and a little bit surprised). I spend a lot of time optimizing sites because it not only helps with performance, but compatibility as well.
Why so much bloat?
In this field, there's a lot of revision work on every project. I've noticed lately that it not only seems to be getting worse as clients expectations for web-based media increases, but as developer work-load does as well. I've worked for many years alongside other developers and notice that when changes do occur the most common practice is to simply 'move on'; leaving behind extra CSS, JavaScript, and even sometime HTML elements that are no longer part of the site. A practice I just can't seem to get my head around.
My process has become refined, and engaged the changing mindset of clients and the designers who send me concepts:
- Build the web site 'generically'
I've tried to stop building sites laden with ID's and classes and build on generic concepts and elements. That is - I don't define a column as "#some_specific_region", and instead class things as ".left" or, if I need to get more specific to a region ".left_small", using conventions that define layout not content. This has been blogged about a lot, so I don't feel the need to elaborate on this one too much. - Optimize images
Use JPG's where possible, they're just cleaner. Need transparency... use a gif? Need more complex, cleaner, or alpha transparency - use a PNG, but run it through a PNG optimizer to squeeze out some of the bloat. - Take revisions seriously
I find this to be the biggest hurdle for rushed developers, but when a client changes a region, don't simply 'build-over', re-use elements IF YOU CAN. If not, clear out that CSS/HTML/JavaScript and rebuild it. Yes, it's more work, but it will cause less bloat and decrease the chances of having conflicts or simply forgetting that you already have an element to do exactly what you need. - Review you site's performance
There are a plethora of tools out there for performance testing like FireBug for Firefox, or the Chrome Developer Tools. They are out there for a reason, use them wisely, use them often. - Compress and clean your code
This is best shown in JavaScript (where I see a LOT of bloat). Developers write a ton of code to control actions, submit AJAX request, etc., and then just launch the site. I get it - it's so much easier to come back to a nicely formatted JS file with all your comments, indents, and formatting. So - back up that JS file. I like to save a copy of my JS files a file_name.js_RAW, then compress a version using min or pack and launch the site with that. Hell, gzip if your server supports it.
You can also slim down your CSS, pull comments from HTML and generally do a little house-cleaning to affect they way the site loads.
In summation...
We're in a world where broadband connections are becoming commonplace, but it doesn't open up the floodgates for piss-poor performance development. What about that whole 'mobile' craze that all the kids are raving about? I don't know about you, but my smartphone doesn't get the 20+ mbps my home network does. If you didn't have a reason to take the time before you do now - SEO is imparative to almost any site and since Google's now taking performance seriously it might be a good idea if you did so as well. I can guarantee they spent a lot more work on their algorithms than you will re-writing a little bit of code.
Responses to this Article:
Loading Comments...
I am a web developer, designer, and consultant located in the La Crosse / Onalaska Wisconsin region with
over twelve years experience developing and managing projects ranging from large applications and cloud-based
business solutions to social/new media campaigns, to complete system and infrastructure implementation.