Want happier website visitors and higher rankings? This week's Whiteboard Friday is about how and why to speed up your website. It is more technical than previous videos so I tried to spice it up with an ode to one of my favorite canceled TV Shows, Pop-up Video. Can't stand the content? At least the added commentary is entertaining. (It is the perfect plan ;-p)
7 Ways to Take Advantage of Google's Site Speed Algorithm
The following are seven proven techniques well known websites use to boost their site speed.
1. Enable Gzip
Gzip is a open source compression algorithm that can used to compress your website's content before your server sends the data to a visitor's browser. This makes your servers job easier and makes pages load faster for your users. You can learn how to enable Gzip here.
2. Minify Javascript/CSS
Minify is the process (and software) for removing unnecessary formatting characters from code. This makes your files smaller and your visitors happier. You can learn all about this process here.
3. Use a CDN (Content Distribution Network)
CDNs are systems of interconnected server resources that spread content and assets around the globe to shorten the distance between server and prospective user. They are commonly used by the Web's most popular websites. You can find a list of free CDNs here. Note: This is not a tip for beginners. Working with CDNs gets complicated very quickly.
4. Optimize Images
You can take advantage of the countless man hours that have been devoted to image compression and make your users happier by simply saving your images as the appropriate type. As a very general rule of thumb, I recommend saving photos as JPEGs and graphics as PNGs.
5. Use External Javascript/CSS
When a browser requests a website from a server it can only download a set number of files of the same type at any given point. While this isn't true of all file types, it is a good enough reason to host applicable files on alternative subdomains. This is only recommended for sites where the pros of speed will outweigh the SEO cons of creating a new subdomain.
6. Avoid Using Excess Redirects
While redirects can be extremely useful, it is important to know that implementing them does force your servers to do slightly more work per applicable request. Always avoid redirect strings (301 -> 301 -> 200 or even worse 301 -> 302 -> 200) and use these tools sparingly.
7. Use Fewer Files
The most straightforward way to speed up your website is to simply use fewer files. Less files means less data. My favorite method of doing this is utilizing CSS sprites. You can read how popular websites are using this trick here.
Google's Mission to Speed Up the Web
Fueled by the massive potential of the Internet, Googlers are working on many projects in their attempt to speed up the Web:
- Rewriting Internet Protocols - Starting at the foundation, teams at Google are rewriting the protocols that run the Internet in order to get faster performance.
- Creating a Public DNS - Google recently released a public DNS resource to help speed up DNS calls.
- Providing Fiber-optics for the Public - For a select few cities in the United States, Google will soon be offering ultra high-speed broadband networks for consumers.
- Encouraging Webmasters/SEOs to Speed Up Their Sites with a New Algorithm Update - Google spilled the beans about their one new aspect of their ranking algorithms by saying that site speed is now a ranking factor. This post explains how to take advantage of that.
Follow me on Twitter, Fool!
or
Follow SEOmoz on Twitter (who is slightly less blunt)
If you have any other advice that you think is worth sharing, feel free to post it in the comments. This post is very much a work in progress. As always, feel free to e-mail me if you have any suggestions on how I can make my posts more useful. All of my contact information is available on my SEOmoz profile under Danny. Thanks!
I was experimenting with this yesterday Danny, and I came across an IE6 error with g-ZIP. It seemed to take 'forever' to load the page. Granted, there aren't so many people that still use IE6, but the percentage of users that visit my client's websites is high enough for me to care.
There's a simple re-write that you can add into your .htaccess file,
Here is the coding I used,
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATEbtext/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATEapplication/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.[0678] no-gzip
BrowserMatch \bMSIE\s7Â !no-gzip !gzip-only-text/html
This seems to fix the IE6 error, and speed up the loading process for IE6 users.
By the way, why'd you postpone your book? I was looking forward to it! I still am, don't get me wrong.=)
Great trick. This is yet another reason I am excited for the world to be done with IE6 ;-p. Do you have a link to any more documentation on this?
With regard to the book, the publishers are launching a new series and wanted to use the book as the first release. This changed the scope. It is looking good thus far and should be out by the end of year.
As it's always best to site sources, I can't believe I didn't. Don't turn me in=P
I was attempting to find a fix for this all day yesterday, and had to dig deeper into the darkest parts of the interwebs to find what I needed,
Here is the Mod_Deflate IE6 Browser Fix
The other big thing you can do for those that control their hosting platforms is to give the website enough memory to run at optimum levels. A no-brainer maybe, but it is amazing how many people I run into that don't understand memory and disk space.
With our largest site, we went through and optimized images, compressed css and javascript, ramped up the caching, and increased the database memory and more than doubled the performance. A big factor was getting the page data size down as much as possible, and reformatting images was the best way to do that. The site was pretty image heavy as an e-commerce site, and we were able to cut the data size in half by reducing the image file sizes.
Thanks Danny!
Great Post
One thing though- I thought I'd be a bit cheeky and use the Yahoo Yslow tool on SEOMOZ homepage and blog and noticed you dont implement many of the suggesions you have made in the post? And only score an overall "E" grade. Is there a particular reason why you dont "practise what you preach" so to say?
Very good point and something we battle with internally here.
One of the hard parts about growing a company like SEOmoz is that you start running into growing pains and resource limits.
In a vague sense, we know what to do, we just don't have all of the resources to do it. Luckily, knowing what to do is the first step in correcting this.
We experience similar problems. We are a web design company, we specialise in eCommerce websites integrated with ERP systems. These days you have to know tons about SEO and PPC, which is a continuous learning curve for us.
We have optimised many of our customers websites achieving great results but we never get around to doing our own. Now we need to do more on our own website as potential customers are searching our keywords to see where our website appears, with so many other web development and SEO consultants on the web, it is a tough list to break into. But break into it we will, we will get our website on the first page of Google, eventually.
I cant see the Yahoo Yslow tool? where is it?
its an extension for the firefox firebug plugin:
https://developer.yahoo.com/yslow/
Firefox's Firebug add-on with YSlow and/or the Google PageSpeed plugin are very useful tools for this sort of analysis - https://developer.yahoo.com/yslow/, https://code.google.com/speed/page-speed/
I've not watched yet but did he mention the big wins like using the Google served version of JQuery?
I hadn't heard of that Google JQuery trick. Very smart stuff.
For anyone who doesn't know about it, you can read more here at Google Code.
Yahoo also have issued around 35 ways to speed up the website(implemented by yahoo). These tips listed here are there in the Yahoo's list(except content distribution, I guess). Worth checking
https://developer.yahoo.com/performance/rules.html
Wow, that is a really great resource!
Google has one also...
https://code.google.com/speed/
Great addition to Google's rules. Thanks!
I've spend loads of time speeding up my website. Just some more tips to improve loading speeds are:
A browser will wait rendering the rest of the page until the javascript is loaded. Put your javascript files at the bottom of the page. This way the browser will render your site much faster because it doens't have to wait. You can also you "deferer" (google for it) in the script tag to get the same result in some browsers. This doens't make your site load faster but render faster (which is a good user experience).
Make sure the browser doens't send any cookies to the CDN or subdomain you are using.
Each file you are downloading takes about 4kb of header data. So each file you can miss saves you an extra few kb.
User yuicompressor to compress your css and js files, in my opinion it's the best tool right now.
If possible lazyload files. (load basic files first then load other extra files).
If you really want the max out of it buy the book "building faster websites" or mail me :)
Speeding up a site is three step process,
...in that order.
First remove all the crap, then make the stuff that's left smaller (= e.g. compress/gzip stuff and optimize images), then focus on delivering stuff optimally, beginning with configuring things for browser and proxy caching and caching in case of dynamic content, e.g. on WordPress.
After everything else is done, THEN one can start looking into subdomains and Content Delivery NetworksExternal js/CSS is quite advanced technique, and you have to mind that the number of domains must be kept under four for things to speed up.
CDN is an option which beginners don't need, and I don't like it that each and every "speed up your site" guide/tip/blog post suggests that first.
Why go for paid solution when you can do stuff for free and more easily? Why suggest something most users don't even need?
For people on WordPress, you can take care of 88% all optimization needs by installing the W3 Total Cache -plugin and configuring it the right way.
Add little tweaks via .htaccess, like gzip (deflate) and cache control for browser/proxy control, WP Smush.it -plugin for automatic image optimization and you are pretty much set. After that it's about cleaning up stuff, getting rid of unnecessary scripts and such.
(edited typos/formatting)
I would love to share this with my devs, as these speed improvements are something we are doing right now.
However I can't really when the delivery is so casual. They have a bad enough idea of seo as it is. I really enjoyed the WBF and your sense of humour, but I dont think "outsiders" will necessarily see past that to the value in the data.
Don't think Ive explained that well, and im not saying you should change the wbf, just pointing out that I decided not to share a vid that I would like to
I understand what you are saying firegolem. There is some very useful information here which I'd like to share with some of my more receptive developers, but when a video is conducted in such a flippant manner, it is very easy for those who will be more sceptical to change to dismiss it as being of little or no value. It's just a slight re-balance of professionalism against humour I believe the above poster feels would be helpful, although I of course accept everyone has their own style of presentation, and that I'm coming across as a proper killjoy now!
It would also be useful if you could please learn to write more legibly (i.e. bigger) on the whteboard so I didn't have to keep scrolling down to the text below to see what it says.
Valid point, Vishnu in the comments above pointed out this resource which covers most of that I said in a more traditional manner. https://developer.yahoo.com/performance/rules.html . That might be a much better alternative to send your devs. That said, note taken, I'll work on my legibility and balance in the future. Danny
Hi danny,
good selection there, though i'm missing cache-control headers.
for me, the interesting thing while implementing these some while ago was that amazon cloudfront makes it really hard to use gzip. Somewhat contraditory, I think.
gZIP!
I love watching my WBFs on the interwebs... using my internet machine. Dang Nabid!
BTW, the captions cracked me up. Job well done. I'd give you more thumbs up if I could.
4. Optimize Images.
I can recommend both smushit (https://www.smushit.com/ysmush.it/) and SpriteMe (https://spriteme.org/) to get the best performance from image optimization. For the adventurous - try Base64 encoding images for CSS (https://webcodertools.com/imagetobase64converter)
P.S. thanks for the links to the Free CDNs
Thanks for the added resources for optimizing images.
This Whiteboard Friday came at the perfect time. Just yesterday I decided the next topic to learn about was increasing site speed (because of Google's algorithm announcement). Previously, I only knew about CSS Sprites and avoiding redirects... but thanks to you I have many more avenues to explore!
*I also loved the "pop-up video" homage! It should become a Whiteboard Friday staple!
Excellent timing! I just figured out how to get Google Webmaster to play nicely with the site, and speed is definitely an issue for us. I appreciate that many of the tools are simple enough for a n00b like me to successfully utilize.
I am curious to know how much speed affects being seen by potential traffic. While I'm certain there are other factors involved, how far up on the "optimize it" list should increading load speed be?
TGIF!
Oh man... I tried to do the deflate compression on the .htaccess file, and now my home page will come up, but all the content pages are gone... How do I get myself into these situations? :\
*starts digging*
As mentioned in the video, site speed as an SEO factor only impacts 1% of queries. It should not be high up on your list for SEO.
That said, it is really helpful for your users and happy users tend to link more which does impact your SEO efforts.
Ah, thank you... I'm not able to watch video's up here in the mountains (slow internet) so I missed that tidbit. Thanks!
Thanks for the post, it really helped! I just installed GZIP into my site. =)
Really nice article! I'm curious about your opinion of css sprites vs data uri's, like url('data:image/png;base64,
data uri is not available in IE7 and below. You would need some messy workarounds to get it to work.
overall I prefer data URI for few small graphic objects.... if u have many icons just sprite it ... its only one extra request...
Well this is our first Whiteboard Friday, this is a little techie. Are all Whiteboard Fridays like this?
I am in London, today we are starting a little heatwave, 31 degrees already, it is far too hot to take this all in so I will pop back on Monday, go through it in more detail and comment again.
Phew, I need a cold beer. :-)
They aren't all very technical. Some definitely are, but others are more plain-speak, and talk about strategies or practices.
If you're new to Whiteboard Friday you should check out some of the older ones. I supplied a link here, but you can also check them out by going to the top of this post where the title is, and clicking the link labeled "Whiteboard Friday" next to the byline.
Enjoy!
Hello Fusionsoft!
Here's a couple link-related Whiteboard Fridays that should be both accessible and actionable:
https://www.seomoz.org/blog/the-beginners-guide-to-getting-links-from-bloggers-video
https://www.seomoz.org/blog/whiteboard-friday-what-kind-of-links-do-you-need
As you can see, WBFs can have a variety of styles, from technical to treacherous and everything in between! Hope this gives you an idea of what to look out for.
Enjoy some beer-swilling in the London heat for me!
Hahahaha great WBFriday.
Would resizing an image to the correct size help rather then using code to do it?
Yes, because it should mean the image is a smaller file size.
Yep, resizing the actual file makes for less 0's and 1's :-D
Well there is another one then :)
Another way to use fewer files is to combine multiple CSS files into one file. The same with JS files. That way the site has to make fewer http requests.
Great post. Really cleared a lot of stuff up for me. I had heard of page speed becoming a factor and went got firebug and it's page speed plugin right away. After hearing you explain everything it makes it seem a lot less daunting. Thanks again!
Lots of interesting stuff in this video. Can I just clarify one point?
If you've a bunch of files it is more efficient (as a greater number of concurrent connections can be made) to create a sub-domain for those than use directories e.g.
images.mydomain.com
js.mydomain.com
is better than:
mydomain.com/images
mydomain.com/js
If I've understood this correctly I'll change my build methods.
If you're getting a lot of visitors this is going to thrash your server - basically you're hacking it to allow individual browsers to make more concurrent connections (various add-ons allow Firefox users to do this already) and so use more bandwidth per unit time.
I suspect that the server configuration will become important as it's likely to limit per-user connections if it gets bogged down negating the effect.
Not sure that is correct...
One benefit of doing a subdomain (images.example.com) if you are only hosting images...
You can make it cookieless... So with each pageload you have no cookies attached to the images...
The video streaming in seomoz has been very slow of late. This video is unviewable for me, because it is terribly slow to load.... :(
Thanks for letting me know. I'll see what I can do
Maybe that could be addressed by using a CDN (see step 3). Just kidding - I've found the video streaming loading fine for me.
Maybe it's just my connection, but I thought it would be better to say it out loud and maybe someone else shared the problem. Thanks Danny!
Enjoyed watching this - entertaining, human and useful. Just perfect.
Great post / tips for speeding up a website; however, it would have been helpful if you identified when there actually is a problem with website speed. In other words some of these recommendations require a large bit of coding and as your aware developer costs if you do not have an internal staff are seriously getting out of control, thus understanding when I should be concerned about my page load time would have helped put this post over the edge.
From what I have read 2 seconds is ideal but if you put a scale together what would that look like in terms of these categories: Excellence, Good, Average, Oh $#|+ and No one will ever wait that long?
Oh Poor Danny, That was just painful to watch,
Rand he is obviously an awesome guy, please get him some media training...
Maybe all of us on here should start a petition....
Besides that great post, and I think 50 cent is looking to sue you, LOL....
Thanks for clearing up a lot of things I was wondering about page speed, and how much it ACTUALLY effects things. These are definately some good tips in here.
Haha cool video funny subtitles
Yup good video and site speed is def a major SEO factor. TY for that video
Has anyone used one of the free CDN's? Just curios as to how reliable they are and how likely they are to stick around being free?
What about Ajax ?
Is the Ajax calls are a great way to increase the speed of the page? Because the page is not fully reloaded
The answer is bit complicated. It won't really speed up the speed of the page (in fact depending on what you are loading, it could slow it down). Instead, it will allow you to have less page loads which can help with User Experience.
It is a grey area.
Also, rendering portions of a site via AJAX while keeping it SEO-friendly might complicate things significantly. Given that site speed is still a small factor in terms of relevance, moving to AJAX may not be worth the effort.
This great. Thanks, I will definitely implement this.
I found this article helpful on ways to speed up Joomla websites.
There are many tools that you can check your site speed, but non of them really tells you whether your site slow, average or fast. It's just gives you the numbers such as load time, speed per KB and etc. When I check our site, the numbers look good to me, but I really don't know whether the site meets SE speed requirements. Are there any general numbers that we can compare to?
You might try https://www.webpagetest.org/ - it provides a feature that allows you to measure your site against any other site. You can compare yourself to your competitors. If you look at your site performance in Google Webmaster Tools, they provide a graph that shows a threshold at approximately 1.5 seconds, below which they call sites FAST and above which they call sites SLOW. So 1.5s appears to be a generally-accepted threshold to target for optimizing your site's performance. Note that Google is measuring performance from real users (via their toolbar), so to get a realistic picture of your site's performance, you must use or simulate typical bandwidth (DSL, Cable Modem etc.). Checking performance from a high-speed company intranet may paint a false picture.
4. optimize images
graphic designer tip: reduce the file size even further by lowering the color palette (8, 16, 32, 256) without a noticable difference in image quality.
most effective on simple pics and mono or black and white imgs
can do a post on this as a "how to" walkthrough showing before and after results and savings in file size reduction on SEOmoz if interested and based on feedback in comments
Is it necessary to use a CDN if our market is very focused locally and our server is located in the same place as the market ?
For example, if I sell flowers in the state of New York and my website server is there, is it ok?
It sounds like a CDN would not be a good option for you. They are better resources for websites that are serving assets (images, videos, sound) globally.
A CDN might still give your site a boost, depending on the number of external files hosted on your page and the performance of your current website provider.
We've found that a top-tier CDN like Akamai can deliver small image files in single-digit milliseconds. On my personal blog, hosted by a 3rd party, similarly sized images can take 10x as long to download.
I recommend using https://www.webpagetest.org/ to measure and understand the performance of your complete web page from the point of view of a typical user on a typical connection.
https://gtmetrix.com/ has Yslow, Page Speed and a download time 'waterfall' chart with integrated help snippets. Quite useful!
I enjoy your Whiteboard Fridays Danny. I liked the captions, nice touch. I would like to see much less small text on the whiteboard itself, and much larger hand-drawn pictures.
Thanks Sean!
I'll be sure to do that next time. I was editing the video and it hit me how silly it was for me to have the "content" (whiteboard text) lack simple hierarchy.
As for the drawings, those are still a work in progress :-) (Apparently my drawing skills stopped evolving sometime in preschool. It may have had to do with me eating glue)
Cheers!
wow! it is great tutorial, now i need some resource to learn seo. Thanks for your sharing. i want to come back a gain to learn more seo from this site.
Interesting post, but the most important (IMHO) factor is setting proper cache-control headers.
I ran a test for this post and found that a lot of the tips given is not implemented at SEOmoz ...
Charity begins at home...