Quick Tip: Improve Site Performance in 3 Easy Steps
Tutorial Details
- Topic: Site Performance
- Difficulty: Basix
- Tut Format: 4 Minute Video
Download Source Files
We all know we should do it, but how many of us do? I’m talking about minifying JavaScript, CSS, and optimizing images to reduce load times. Today, I’ll show you three quick and easy methods that all of us should implement to improve our site’s performance.
Subscribe to our YouTube page to watch all of the video tutorials!
So what other techniques do you use to improve load times?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
You should probably also mention that serving those files from a cookieless domain would help to reduce page load times, plus, if you serve the files from a couple of domains/subdomains, then you can speed up load times because it’s downloaded in parallel.
Good advise. Thanks for the quick tips.
Can you post the links to the services you used to compress all the files?
Great quick tips gotta try this one ..
Great video. Could you explain what Smush.it does; how does it minify images exactly?
Hi Benny,
I used Smush.it to compress the file size of the images. If you think your images used or consume big file size, why not to try Smush.it first so that you will notice the difference. :)
Nice! Thanks for sharing! I need to use these…
Good quick tip,
but CSS after compression looks so wierd and it’s hard to edit it later, or to understand by other people. I mean this can help you a lot but also can dmaage your organized site code.
Thats just my opinion, but tip is really usable when site can be compressed by 30%!
This is true, but all you have to do is include the original commented css, you can always refer back to it, make changes and compress the updated file. If anyone needs to see the files / comments, you can send them the original. Not much hassle for the savings gained.
Like Gavin mentioned you just use the uncompressed code to make changes. That’s the hole point of saving a .min.css version instead of just overwriting your uncompressed version. Also, if you ever do somehow lose your nice uncompressed css you can run it through a css beautifier like http://www.codebeautifier.com/.
You can also use apps like Coda. Coda makes it easy expanding such compressed css-files.
With about 1 to 2 clicks and you are back on the road of a uncompressed code with code beautifying (tabs etc.)
You also can compress with coda. I thing that functions are implemented in other applications too.
Sorry for the bad english ;)
Greets from Germany
GorillaWma, that is why he saved it as screen.min.css and NOT screen.css.
You put all your pointers a the min.css and upload that, while keeping the uncompressed version on your local machine for any additions/editing you need to do later.
I’m not being an ass or anything but i can’t believe you got paid for this =/ (if you got paid for this.)
But as people have said, it squishes up your css and js for that matter, making it a massive pain in the ass to edit. It’s 2010, people have high speed broadband. Lowers the file size of css or js doesn’t really matter.
Your not being an ass, just displaying how inexperienced your are. :D
He has a point, we really don’t need to be doing this, and I am experienced, as Anto said above, we are in 2010, making a site loading a fraction of a second, or a few seconds, provides no major benifit, squashing your code is pointless to be honest.
and $50 for a quicktip :)
I would say that BECAUSE people have broadband is exactly why it matters. People expect websites to load very quickly. If they don’t, people will leave. This is part of what has made Google successful. While the other search engines were playing around with the design, Google was busy making a product that worked, and worked quickly.
Sending files compressed (gzipped compression as well) makes a huge difference. Think about it like this- If every developer, every language started saying “It’s 2010, the system architectures are much more powerful than 20 years ago, I don’t have to optimize any more”, things would begin to slow down.
There is a reason that so much effort has been put in to learn how to effectively speed up a site for the end users. It makes a difference.
Since there are a lot of mobile device user – some of them without HSDPA/WIFI/UMTS (or any other fast connection) – it DOES matter. But you could also turn the question: Why NOT shrink the css/js code? Managing different files and code versions isn’t any problem with, for example, github.
Plus, don’t forget, page load speed is part of Google’s algo now, if it’s too high you can get penalized in Google.
If your concerned about editing files, use something like Minify (http://code.google.com/p/minify/) which compresses multiple files on your server into one on the fly and then caches it. This way you have the best of both worlds.
Minifying CSS and JS has significantly sped up my sites where I use it. When I want to edit the CSS or JS, I just edit the original, un-minified files, then run them through the minifier and upload them again. On site where I use a CMS, I use third-party extensions that minify the files on the fly which allows me to edit the original, un-minified files whenever I want. Win-win. :)
A simple php script takes all your files and combines/compresses them.
This allows you to edit the nicely organized file, and reap the benefits of combine/compress.
http://gist.github.com/491083
(This isn’t my script, it’s pieced together from various parts of the internet :D)
Hey Buddy Ol’ Pal!!
Nice script. Definitely going to use this in every project from now on. Thanks!
Hey Thanks,
be sure to spread it around though, hopefully it gets back to the original author!
MOAR PYTHON?
That may be true on the user’s side, but you also have to think of it from the other way around. Having your site hosted also means you have to deal with bandwidth.
Sure, if only a small amount of people view your site, and they all have a high-speed connection, then this does not make a difference. But if you have a high traffic site, then every time someone views it, it uses some of your alloted bandwidth. At thousands, hundreds of thousands, or millions of views these types of performance enhancements will help both you and your users. You won’t have to pay as much for bandwidth, and your server will better handle the amount of users on your site.
Every little bit counts!
As for text files I wonder what the added benefit is to gzip.
For small sites I think there is not much to gain anyways with minifying these files other than big libraries.
Image compression is a different story and makes a huge difference. As for putting thought into your design that always for smaller/less images.
BTW: you don’t actually edit compressed files. You keep the original.
Wow, clearly haven’t had my coffee yet.
Correction: So does putting thought into your design that allows for smaller/fewer images.
You do this for your production-ready codes/images not the stuff that’s still edited every now and then.
That’s a fairly ignorant assumption that everyone has high speed internet. I live in the woods and have to use satellite internet, which pretty much sucks, so every kb saving is a huge savings to me. Not to mention I also have a monthly bandwidth cap.
Then of course there all the millions of people using cell phones.
And then if you’ve got thousands of page hits per day, those couple of kb’s will really start to add up.
Thanks! Is there a way to have this done automatically on the server? So I can update my readable CSS or Javascript files, and some script on the server will automatically dump out compressed versions?
Yes
Yes. Some content management systems (like Drupal) will do this if you enable the caching options. If you aren’t using a CMS, you can do this with various gzip and compression scripts.
From my experience, if you try to gzip a CSS document, IE6 won’t play nice. You may not care about IE6, but I still support it, because I still see IE6 users coming to my site. Yes, I wish IE6 would die, but it’s still alive and kicking.
What tools will do this with a static site? I’m not working in a CMS so I can’t really take advantage of any CMS plugins.
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Dom – thanks for the link. Love the Apache script for GZip. :)
thanks nice tutorial
Is it possible to mini fie your html and php codes also??
Minifying your PHP won’t really do anything. The reason that you would minify and compress is to create a smaller file size to send to the client’s machine. Since the PHP is never sent (or shouldn’t be) it would have no other effect than making it difficult to read your code.
If you want to speed up your PHP, check out a caching mechanism, such as APC.
Yes he’s right but that doesn’t mean you can’t learn to write better code. That will probably be the biggest factor in improving your PHP performance.
Short but sweet.
Thanks.
Standard stuff, but useful to inexperienced anyway.. And anyone who says this is useless is a retard. There has been so much research done on user experience vs. load time and it always turns out that a site that loads 2 or 3 seconds faster will get way more favor than a slow one. I can’t count how many times I got bored with waiting for a site to load and went to the next link on Google (as I’m sure everyone else has too).
So far as other techniques?
- Have Apache (or PHP) GZip everything.
- Use a CDN (RackSpace “Cloud Files”). They are so unbelievably cheap it seems silly to host any media files anywhere else…
- Not only should you minify/pack .css/.js, but you should combine all your .css (and .js) files into one. Remember hierarchy though – for instance, if you have reset.css, text.css, style.css, you might want to put reset first, then copy/paste text under it, then style under it -> Then Compress!
This cuts down on the amount of “HTTP Requests” your server and the client are throwing back and forth.
There is also something called CSS Sprite’s (http://www.alistapart.com/articles/sprites) where you combine all your images and then call them as background images in your .css by defining their X and Y positions.
I’m guilty of never doing this, but if there was some sort of generator out there that told me the x/y coord’s and width/height of images, I might start making it habit.
I’d actually like to see this tutorial be a two parter, followed up with a 2nd quick-tip video explaining how to GZip, CDN, and CSS Sprite things.
CSS Sprite Generator
http://spritegen.website-performance.org/
A google search seems to bring up many alternatives to that one so now you have no excuses :P
I think everyone should be utilizing those sprites as it makes a pretty big impact in my opinion by saving HTTP Requests for more important stuff like content and javascript/jquery calls.
Yeah, but it seems like such a hassle. :)
In your experience, is it?
Adding a few lines of code to the .htaccess setting the expires-header to a far future and enabling gzip compression also saves some bytes.
More tips on optimization can be found at http://developer.yahoo.com/performance/rules.html
Could someone clarify how to add that expires header thing? I remember trying to do it but getting stumped a few times.
This website hast a lot of tips: http://www.askapache.com/htaccess/apache-speed-cache-control.html
Thanks for the tips. It still surprises me that people keep on saying: “we have broadband now”.
I guess that’s the kind of mentality that creates awfully unoptimized software: “we have ghz’s processors now, let’s let’s just all of them” Aside from the fact that minifying can improve load speed, it can also cut down on bandwidth usage, and for a high traffic website, that can count a lot.
As a personal preference, for more complex JavaScript, I prefer using the YUI Compressor. I believe it gives a much better compression ratio.
* let’s just use all of them *
sorry
Very true, this mentality destroys the world.
Why minify the gas consumption ? We have enough for today. But when you look closer, you see that small things move the big mountains.
It it expected that the traffic of the Internet will rise to Zetabytes in 2014 ( that’s 2048 exabytes, i think )
How do you expect to continue the internet if it keeps reaching enormous sizes ?
As any good developer should do, I always keep a backup copy of a website in development version ( uncompressed )
I think we all start off not optimizing at first but you start to learn the valuableness of doing so as you become a more tenured designer or developer. Not only do you save on bytes for a client or yourself, but you save money, time, and preserve wasted bits on the internet.
Although I feel this solution is fairly simple, we need a much more automated one click type solution for lazy people who don’t want to spend 3 minutes optimizing their sites.
I’m honestly amazed that people even brought the fact that the code would be hard to edit. He CLEARLY saved the compressed code for when the site goes live, and saved the original code to edit.
And to be honest its wonderful that developers are able to get $50 here and there for sharing their knowledge. When I started doing web design there was NOTHING like this out there! Kudos for the tips and don’t spend it all in one place!
-Mars >::-)
LOL @ Retards
Seriously, I’m starting to see why there are so many entry-level tutorials on tuts+, apparently there are a lot of complete morons (or newbs) that visit this site.
Compressing CSS/JS makes a noticeable difference if you’re dealing with any decent level of traffic. Further, nobody is saying you have to dev in compressed code (duh!) You dev on uncompressed, upload compressed. Most companies (who know their ass from their nose) will have an SVN workflow in place that will do this automatically so that the dev doesn’t even have to worry about compressing the code.
RE: “you should combine all your .css (and .js) files ”
This is generally true, but remember that threaded downloads can be a huge help in making a page download quicker. Sometimes page loads are actually faster when keeping CSS/JS separate. But this is very site (and traffic) specific.
You mean by dispersing your .css/.js files amongst different domains? What’s that called? Paralellizing downloads or something?
It makes sense that if your server has to serve 1 file before it can serve another, it will be slower than pulling from several different servers.
I’ve heard about that technique and you can actually make sub-domains for your site and put your files there. Which still seems to me like your server would be “serving” in a queue.
But anyway, the thought is something like this (for the confused):
1) foo.com is getting a lot of traffic and has 2 stylesheets.
2) They take their 2 stylesheets and put them on 2 subdomains they’ve made: media1.foo.com and media2.foo.com
3) Now, instead of the server sending an image to a visitor, then another image to a visitor, then a stylesheet, then another stylesheet, then JavaScript, then blah, then blah, then blah – the server will say “QUICK! FETCH CRAP FROM EVERYWHERE ELSE WHILE I FOCUS ON THESE NON-CDN’d IMAGES!”
http://code.google.com/speed/page-speed/docs/rtt.html#ParallelizeDownloads
http://drupal.org/node/685774#comment-2518764
Seems like overkill for small sites, but if it’s your portfolio or something, it might be worth the extra work.
Yeah, and those morons and newbies are tomorrow’s billionaires, they might have and ideea that we never had.
Why the racism about basic quick tips ? The 50$ envy ?
Slowly it makes you, as a tutorial writer, to stop showing people things for free. But we still do it !
I know the devs and flash programmers are very “exclusive” with their knowledge, but it’s not the case anymore.
It’ just the old habit of thinking: “I have to step on dead bodies to achieve Nirvana”. That’s the kind of thing that bought us all our problems.
There is another way. But few people see it and do it.
I think is a great tip. And sorry for the bitter comment, I just got back from the train :)
Uh… what?
To those who think it’s not necessary to compress files because of the fact that people are on broadband, imagine this. Most Fortune 500 companies have to pay for the bandwidth their website uses.
Let’s take Google for example, pretend their home page was 2K, un-minifed (js, css, images, everything). Let’s say for sake of argument that they have to pay $1000 dollars per GB of bandwidth and they have 5 million hits a day.
That’s about 10GB of data or $10,000 a day of bandwidth.
Let’s say you minify their css and cut it down to 1K, now you’re down to 1GB or $1000 a day of bandwidth
Which means in a day you save around $9,000 d day and in a month around $270,000, which is significant money for any businesses.
Hey great tips. I will use smash it for my website thanks for video :)
Great tips – I used to use a PHP minifier which minified scripts and css files on the fly… It’s perfect because it allows you to make changes from your end in a readable format but still load in a minified format on the users’ end. Have a look: http://code.google.com/p/minify/
Hey matthew good idea to developers and also this is very useful for internet marketing purpose.. So that peoples can reach our website by omitting waiting for long time to load the page…. Good one but i have worked with smushit it’s not working as you shown in the video.. Don’t know what’s the problem with smushit and to my PC.. Lol
Keep going will return for another usefull update like this. Thanks for sharing this information with us..
Venkatesh – Gulfwebstudio.com
Just for those doubting the necessity to enhance performance:
At Amazon, every 100 ms increase in load time decreased sales by 1%…
And just to point it out again, the author compressed only a few images and gained 14k of space thanks to this lossless compression, imagine what you could gain with all the images of a website (including photos, banners, etc.)
Even if this are quite no brainer tips, they are still useful for people not aware of this performance enhancements.
Hm, “nice” tips. But, why use “manual hands on”? Why don’t use a PHP Script, which generates a compressed copy from the original, saving timestamp of the original file and recache the minified version when the original was edited? Big goal: You can use as much javascripts and css files as you like, the php script compresses them into a single file – full automatic.
So – this posting makes no sense. If you really want to teach all the “noobs” here how the advanced users are working, than you have to tell them that there are advanced and way better techniques.
And: This tips are pointless if the webserver is not optimised. If you really want speeding up a website, its at first essential to optimize the webserver. In most real-world-cases you see nearly no difference between compressed and uncompressed scripts. Primarily this is absolutely true, if you use expire headers.
Great tip! However, I prefer using a server language to do this dynamically! :)
so simple and often over looked. thanks!
But what happens if you have to do a quick change in the code? Cause the compressor basically just tok out the spaces and wright everything in one line you can’t read it properly.
So you have to go back to the master file and do the compression again …
It’s al little complicated I think …
Wow. You can’t be serious. Please read through the rest of the comments.
Anyone here tried Smart Optimizer? http://github.com/farhadi/SmartOptimizer
I have been using it for a while, but I’m wondering if its the best solution out there for site optimization with PHP? The code hasn’t been updated in a while, so any solution that is being more often would be welcomed ;)
honestly how many times can this topic be posted under different headings ? its almost like a twitter feed now LOL
it nice to repeat a good thinks
Great tip!
thanks
For WordPress use W3 Total Cache plugin.
I can do most the stuff shown within TextMate using the YUI Compressor bundle.
For image compression I generally use the google page speed add ons but I think it also makes use of Smushit anyways.
We are serving from several cookieless domains. All CSS files are combined to one file and minified, all JS files are combined to one file and minified, all graphics are compressed with the help of Google Page Speed and we are serving content from different cookieless subdomains.
The results are really worth all the work. Google Page Speed Score 95/100.
Too bad AddThis and Facebook are totally unable to serve combined/minified content.
I wrote several posts about optimizing content to increase the loading speed of websites.
it squishes up your css and js for that matter, making it a massive pain in the ass to edit. It’s 2010, people have high speed broadband. Lowers the file size of css or js doesn’t really matter.
don’t have account..
cant see… :(
Honestly, I can’t believe this is even a tutorial. Anyone that uses Dreamweaver should not be giving any kind of web tips.
For one, if you use a proper tool, you can compress the CSS within the program, like Textmate. Which actually compresses and leaves the CSS legible.
For JS, if you actually write proper clean JS you should not need to worry about compressing it. If you are using a library you should be using the min version anyway. If you do have massive amounts of JS you should consider what you are doing with it and why.
Smush-it is the only good recommendation out of this tutorial, but then again if you properly save the files within say Photoshop then you have a pretty high enough compression, ie PNG-8 instead of GIFS.
There are absolutely great reasons why you should count every KB for a finished site, ie Google Rankings based on load times of sites, but offering tips that take more time and aren’t really efficient shouldn’t be one of them.
Any good compression tool for wordpress. I have heard minify plugin. But if you have any other idea much better.
Thanks for the great sharing!