Grow your CSS skills. Land your dream job.

#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:

Comments

  1. Permalink to comment#

    Hey!
    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. _John_
    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. Great talk!!

  4. Sarbbottam
    Permalink to comment#

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

  5. 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. 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. richarde
    Permalink to comment#

    Chris,

    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. Ben
    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. Mark
    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. 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?

  11. 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. Very informative and pretty funny too lol

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

  14. Permalink to comment#

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

  15. 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.

    PS..
    Plus I love jQuery also…

  16. Permalink to comment#

    Awesome episode. Awesome re-design. Awesome…

  17. 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. 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. Gurnzbot
    Permalink to comment#

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

  20. 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. 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.

    Great…..

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

    Any suggestions ?

    • 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.

      Tyler
      gzipWTF

  22. 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.

    • 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?

    • 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. really great tips for you daily loyal reader…..i am really getting a lot tips from this website!!

    Thank you everyone!!!

  24. Permalink to comment#

    Very informative Thank you very much

  25. 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. Permalink to comment#

    OK, got it fixed. Thanks.

  27. Permalink to comment#

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

  28. 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. Vipul
    Permalink to comment#

    very nice…

  30. Abean
    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. 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. Bryan
    Permalink to comment#

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

  33. Paddy
    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. Paddy
    Permalink to comment#

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

  35. 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. 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. Jesus
    Permalink to comment#

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

  38. srigi
    Permalink to comment#

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

  39. 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.

    Cheers

  40. Cristian Balint
    Permalink to comment#

    Awesome Chris
    Thanks

  41. 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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".