15+ Tips to Speed Up Your Website, and Optimize Your Code!
Jan 27th, 2009 in General by Jeffrey Way Once you've been coding for a while, you begin to take something for granted. You forget just how smart you really are. How many hundreds of keyboard shortcuts have we memorized? How many languages have we learned? How many frameworks? How many hacks? To say that web design/development is an extremely tough industry is putting it lightly. Next, add in the fact that much of what you know today will be considered obsolete in a few years.
Today, we'll be looking at a crop of tips and tricks that will help beginners speed up their development time, and code more efficiently. You'll see a mix of quick time savings tips, as well as specific coding tricks to increase your web application's efficiency.
Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of both ThemeForest, and CodeCanyon. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.
Compress Your Images Even Further
When using the "Save for Web" tool in Photoshop, we can compress our images in order to lower their respective file sizes. But, did you know that the compression can be taken even further without sacrificing quality? A site named Smush.It makes the process a cinch.
How is This Possible?
The team at Smush.It use a variety of tools.
- ImageMagick to identify the image type and to convert GIFs to PNG.
- pngcrush to strip unneeded chunks from PNGs. We're currently experimenting with other PNG tools such as pngout, optipng, pngrewrite that will allow for even better png optimization.
- jpegtran to strip all meta data from JPEGs (currently disabled) and try progressive JPEGs.
- gifsicle to optimize GIF animations by striping repeating pixels in different frames.
* The list items above were taken from the SmushIt FAQ Page .
So, just before deploying a new website, run your url through their service to reduce all of your images - thus speeding up your website. Beware - the service may convert your GIF files to PNG. You might need to update your HTML and CSS files accordingly. While we're on the subject, 99% of the time, saving as a PNG is the better decision. Unless you're using a tacky animated GIF, consider the PNG format to be best practice.
Be Wise. Use Snippets.
Many IDEs offer a "code snippet" panel that will allow you to save code for later use. Do you find yourself visiting lipsum.com too often to grab the generic text? Why not just save it as a snippet? In Dreamweaver, press "Shift F9" to open the snippet tab. You can then drag the appropriate snippet into the appropriate location. This features saves me SO much time over the course of a week.
Utilize Console.log() to Debug
You've downloaded the jQuery library, and you're slowly trying to grasp the syntax. Along the way, you hit a snag and realize that you can't figure out what the value of $someVariable is equal to. Easy, just do...
console.log($someVariable);
Now, load up Firefox - make sure you have FireBug installed - and press F12. You'll be presented with the correct value.
Now - multiply this by infinity and take it to the depths of forever and you still won't realize how useful Firebug and console.log() can be. :)
Download the Web Developer Toolbar
Created by Chris Pederick, this unbelievably helpful Firefox plugin presents you with a plethora of options. Many of you who watch my screencasts know that I'm a fan of using the "Edit CSS" option to adjust my styles in real-time. Other helpful options include...
- Easily disable Javascript
- Easily disable CSS
- Quick HTML/CSS validation links
- Rulers
- Disable cookies
- Too many great features to list!
Web Developer Toolbar
Consider Placing Script Tags at the Bottom
This is a procedure that we all don't perform enough. Though not always feasible, you can many times speed up your website by placing your script tags next to the closing <body> tag.
....
<script type="text/javascript" src="someScript.js"></script>
<script type="text/javascript" src="anotherScript.js"></script>
</body>
Why Does This Help?
Most current browsers can download a maximum of two components in parallel for each host name. However, when downloading a script, no other downloads can occur. That download must finish before moving forward.
So, when feasible, it makes perfect sense to move these files to the bottom of your document in order to allow the other components (images, css, etc) to load first.
When Deploying, Compress CSS and Javascript Files
If perfomance is paramount for your website, I strongly suggest that you consider compressing your CSS and Javascript files just before deployment. Don't bother doing it at the beginning of your development. It'll only cause more frustration than help. However, once the bow has been tied, compress those babies up.
Javascript Compression Services
CSS Compression Services
Two other helpful tools for packing JavaScript code are YUI Compressor, and JSMin.
Additionally, you have the option of compressing your HTML - though I wouldn't recommend it. The file reduction is negligible.
jQuery "Quick Tip" Roundup
Not too long ago, Jon Hobbs-Smith from tvidesign.co.uk posted a fantastic article that details 25 jQuery tips. Be sure to bookmark this page! Here are several of my favorites.
Check if an element exists.
if ($('#myDiv).length) {
// this code will only run if the div with an id of #myDiv exists.
}
Use a Context
Many people don't realize that, when accessing dom elements, the jQuery function accepts a second parameter - "context". Consider the following...
var myElement = $('#someElement');
This code will require jQuery to traverse the entire DOM. We can improve the speed by using a context as the second parameter.
var myElement = $('#someElement', $('.someContainer'));
Now we're telling jQuery to only search within the .someContainer element, and to ignore everything outside of it.
Use IDs Instead of Classes
When accessing IDs with jQuery, the library uses the traditional "getElementById" method. However, when accessing classes, jQuery must use its own methods to traverse the dom (there isn't a native "getElementByClass" method). As a result, it takes a bit longer!
Review All 25 Tips!
Use $_GET instead of $_POST, if Possible
If you have the choice between $_GET or $_POST when making AJAX calls, choose the former.
"The Yahoo! Mail team found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it's best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies)." - Developer.Yahoo.com
Remember - don't blindly use $_GET. Make sure you know exactly what you're doing first. For example, under no circumstances should you mix the querystring and database access. Not too long ago, one of my Twitter buddies sent me an image of a live website containing a MYSQL query in the url. DON'T DO THIS! :)
When Practical, Use Libraries and Frameworks
Whether you're using PHP, ASP.NET, Mootools, jQuery - or a combination of all of them, consider using frameworks when appropriate.
For example:
- if I'm running a simple static website and only need a small bit of Javascript to create a rollover effect, importing the jQuery script will be inappropriate.
- If the most complicated feature of my static website is pulling in an XML file, I don't need to use a framework. In such instances, my site will suffer and cost me more money in extra bandwidth expenditures.
However, if I'm building a complicated site that requires a full CMS and complicated data access, I'll take a look at one of my preferred language's frameworks.
Remember - make frameworks work for you; not the other way around. Be smart when making these decisions.
YSlow
YSlow is a wonderful service that checks your website to ensure that it's as efficient as possible. The Yahoo Dev team, not too long ago, created a set of guidelines, or best practices, that should be followed when developing - many of which are detailed in this article, actually.
There's a great YSlow screencast that demonstrates many time saving techiques. I highly recommend that you view it when you have the chance.
Keyboard Shortcuts. Learn Them!
Most experienced designers/developers will agree with me; if I had to go up to the toolbar menu every time I wanted to make a change to my site or design, I'd be lost. I've been using keyboard shortcuts for so long that I don't know the correct location anymore for these commands. I just know that "Shift X" opens the correct panel.
At first, it can seem like wasted knowledge. But, I assure you that it isn't. I recommend that you do a Google search for "X keyboard shortcuts" - where X is equal to your software (i.e. Photoshop). Print the chart out and place it next to your computer. Over the next few weeks, practice touching your mouse as little as possible. This is one thing that separates the pros from the hobbyists.
Create a "New Website" Template
Let's face it; not every website needs to be some huge and complicated application. Sometimes, we simply want to display our portfolio - probably most of the time for some! In these instances, why not create a simple "template" that contains everything you need to get started.
Within my template folder, I have nested "JS" and "CSS" folders.
- The former contains my "DD_belatedPNG.js" file (adds 24 bit transparency to PNGs in IE6).
- The latter simply contains a blank "default.css" file, and my own custom reset file.
In addition, I have an "index.html(php)" file that contains a few code snippets that I use on most of my projects. It's nothing too fancy, but it saves time!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/default.css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.7a-min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(function() {
});
</script>
</head>
<body>
<div id="container">
</div><!--end container-->
</body>
</html>
As you can see, I reference my CSS and Javascript files, link to Google's jQuery file, create the document.ready() jQuery function, and open up the standard "container" div.
It's rather simplistic, but SAVES TIME. So every time you create a new website, simply copy your "template" folder and dig in.
Inline Vs. External
Generally speaking, all of your CSS and Javascript should be removed from the page and placed in their own respective external files.
Why Should We Do This?
- Cleaner code.
- Separation of presentation and content is crucial.
- By using external files, the data will be cached for future use. This reduces the HTML file size without causing an additional HTTP request - because of the caching.
If you only have a few basic styles, an exception can be made. In those, and only those instances, it might be beneficial to include them in the HTML page.
Determine if a PHP Script Was Called With Javascript
AJAX is all the rage right now - mostly because it's finally become relatively user-friendly, thanks to Javascript libraries. In some instances, you need to have a way to determine if the script was called with Javascript. There are a few days to accomplish this task.
One way would be to append a unique key-value pair with Javascript when sending the POST. You could then use PHP to determine if that particular key exists. If it does, we know that Javascript is enabled.
A better way would be to use a built in PHP feature called "HTTP_X_REQUESTED_WITH". To illustrate...
if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// write some code and rest assured that the Javascript is enabled.
} else {
// Do something different to compensate for users that have JS turned off.
}
Link to Google's CDN
Not too long ago, Google began hosting popular scripts such as jQuery. If you're using such a library, it is strongly recommended that you link to Google's CDN rather than using your own script.
AJAX Libraries API
How Come?
- Caching: There is a possibility that your users won't need to download the script at all! When a browser sees a request for a file that has already been downloaded onto the user's computer, it recognizes this and returns a "304" response (NOT MODIFIED). For example, let's imagine that one user visits thirty sites that all link to Google's CDN. In this example, the user would only download jQuery once!
- Improve Parallelism: I spoke of this in a previous tip. By removing this extra request, the user's browser can download more content in parallel.
Embrace Firefox Extensions
I'm a huge fan of Google's Chrome. It opens extremely fast and processes Javascript quicker than any other browser - at least for now (I think the latest version of Firefox might have caught up.).
However, you won't see me leaving Firefox any time soon. The number of helpful plugins available for the browser is astounding. Here's a list of my favorites.
When Helpful, Use an IDE
In the same way that it's cool to hate Microsoft right now, it seems that it's popular at the moment for people to attack those who use IDEs when developing. This is just silly.
In many instances, the use of an advanced IDE is paramount - especially when working in OOP languages. Now, if you're simply creating a small HTML template, programs like Notepad++ and Coda will work splendidly. Actually I'd recommend their usage in these instances. Don't add the extra bloat if you don't need it. However, when developing advanced applications, take advantage of an IDE.
That's All Folks!
That should do it for now. Hopefully, a few of these (maybe all of them!) will help to make you a better designer and developer. What are some of your favorite short-cuts? Leave a comment below and let us know!
User Comments
( ADD YOURS )Elias Chaer January 27th
Great Post, Thanks Guys
( )Marco January 27th
Damn – That was one amazing article. One of the most wel-explained ones I’ve ever seen. Well done!
I do have one question – Is placing the “script” tag after the “body” tag still xHTML valid? Never tried it before.
Keep up the good work!
( )Miles Johnson January 27th
Frameworks are not optimized code, if anything they would be slower.
Also compressing your js/css wouldn’t make that much of a difference. I compressed a 150k file and all it did was remove 10k.
The rest of these dont even deal with optimizing your code directly, its all addons/programs that show you what you should do. Either way, some of these are helpful like firebug and yslow.
( )David Singer January 27th
Aptana (http://aptana.com/) rocks for an IDE and there are several libraries available to help optimize your code.
Another great trick instead of using script tags in your code just keep track of the files you want to add in an array then when you need to output them you can combine all the files into a single file, compress it, cache it, and serve it within a single script tag. This helps cut down your http requests. Works great for CSS as well.
( )Anton Agestam March 23rd
That’s a great idea, I’ll try to fix some script for that
(Y)
( )Joe May 1st
Aptana is very slow…
( )Jon January 27th
Thank You!
This is one of the most useful articles I have read in a long time. This will definitely change the way I develop sites. Thanks for your excellent research and effort on this one.
( )David Singer January 27th
If you like console.log() then you will love FirePHP (http://www.firephp.org/) it allows you to output messages from PHP directly to Firbug.
FB::error(‘Error message’);
( )James January 27th
Great list!
One thing, in the code snippet below the “Consider Placing Script Tags at the Bottom” you have the script tags below the </body> tag – I think you meant to put them above it.
Also, when you use a context in jQuery you can pass a selector expression, i.e. you don’t have to pass a jQuery object to the second parameter…
Most modern browsers natively support ‘document.getElementsByClassName’ and I think jQuery (or rather, Sizzle) takes advantage of this support. Your tip is still valid though, for older browsers.
@Miles, I’d say about half of them are about optimisation (including the jQuery tips, the _get/_post tip and the script tag placement tip.
( )Sam January 27th
Excellent compilation Jeff,
( )there are heaps of tips to get my site going. I’ll start with the Firefox extensions…..
David Singer January 27th
Last one. Check out the HTML Validator for Firefox (http://users.skynet.be/mgueury/mozilla/). It will tell you instantly if your code is valid without a round trip to w3.org. I know web developer can do this as well however HTML Validator seems to work significantly better. It even gives you a detailed description of whats wrong and in many cases the fix.
Also useful Pixel Perfect (https://addons.mozilla.org/en-US/firefox/addon/7943) which allows you to overlay (with transparency) your PSD mockup onto your site.
( )raiderhost January 27th
great tutirial to optimize webiste…
@Jeffrey Way thankz for this.
i wait for more graet tutorial again
( )Pedramphp January 27th
Great JOb I got excited about the $_GET instead of the $_POST in ajax calls I used to work with post because it is much more secure but it seems makes my webpage slower , and thanks about the cool Firefox Extension .
( )insic January 27th
cool article. I did some stuff that is written here but most of it is I didnt practice so I better follow these tips. thanks
( )Jash Sayani January 27th
Wow! Thats an amazing post !!
( )Filip Jukić January 27th
A great article. I do most of the stuff mentioned here but this helps me remember all of them. Also, didn’t hear about smush.it before.
( )Max January 27th
what program did you draw the handwritten doodles with? especially the last one with the demand of subscribing/bookmarking?
( )Max January 27th
btw, very nice and helpfull post
( )kat neville January 27th
I’d been having a debate with my boyfriend on whether to have your javascript called in at the beginning or at the end. Developers at work put it at the end, but the developers at his work put it in the head. I think it’s not as cut and dry and “just put it at the end”, but I will take a bit of glory that someone else recommended what we do at work.
( )neuromancer January 27th
Great article. I actually do some of these things in my dev work, which is quite reassuring!!
( )Snorri3D January 27th
some good tips in here
( )Chukki January 27th
Great article…. most of it I already knew before, but the Google Ajax API burns it away! Nice !
( )Wassim January 27th
@Miles Johnson – Common Miles
the article is about tips, tricks and best practices, Jeff didn’t talk about “Code Optimization”. When Facebook stuff hired the core engineers of SUN (who owns MySQL now) to optimize the core code of MySQL to deal with caching problems, well that was “Code Optimization”.
Great article Jeff, really.
( )Eduardo Sasso January 27th
Great post. Very well organized and helpful. Congratulations!
( )ThaClown January 27th
Could anybody post to code needed (to Google API) to replace the jquery script type link? so how do I link to a Google page within a script tag?
Thanks, great tips!
( )oDiN January 27th
A very nice tips indeed . I always use firebug . Will try webdev firefox extension later .
( )Tom Kenny January 27th
I came across Smush.it last week and it seems quite impressive but I do wish it was a standalone app rather than a web app. I would even pay for it.
( )ThaClown January 27th
Found it! Sorry should have looked better first
script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js”>
( )DownloadBird January 27th
Here is the reddit http://www.reddit.com/r/technology/comments/7sqdk/15_tips_to_speed_up_your_website_and_optimize/
( )Lamin January 27th
Awesome post. I really felt obliged to comment on this one.
Keep up the good work.
( )benaissa January 27th
really,it’s a very good tutoriel,thanks jeffrey. you are the best.
( )Patternhead January 27th
I can’t say that I’m comfortable with CSS frameworks. Maybe it’s just me but all those extra classes and container divs make clean html look messy. Hand coding all the way for me.
Thanks for the great post though.
( )Trond January 27th
Great post! thanks for the tips!
( )Adam January 27th
Awesome! I do alot of them anyway but picked up some nice new tricks and tips. I never compress CSS as they always remove code that is needed. Thanks guys =]
( )orangecreative January 27th
Very cool! Lots of tools/things I was not aware of!
( )martin January 27th
@Max
I think he’s just used the arrows vector pack found in the freebies section:
( )http://nettuts.com/freebies/others/which-way-do-i-go/
As for the font, not too sure
Alex Hughes January 27th
One of my favorite articles i’ve had the pleasure of reading on ‘Nettuts’. Really taught me allot.
( )BeyondRandom January 27th
Great post! These tips will come in handy as I was going to QC my site this weekend! Thanks again.
( )crypta January 27th
Very cool stuffs
( )D2WebDesigns January 27th
A great article (spelling error in the first sentence aside (it should be granted… not grant)).
Anyhow, even the the Firefox plug-ins were a HUGE help. Thanks for another great article Jeffery.
( )Nick Sergeant January 27th
and if you’re sick of storing all of your code snippets in Dreamweaver or other editor, try an online code storage site like http://snipt.net.
( )Sergio Ordonez January 27th
Great list of tips, congrats!!
But I cant believe Smush.It will do better job than Photoshop, I will try and compare, if it does would be a nice surprise.
Cheers.
( )M.A.Yoosuf January 27th
nice, nice nice nicer
Jeff: you are great man u re a great blogger, thats my view!
( )Timothy January 27th
As for compression, just use YUI compressor to compress BOTH Javascript and CSS files
( )khurram January 27th
Nice article!
( )for optimizing the peformance of ASP.NET applications check the following guidelines:
http://www.codeproject.com/KB/aspnet/PeformanceAspnet.aspx
Dan January 27th
Great stuff thanks for the tips
( )Brenelz January 27th
Nice collection of all the things you can do to improve your code, and speed up the development process.
I think I have used all of these tips at one point or another
( )OpenSourceHunter January 27th
Nice!
( )macias January 27th
yee.. nice article for evening , when my daughter will sleep already.
( )Bjorn January 27th
Wow, there was a lo more to that article than I expected. Thanks, yet again.
( )Jeethu Rao January 27th
Regarding the jQuery tip,
var myElement = $(‘#someElement’);
reduces internally to a document.getElementById(’someElement’);
Since id’s are unique in a document, providing a context element in this case doesn’t result in any speed up.
Besides that, this was an excellent post.
( )James Sinclair January 27th
Great article. If you want to read further you should check out,
( )http://www.thewojogroup.com/2008/10/10-easy-steps-to-great-website-optimization/
Jbcarey January 27th
great post!
( )John Deszell January 27th
What is everyone’s thoughts on using Google’s hosting of libraries? I’ve heard others say that Google tracks even more information about your visitors. Is this true? I currently host my own jquery on my website. I’m wondering if I should make the switch.
( )Josh January 27th
Never really used the snippets in dreamweaver. Looks like they would be helpful though! Thanks.
( )Jeff O'Hara January 27th
My tip: Use subdomains. Probably a max of 3, http://www.example.com for your site, scripts.example.com for scripts, images.example.com for images. People visiting can now download about 6 items in parrallel.
( )xQlusive January 27th
Some great tips we can use! Speed is what we need.
( )Bruno Abrantes January 27th
Some nice tips here, I’ve finally decided to stop being lazy and compress my Javascript and CSS. Also I’ll be giving the Google AJAX Libraries a serious try.
Thank you for another nice tutorial!
( )Luke Kingsnorth January 27th
another awsome post by jeffery way!
( )Eric Boyer January 27th
“Additionally, you have the option of compressing your HTML – though I wouldn’t recommend it. The file reduction is negligible. ”
Do you have any tools you recommend to do this with a web interface like the others?…
The reason I ask is, there are some IE6/IE7 issues we are trouble shooting, and generally cleaning out whitespace fixes it. Makes no sense to be, but a tool like this may help.
( )Elizabeth Kaylene January 27th
These are some great tips. I’m not a fan of Yahoo — they really disappointed me with their customer service while they were my hosting provider — so I’ll skip out on that.
I’m dying to check out the Google library now.
I recommend using Dreamweaver’s pre-designed templates. You can quickly and easily customize them for smaller sites. It makes life a lot easier.
Thanks so much for this article! I’m definitely looking forward to browsing the rest of your site.
( )Meshach January 27th
Jeffrey, yet another extremely useful tutorial.
( )Jason Karns January 27th
For those of you who use both jQuery AND Firebug (which should be everyone), you might want to check out my jQuery plugin: jQuery.Firebug. It’s a plugin for jQuery that exposes Firebug’s console API directly to the jQuery object so you can do things like:
$(“.someclass”).log().find(“.children”).debug();
It’s still under heavy development and hasn’t release 1.0 status yet, but check it out and give me your feedback!
http://jasonkarns.com/blog/2009/01/06/announcing-jqueryfirebug/
( )Joe T P January 27th
Jeff, you’re using pseudo XHTML transitional??? I guess you’re not a pro then.. If you want to be a pro, read this article:
http://www.webdevout.net/articles/beware-of-xhtml
Except for the pseudo XHTML, good article.
( )Ethan Gardner January 27th
Nice outline. I have also written about website optimization and have a checklist and some other pointers that aren’t covered here such as setting up a robots.txt file, sitemaps, and apache tips at http://www.ethanandjamie.com/blog/39-seo/77-website-optimization-guide-1.
( )Michael Thompson January 27th
Missing tip relevant to the article’s content, not the title (like most of the article…): Learn to use a real text editor like Vim.
Especially for writing HTML/CSS, the time you’ll save will blow your mind.
( )Simon Ong January 27th
@ #14
You can also try using IETester to test websites on Internet Explorer 8 BETA below, especially if you’re a Vista user. Been using it for a few months now and it helped me a lot.
http://www.my-debugbar.com/wiki/IETester/HomePage
( )Jake Johnson January 27th
Great tips, never considered the benefits of $_GET over $_POST for AJAX calls. I’m curious how much faster that would be speed up my sites. I’ll have to check it out, thanks.
( )Melvin Walls January 27th
Amazing article once again Jeff. I’m all about speeding up my productivity so ill be using many if not all of the techniques you just discussed. Great work!
( )Rick Hofmijster January 27th
Great tips but you always have to consider what you are making. Are you making a website for friends and family (approx 50 visitors a month) then a lot of these optimization tips are not needed. (Nevertheless it’s good to pratice though)
( )When you make a site like I did not that long ago for approx. 1000 visitors a day, optimization starts to be an important issue to save out bandwidth on the long run and ofcourse loading speeds for the user/visitor. I’m defenitly using Yslow in the Firbug extension to do so!
Sammy Deprez January 27th
thanx for the awesome tips, especially for putting the javascript on the bottom of a page, didn’t know that!
( )Ian January 27th
Simply amazing
( )Markus January 27th
thanks
( )great tips
sean turner January 27th
Good work,
Many thanks
( )Moksha Solutions January 27th
thanks good one, it was nice to see that i was using much of the things already other then cssoptimizer and Smush. That i all start using
thanks for sharing
( )Paris Vega January 27th
“Link to Google’s CDN.”
Yes, sir.
( )TNTStudio January 27th
Great article! Smush.It = Excellent tip
( )marcokaup January 27th
Very nice article but where is that code optimization / speedup? Maybe someone should edit title or something.. ?
Thanks..
( )Simon January 27th
In addition to the Console tip, I’ve coded a AS3.0 class that allows you to log to Firebug. You can find it at http://-maverick-.deviantart.com/art/Console-Actionscript-3-0-110858220
( )Zac January 27th
Awesome job. Loved this!
( )Stephen January 27th
The easiest way that I’ve found to compress javascript and CSS is to use minify (assuming your site runs PHP) :
http://code.google.com/p/minify/
The advantages:
( )1. You make changes to the uncompressed JS and CSS, and it just serves it up to people compressed automatically. You don’t have to recompress your code and resave it every time you make changes.
2. If people are looking at your code trying to figure out what you’ve done, they can still figure out where your uncompressed CSS and JS are. It gives a little something back to the community, instead of obfuscating all of your code.
3. It takes separate JS files (or separate CSS files) and compresses them into one file, making less server calls.
arshad January 27th
wow .. the tips are great .especially the image conversion to png .
( )Rob January 27th
Web Developer Toolbar rocks. One of my favorite tools
( )demogar January 27th
If you are using PHP in your projects use PHPSpeedy or AssetLibPro (just for CodeIgniter)
( )MK January 27th
Hey, I’d love to have that Ubuntu Keyboard.
And another web dev tip > Use Ubuntu Linux
( )Mepho January 27th
Wowzers what a great tutorial. I think there are a lot of small tips that even the expert developers miss these days.
You can also test speed of sites on various free services out there.
( )Saeed Jabbar January 27th
I love the web developer toolbar and the use of snippets. Coda as a great snippet feature via clips. Firebug is one of the best debuggers out there , you could also do some css debugging via the developer toolbar (command+shift+e on macs ,I believe ctrl+shift+e on windows).
( )zplits January 27th
Does Smush.it works? Or it just really slow to convert an image? Have tried it, 15 minutes gone, the status is still smushing…
( )Drew January 27th
@zplits Yea, smush.it does work but sounds like the server may have been a little overloaded when you tried it, maybe from this post
I’ve used it many times with good results so give it another go.
( )JNewhouse January 28th
Great Post!
Good advice, I’ll be implementing it right away. Thanks
( )Oliver Beattie January 28th
For smush.it’ing images, check out http://github.com/obeattie/smooshy-py/tree/master — saves you the hassle of doing it manually.
( )Fred January 28th
Very interesting, thanks guy
( )datenkind January 28th
The YUI compressor exists as an online compressor, too: http://yui.2clics.net/
But I’m missing a very important part of site performance: GZIP. There’s absolutly nothing about it in this article, therefore it can help shrinking down parsed HTML down to nothing. Furthermore, it compresses JS and CSS. As an example, a minified jQuery lib is compressed from around 30k to 15k – means 50% less data transfered.
( )Formaldehyde January 28th
great tips!
( )Shane January 28th
Interesting point about parallelism when downloading JS files (or any type of files for that matter) from multiple servers.
Thanks for the tips Jeffrey.
( )RealToughCookie January 28th
Yet again NetTuts speeds up my development time!
I didn’t know about code snippets in Dreamweaver, what a fantastic tip.
Cheers guys
( )Zen Elements January 28th
That is one fantastic article with too many helpful resources! While I’ve got a few already, I’m coming back to this to get some more. The CSS Compression Services especially, I have bookmarked!
Thanks!
( )Alex | Zen Elements
Benjamin January 28th
Fantastic post, lots of useful information. Thx.
( )hellKat January 28th
Code compression rarely reduces enough bloat to be worth it. And it’s detrimental to noobs wanting to learn off of the code of others.
( )Wayne January 28th
Wow, helluva post. Thanks.
( )Paul Carnevale January 28th
When working on Drupal sites or other PHP projects, I use Aptana Studio (http://aptana.com). Otherwise, it’s PSPad (http://pspad.com).
( )trex279 January 28th
Really awesome post. Thanks for all the tips.
( )Youssef January 29th
Very Coool article!! waw!! i never read like this cool article before
( )Farooq January 29th
smushit and google CDN i really like these things coz i was facing last time image compression problem no i can solve it easy.
( )logos January 29th
very nice. Thanks. Keyboard shortcuts stood out to me because that is something we all should know better. Overall it save a lot of time. thanks again
( )Philips T January 29th
Good tutorial…
I think it useful for my adsense blog….
thx nettuts!!!
( )Mike January 30th
Your post are the best and very useful
( )max January 30th
rocking tut !
( )Da Void January 30th
smush didn’t really do a lot.. only 1.45% reduction of my image (jpg).. but for the rest great TUT !!
Keep it up !!
( )Meshach January 30th
Awwwwwwwwwwwwesome Jeff!
( )Ann January 31st
Verrrrrrrry helpful. Nice Meet Joe Black reference!
( )Amr Elsehemy February 1st
Very useful post thank you.
( )João Pedro Pereira February 1st
Very usefol post, unfortunatelly lots of web developer’s don’t have good practises when developing and that makes “web slower”.
( )lotoli.net February 1st
i will use it on my web site(http://lotoli.net) also translate in turkish..
it is really good artcile thanks
( )Adam Casey February 2nd
anyone had a problem with smush.it? I just get the message that it’s smushing and nothing happens. I’ve tried the firefox plugin as well as uploading 1 file and uploading 35 files.
If anyone has used this successfully can you let me know how long it took for the images to be processed?
( )rp February 4th
super duper. Thanks.
( )webbo February 5th
So many good tips, thanks.
( )kevin February 9th
Thanks a lot for all of these. Been using the Web Developer toolbar and Firebug for a whilw now. One question, you mentioned: “The latter simply contains a blank “default.css” file, and my own custom reset file.”
( )I’m really getting into coding and developing and am wondering what exactly is your “reset file” and what code is in it? Is there another tutorial you could forward to me to learn. Much appreciated.
Jarek February 11th
Many thaks dor all tips
( )soso February 17th
Great post, very technical but so simple!
( )Maybe a little more precision about what is a CDN might help the newbie.
Sergey Belov April 6th
This may help for optimise website speed – http://itezer.com/blog/php/27.html
( )viralpatel April 23rd
Very useful information. You may want to check this tutorial to Compress JavaScript, HTML, CSS all together.
( )http://viralpatel.net/blogs/2009/02/compress-php-css-js-javascript-optimize-website-performance.html
John June 19th
Thanks, this article actually made me look closer to realise that i can actually use firebug with firefox 3
( )landrik June 22nd
ooh where would i be without you!!….:) kewl artico
( )hasfa July 5th
Nice and Great Tips..full of Info..
( )Thanks
AskApache July 22nd
Some great and useful tips here Jeff, really enjoyed reading thanks!
( )deadwin November 5th
Hey thanx buddy..this article is really very good for any web developer.
( )devyfriend December 3rd
cool advice … teacher
( )chandan December 28th
good roundup
( )Jaan December 28th
awesome
( )MasEDI - Blogging Tips December 29th
great job, usefully tips to optimize and faster my blog
( )jmarreros January 1st
great tips here, thanks.
( )Ron Arts Web Design January 27th
These are some really good tips. thanks for sharing such an informative article.
( )