#114: Let’s Do Simple Stuff to Make Our Websites Faster

I present four really simple things you can do to make your websites faster. Nothing even as complex as making image sprites (which ain't that complicated). These are all easy wins with big possible performance gains. Plus, we handle a "Performance Troll" at the end.

Links from the video:


  1. User Avatar
    Permalink to comment#

    Really nice tips to improve our website performance!

    p.s: Can you tell me wich font are you using on this presentation/keynote? I really loved it!

  2. User Avatar
    Permalink to comment#

    Really awesome screen cast Chris. Gotta tell ya, i loved the end where you say “Is that a 2mb image of scorpion repeating, are you kidding me”.. Ohh i love it…

  3. User Avatar
    Matias Mancini
    Permalink to comment#

    Great talk!!

  4. User Avatar
    Permalink to comment#

    Gzip might hurt the performance if Anti-Virus is installed.

  5. User Avatar
    Permalink to comment#

    Hahah awesome. Another great video! I especially love the group pinkie swear. Can copy / pasting that HTML5Boilerplate GZip stuff interfere with some WordPress caching plugins? Or is it usually safe to do both?

  6. User Avatar
    Daniel Krsiak
    Permalink to comment#

    Hi Chris,

    nice screencast.

    I am glad I already use all these techniques for like 2 years or so.
    The part “Is this your site?” was nice and the dog after that jsut got me laughing :)

  7. User Avatar
    Permalink to comment#


    I love your screencasts, expertly done and easy to understand and follow (the most important part..!)

    The early sneak-peek to you’re upcoming redesign was a nice touch too. Plus I love CodeKit too, a great tool that does so much for such a little outlay..

    Looking forward to the next screencast, keep up the good work…

  8. User Avatar
    Permalink to comment#

    Once again, an absolutely brilliant screencast/ tutorial/ awesome video… I think you deserve a new moniker for these… like Tut-cast? Does that sound like a weird porn site?

    Anyway, thanks for all the videos and tips etc.

    You keep helping me improve my skills! Thank you!

  9. User Avatar
    Permalink to comment#

    Great stuff Chris,
    I shall have these techniques on a big post it note next to my screen headed “For every website!” One question though, I always export my images optimized for web through photoshop, is this not good enough, do I still need to run them through something like codekit afterwards? Cheers.

  10. User Avatar
    Permalink to comment#

    Nice talk. So i have this question- the .htaccess stuff be in a seperate .htaccess file in the WordPress theme or the htaccess fle located in the root of our website?

    • User Avatar
      Permalink to comment#

      the .htaccess belongs in the root directory. You could install a Plugin called WordPress SEO by Yoast which is pretty neat and you can edit this .htaccess file in the settings.

  11. User Avatar
    Arlen Nagata
    Permalink to comment#

    Hi Chris,
    I’d love to combine all my js files, but I’m using WordPress and each plugin calls it’s own files. Is there any quick and easy way to do it? Seems like a real pain when dealing with plugins and things like that.


  12. User Avatar
    Brandon Beeler
    Permalink to comment#

    Very informative and pretty funny too lol

  13. User Avatar
    WordPress Review
    Permalink to comment#

    I am new to CSS but this is a great trick, I am surely going to try it.

  14. User Avatar
    Permalink to comment#

    Thanks man. It great advice for improving my sites..

  15. User Avatar
    Permalink to comment#

    Thanks for such great information! As a photographer trying to keep image quality good that is always slowing down my page load. I use Linux and thank to this post, I found and image optimizer called Trimage it cut my home page down around 200kb.

    Plus I love jQuery also…

  16. User Avatar
    Permalink to comment#

    Awesome episode. Awesome re-design. Awesome…

  17. User Avatar
    Permalink to comment#

    Thanks Chris this is great stuff, as always. I think this is even more important with the latest Google Algorithm. They’ve been banging on about page speed for a while, and now above the fold – so it’s a great time to incorporate your ideas.

  18. User Avatar
    Roma Serebryakov
    Permalink to comment#

    Awesome tip! Hey Chris, do you know if there is a way to use Boilerplate in WordPress? I have been looking at using Boilerplate in my new blog site, but I use WordPress as my main platform around it. Thanks!!!

  19. User Avatar
    Permalink to comment#

    Thank you for ImageOptim! So easy to save 10-60% on image sizes :)

  20. User Avatar
    Osama Shabrez
    Permalink to comment#

    Great tips!

    I am gonna try these on my WordPress installation now. Hope things will be much better then my current setup. I am on 78/100 google page speed score and that’s killing me inside.

  21. User Avatar
    Permalink to comment#

    So i ran some of the suggestions, added the gzip compression to my site and ran the gzipwtf test, came up all good gzip enabled on all files.


    Refreshed the test in PageSpeed and it still says Enable Compression, i am now getting this conflicting information…. what now ?

    Any suggestions ?

    • User Avatar
      Permalink to comment#

      Hey Mitch,

      Glad you found our service (gzipwtf.com) useful. Not sure what’s causing the conflicting information, but can you send me over the URL to your site and I’ll take a look?

      If gzipWTF is showing “gzip” for a resource file, it means that it’s seeing the encoding in the HTTP header response. While it is technically possible the headers could be sending back incorrect encoding information, it is very unlikely.


  22. User Avatar
    Joseph Twumasi
    Permalink to comment#

    PageSpeed is really important whwn it comes website performance and your site visitors will at the same time will love to back to visit it. Gonna apply to it to improve my website performance.
    Nice video Chris.

    • User Avatar
      Joseph Twumasi
      Permalink to comment#

      Sorry Chris one more thing Awesome website. But it doesn’t show well in IE7, 8 why is because most users are not IE7,8 users?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      As of v10 of this site I’m only supporting version 9+ of Internet Explorer. Traffic was 2.5% for IE 8 before the launch of it. Probably a little high in general to drop it, but I’m OK with that. If I was an eCommerce website, I probably wouldn’t have.

  23. User Avatar
    Aditya Chintha
    Permalink to comment#

    really great tips for you daily loyal reader…..i am really getting a lot tips from this website!!

    Thank you everyone!!!

  24. User Avatar
    Permalink to comment#

    Very informative Thank you very much

  25. User Avatar
    Permalink to comment#

    Um, so I tried doing the htaaccess trick here via FTP, and I ended up destroying my site. Where can I get a new htaaccess so that I can at least get back onto my site?

  26. User Avatar
    Permalink to comment#

    OK, got it fixed. Thanks.

  27. User Avatar
    Permalink to comment#

    Haha, I like this guy! I’m definitely coming back here for more!

  28. User Avatar
    Josh White
    Permalink to comment#

    Ok so hey I’ve got a question. I’ve been looking at (MT)’s lack of gzip and they write that they use a :much more flexible” solution called “mod deflate”. Not being an .htaccess guru or anything, I’d never heard of it, but it makes me wonder: what other compression solutions are out there and are they really good alternatives?

  29. User Avatar
    Permalink to comment#

    very nice…

  30. User Avatar
    Permalink to comment#

    Love this presentation watched it more than once and I am big fan of web standards.

    I just saw website completely built with tables and and big chunks of images, uses image maps for navigation. This site scored a 92 on google page speed plugin for chrome, is about 800kb to download and maybe 10 http request.

    Aside from the awesomeness of using these great technologies like the ones you mentioned in the presentation, what real benefit is there for the user, if the site is built on tables or HTML5/CSS3 ?

    Thanks and keep up the awesome work

  31. User Avatar
    Permalink to comment#

    I’m using the gzip code from h5bp… but gzipwtf is still coming up with “No” for most of my files… I’m using Godaddy hosting, if that helps. Not sure what’s going on. I just copied/pasted it just like you said. :(

  32. User Avatar
    Permalink to comment#

    Great video, but didn’t need the 10 minute intro :)

  33. User Avatar
    Permalink to comment#

    One of my clients has a site hosted on one.com which doesn’t provide mod_deflate at all on their apache servers. I’ve managed to gzip my HTML content by adding to the top of my header PHP file (it’s just a home-made site – no CMS) but when I check gitwtf all of the css and js files are still being sent without gzip. Is there any way to enable gzip without access to mod_deflate?

    Great tips for improving performance though, I reckon I’ll shave around 40-50% off my client’s images on one project – he has hundreds!

  34. User Avatar
    Permalink to comment#

    Whoops the PHP code is ob_start(“ob_gzhandler”);

  35. User Avatar
    Permalink to comment#

    Chris- You rock! I love your screencasts. You have taught me so much.
    My question…I customize WordPress themes quite a bit and the themes have folders of js items like superfish, prettyphoto, recaptcha, cufon, etc… How should I handle all the .js in these various components. Is there anything I can do to reduce the number of requests other than minify within each folder item?

  36. User Avatar
    Permalink to comment#

    Thanks for making this video! I’m going to watch this again and again… I didn’t know what gzip was until this video. I installed that wordpress plugin you recommend and also instead of using separate .js files for stuff like google analytics, crazyegg and special stuff I just stuck all that js in my footer. I need to get to the big Sprite image at some point however X_x

  37. User Avatar
    Permalink to comment#

    In resume use yeoman , be modular , use requirejs, use the CDN.

  38. User Avatar
    Permalink to comment#

    Just seek to 27:02 for best moment of the screencast! Made my day :D

  39. User Avatar
    Permalink to comment#

    Awesome vid Chris

    Does anyone know of a tool or plugin for sublime text 2 that will combine js files?

    Working on windows so trying to find a codekit equivalent for this.


  40. User Avatar
    Cristian Balint
    Permalink to comment#

    Awesome Chris

  41. User Avatar
    Permalink to comment#

    Thank you SO much for this video. I always struggled with HTML5boilerplate. We just relaunched a site and git it down from about 8 to 10 seconds, to 1.4 seconds. Total site load is about 150kb with Gzip (custom fonts included!), 6kb primed. Got an A in yslow, and 95% in Pingdom tools. (To put that in perspective a friend of mine works at HalfBrick and he got a 95 on Pingdom as well, but he has 1.6mb of images so his is a bit more impressive – his servers are leet).

    The main tools I recommend that I used are:

    PNGPanda – Nearly my whole site uses 1 big ass sprite (http://www.goldencarers.com/assets/img/skin/sprites.png). If you export with Fireworks I get about 110KB, when I use PNGPanda it’s down to abotu 30KB. It’s an unbelievable free service
    Lossless File Size Optimizer – OMG, this tool. It not only works on JPEGs, PNGs, GIFs, Bitmaps, etc, it works on PDF’s and Word Documents. We have hundreds of file downloads on our site, and it compressed it by an INSANE amount. More of the PDF documents went froma botu 1.5 meg to about 100 or 200 KB. JPEGmini is another great tool but you have to pay for it if you want to compress more than 20 minutes a day.
    end rant

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.