SEO for Beginners: Improving Site Speed

SEO

Nick Bernard May 7 2013

We write about a lot of fancy stuff on the Portent blog, such as server log analysis, advanced keyword research, and Tom Cruise.

I want to address something that doesn’t have to be fancy: site speed. We’ve written two posts on how we configured Portent’s site: one is pretty advanced and the other is blindingly technical. They’re awesome, but what if you’re a small business owner without a geeky CEO or talented developer at your beck and call?

When talking to clients, I noticed that many conversations went something like this:

ME: HTTP compression is a breeze. Just have your dev team…

CLIENT: What is this “dev team” you speak of?

Even though Google’s PageSpeed Insights spits out a handy report, it doesn’t always translate to actionable recommendations for the beginner webmaster that updates a site on his or her own.

I’ll explain four simple ways to speed up your site without the help of IT support.

Image Optimization

Plan and simple: the smaller the file, the less time it will take for the browser to download and present it to the user. Images can be huge, so optimizing them is an easy place to start.

How to implement:

  • Use software like GIMP to crop your images to the correct size for their particular application.
  • Save it as the correct file type, which will likely be PNG or JPG.
  • Compress it. You can use tools like jpegtran or PNGOUT; however, if you fear the command prompt, just use the compressed images Google provides in the PageSpeed Insights report. Click “See optimized content,” save the image, then replace your old, frumpy images with their slimmer counterparts.

Minification

Minifying a resource—be it a CSS, JavaScript, or HTML file—is simply the process of removing spaces, comments, tabs, and other unnecessary code in the file.

How to implement:

  • There are many tools available for minification. Use Google’s Closure Compiler for JavaScript, YUI Compressor for CSS, and an HTML minifier for HTML. Again, it’s easiest to simply download the minified versions of the files PageSpeed Insights provides.
  • If you’re running WordPress, you can take advantage of the minification settings in the W3 Total Cache plugin.

Compression

Compressing files also makes them smaller. Now that your site’s CSS, JS, and HTML are free of unnecessary code, compression is like putting them into a .zip folder. Most popular web servers have the ability to send the browser a compressed version of a file so it saves time loading the page. How to implement:

  • If you’re using IIS, compression can easily be configured in IIS Manager; here are instructions from Microsoft.
  • For Apache servers, you can utilize gzip encoding by adding a few lines to your .htaccess file.
    • First of all, messing up your .htaccess file can have devastating effects for your site if it’s not done correctly, so always have a working copy and edit with care.
  • The .htaccess file lives in the root directory of your site and you can download it with your FTP client and edit it as you would any other text file. Your hosting provider might also give you access to it in your control panel.
  • Add the following lines of code to the file:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

When the browser tells the server it accepts compressed resources (excluding images), the above text tells the server to encode the content in a compressed format (gzip) and send the browser the smaller version of the file. Everyone is happy: the server, the browser, and the user.

  • If you’re running WordPress and don’t want to get your hands dirty, I recommend using the WP .htacess Control plugin and enabling mod_gzip in the settings, which will add the relevant code to your .htaccess file for you.

Caching

Browsers are lazy and they don’t like to re-download files to render a site that it’s already seen before. So, it caches a lot of these files—images, CSS files, scripts—on the user’s hard drive in order to speed up the process of showing you a web page. Since files like your logo don’t change very often, you can instruct the browser to load the cached version so it doesn’t have to download the same image again from the server. We’ll do this by setting the expiration date for static resources up to a year in advance.

  • In IIS, you can enable caching with the IIS Manager. Here’s a tutorial from Brad Kingsley.
  • In Apache, add the following lines to enable mod_expiresthe .htacess file:

ExpiresActive On
ExpiresDefault A0

Then, define the file types it will affect:

<FilesMatch
“\.(jpg|jpeg|png|gif|swf|js|css|txt|xml|flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$”>

Finally, set the time in the future it will expire:

ExpiresDefault A29030400
</FilesMatch>

The time is defined in seconds, so these files are set to expire a year in advance. AskApache offers a neat .htacess time cheatsheet if you hate counting.

  • Again, if you’re using WordPress, I recommend W3 Total Cache. Just check the box next to “Browser Caching” in the settings menu and you’re good to go.

There are a bunch more ways to speed up your site, and many more resources than I have the space to list, but hopefully this will help get you started on your metaphorical journey to a faster site.

What are your favorite site speed optimization tips? Let me know in the comments!

tags : SearchSEOweb marketing

6 Comments

  1. Are you comfortable using the W3 Total Cache plugin since the 0.9.2.9 update? I’ve heard some folks say they’re still concerned. Not sure if the worry is justified or just paranoia.

  2. Also try google page modpseed as a apache add on or try google page speed as a service, (its free in beta though likely to cost at some point)

  3. Greg

    Awesome write up! I usually just use W3 Total Cache, but it has been causing me problems lately.

  4. Roger

    W3 Total Cache also includes options for code compression.

    WordPress users can also use the WP Smush.it Plugin, that automatically compresses images on upload. The plugin uses the Yahoo! Smush.it, a web tool that’s also a nice alternative for people that are manually compressing images and that don’t like the command prompt.

  5. Ryan

    I use WP Super Cache. There was supposed to be some security issue with it but I never had any problem, since updated anyway.

  6. Super Cache issues were reported at the end of April, and affected version 1.2 and below. Anything above 1.3 is now supposed to be OK.

Comments are closed.