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:
- HTML5 Boilerplate
- gzipWTF.com
- Billy Hoffman – Zoompf.com
- Steve Souders – 80/20
- Paul Irish
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!
I, too, would like to know this.
http://www.myfonts.com/WhatTheFont/
great resource!
I tried that tool, but it doesn’t found the correct font…
I’m pretty sure the font he is using is Neutraface, but I could be wrong.
http://www.houseind.com/fonts/neutraface
To find fonts on any site, use this plugin. http://chengyinliu.com/whatfont.html
You highlight the text that you want to grab, then it will tell you font size, style, color, ect.
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…
Great talk!!
Gzip might hurt the performance if Anti-Virus is installed.
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?
confident feelings
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 :)
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…
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!
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.
Correct, that’s not good enough. =)
He’s standing up remarkable
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?
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.
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.
:)
Very informative and pretty funny too lol
I am new to CSS but this is a great trick, I am surely going to try it.
Thanks man. It great advice for improving my sites..
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…
Awesome episode. Awesome re-design. Awesome…
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.
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!!!
Thank you for ImageOptim! So easy to save 10-60% on image sizes :)
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.
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 ?
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
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?
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.
really great tips for you daily loyal reader…..i am really getting a lot tips from this website!!
Thank you everyone!!!
Very informative Thank you very much
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?
OK, got it fixed. Thanks.
Haha, I like this guy! I’m definitely coming back here for more!
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?
very nice…
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
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. :(
Nevermind I’m an idiot… Im new to all this server lingo. My godaddy account is IIS, not Apache… I got the appropriate web.config files from h5bp. Its working now. Confirmed in Firefox.
Great video, but didn’t need the 10 minute intro :)
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!
Whoops the PHP code is ob_start(“ob_gzhandler”);
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?
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
In resume use yeoman , be modular , use requirejs, use the CDN.
Just seek to 27:02 for best moment of the screencast! Made my day :D
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
Awesome Chris
Thanks
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