One of the things I love about being a Denver SEO consultant is the fact that my work encompasses so many different areas. SEO starts with great content, so at Spork we get to create interesting articles, guest blog posts, infographics, Internet video, etc., for our clients. We help them market that great content for the purpose of building links, and then the cycle repeats.
However, SEO isn’t just about content and links. SEO best practices often coincide with user experience best practices – particularly when it comes to web site speed. Faster websites tend to rank better with Google and Bing, so one of the things we do at Spork is help people make their sites faster.
One of the easiest ways to make your website faster is to follow these image optimization best practices:
1. Define the height and width of every image in your HTML. This helps with browser rendering speed and it’s also a W3C compliance requirement. [Note: W3C compliance is important when considering the Americans with Disabilities Act, but there are also cross-browser benefits too.]
2. Never ask the visitor’s browser to scale images. If you add an image to a web page, it should always be added at full native resolution, i.e. if the image is 500px wide on your computer before you upload it, it should be 500px wide on your website. If you upload a large image and then scale, you end up with a blurry picture and excessive downloads…see the blog post never let browsers resize your photos for a more detailed explanation.
3. Use the right file format for each image. The web’s most common file formats are JPG, JPEG, GIF, and PNG…do you know when to use each format? Do you know how to change the quality of a JPG for each application? There was a great post about how and when to use JPG images last week on SixRevisions that’s definitely worth reading if you’re doing any web publishing or editing (let alone web design).
Note: SixRevisions is one of my recommended WordPress resources
4. Optimize your images using Smush.it. Yahoo and Google have done a lot for the Internet development community…too many things to list, in fact. Two of my favorite Yahoo contributions are YSlow and Smush.it. YSlow is a plugin for Firefox that helps developers find ways to speed up websites. Smushit is a tool included with YSlow that automatically optimizes the size of any image. A best practice is to make sure any common images found on your website (like your logo, for example) are size optimized. Smushit.com is a greet tool for making images a small as they can be without sacrificing quality – check it out.
5. Check out WebP. Google purchased a company called On2 Technologies a little less than a year ago, and they’ve used some of the know-how they bought to create a new image file format called “weppy” (.webp). While this image file format is not widely supported, it promises to become the new standard for image compression and may very well replace the JPG format in the next few years. The reason? The average webp image is about 40% smaller than the average JPG image of similar quality.
Does Website Speed Really Effect Google Rankings?
In a word, absolutely. I’ve noticed a 10-20% increase in search engine traffic on a few sites after making nothing other than speed enhancements. Here are some ideas for making your site faster (in addition to the image optimization described above):
- Run YSlow on your current site to get a benchmark and learn about the possibilities.
- Enable server-side GZIP compression (some shared hosts don’t allow this, so it might be time to upgrade).
- Configure entity tags and add expires headers (something you can do in your htaccess file)
- Use CSS sprites for background images
- Minify all your HTML and CSS
- Use a CDN (check out last week’s post about using a CDN with WordPress)
- Upgrade your hosting provider – it’s one of the easiest ways to get faster
- Hire a professional developer to evaluate your site – there are usually some code changes that can be made to improve site speed