10 site performance tips to improve ranking

Thu 11 April 2013 15:00, Mark Farragher

10 site performance tips to improve ranking

We know that page load time is a ranking signal so it is very important to achieve the best possible load times. Read on for 10 handy tips to improve your site performance.

 

 

1. Hire an expert

Optimizing web sites is a complicated business. You need to know about file compression, expiration headers, CDNs, image formats, caching... So make sure you hire an expert to explain the nitty gritty details to you. Or even better: become an expert yourself!

2. Measure everything

How fast is your javascript loading? Which script is taking the longest to load? Are your jpeg images compressed enough? Use a performance measuring tool to get the answers you need. Many tools are free and available online.

Google Page Speed produces reports that looks like this:

Screen%20Shot%202013-04-11%20at%202.40.03%20PM

In the screenshot above I am testing the website http://www.tweedehands-traplift.nl. Your goal should be to score 90 or higher with no open high priority issues. The traplift site scores 93 out of 100 so we're good.

3. Meet my friend Gzip

Another good performance reporting tool is Web Page Test. This is what a Web Page Test summary looks like:

Screen%20Shot%202013-04-10%20at%205.16.57%20PM

Your goal here is to achieve a 5-A rating, just like our traplift site. This is fairly easy to accomplish if you follow the tips and tricks in this article.

A very important place to start is to always enable compression on your webserver. Compression means that all static assets are compressed on the webserver, then sent to the browser and decompressed. This cuts down on network transfer time. The gain you get from transferring small files is greater than the extra CPU load you incur by compressing. So always enable gzip compression!

4. Stay alive

Another thing you will want to enable is "keep alives". This is a technique where the browser opens a network connection to the web server and uses that connection to download many files. This seems like an obvious idea but not so long ago browsers would keep closing and re-opening network connections for each individual file. Keep-alive keeps the connections open and this saves a lot of time.

5. What's the expiration date on that?

For all static assets (robots.txt, favicon.ico, images etc) we send an expiration http header which instructs the browser to cache the file locally in the browser for as long as possible. After the first page of your website has been loaded the browser has all static assets locally and does not have to load them from the server again.

When I load the traplift homepage twice in a row the download timeline for the second load looks like this:

Screen%20Shot%202013-04-10%20at%205.43.14%20PM

All static assets are already cached in the browser so the browser only needs to requests html data. This takes only 0.07 seconds!

6. Scripts go at the bottom

Browsers usually load javascript and stylesheets first, and once everything is loaded do they start with the images on the page. You can clearly see this in the download timeline for the homepage of the traplift site, on first load:

Screen%20Shot%202013-04-10%20at%205.15.55%20PM

Image downloads (the purple bars) take up a lot of time so we want to have all javascript loaded as quickly as possible. A handy tip is to place all script tags at the bottom of the page, just before the end body tag. With this technique all scripts are loaded at the 0.4 second mark. The browser then starts loading images and finishes at the 0.9 second mark and so page rendering (the vertical green line) can start at 1.1 seconds.

7. Google should stay in the background

Notice how long it takes for the Google script to load. You do not want your visitors to wait 0.5 second for the Google tracking script to load so always use the asynchronous version of the tracking script. You can see in the download timeline that the asynchronous script loads in the background while the browser is already rendering the page. The extra 0.5 seconds of load time will not be noticed.

8. To CDN or not to CDN?

Instead of serving our static assets from our own webserver we could also use a CDN, or Content Delivery Network. A CDN is a worldwide network of super-fast servers which are optimised to deliver static files as fast as possible.

However, using a CDN can have an unexpected drawback. Take a look at this download timeline:

SS2

I have highlighted the first CDN asset load with a red arrow. The DNS lookup (the thin blue bar at the start of the line) is almost 0.2 seconds long! After this lookup the browser starts downloading javascript files from the CDN and this takes another 0.2 seconds.

However, the browser has already finished loading all javascript and css files from the primary domain. So for 0.3 seconds nothing happens while the browser is waiting for the CDN to deliver the final javascript files before it can start loading images. You can see this in the report as a "hole" in the timeline in line 4, stretching from the 0.8 to the 1.1 second mark.

Sometimes by serving all your static assets locally and by minifying, combining and gzipping them you can actually outperform a content delivery network.

Always measure both with and without a CDN and then go for the fastest solution.

9. Apply some Varnish

A good way to speed up a website is to use a caching proxy server. A proxy is basically a front-end for your website. It receives all incoming requests from browsers and relays them on to your actual webserver. A caching proxy only does this once and then caches the response in memory. All subsequent requests for that same file are then served directly from memory.

We use Varnish for all our websites. Varnish is one of the fastest caching proxies out there. It can be a little hard to set up (you configure Varnish by writing small bits of code in a language called VCL) but once you get it up and running, it can dramatically improve your site performance.

10. Get a boilerplate

Many best practices have already been discovered by other web developers and combined in handy boilerplate templates to get you up and running without you having to re-invent the wheel every time. A particular favourite of mine is the HTML5 Boilerplate.

HTML5 Boilerplate is mobile-friendly, standards compliant and high performance collection of javascipt, style sheets and sample HTML code. Use it as the basis for your website and you are off to a very good start.

Bonus tip: Everything changes

Today's fastest solution might no longer work in the future. So set up a schedule to periodically re-test all websites you have ever delivered. Keep comparing your websites with others and check your assumptions. Make whatever changes are neccesary and keep making those changes to stay on top.

Tools of the trade

Here is a collection of tools that every performance tester shouild know by heart:

Yslow: http://yslow.org/ 

Google Speed Tracer: https://developers.google.com/web-toolkit/speedtracer/get-started

Google Page Speed: https://developers.google.com/speed/pagespeed/insights

Web Page Test: http://www.webpagetest.org

Which loads faster: http://whichloadsfaster.com/

Varnish: https://www.varnish-cache.org/

HTML5 Boilerplate: http://html5boilerplate.com/

Know any other tools? Share them in the comments!

 


  • Comments (0)
  •  
  • SEO
  • Tell-a-cowboy

Comment

  • HTML is not allowed. URLs are automatically clickable.
    * Email address is not shown



  • DateRank: PageRank for singles
  • Raven Site Finder
  • 50 SEO's 1 question
  • SEO Oktoberfest 2008
  • SEO Wars - Planet Link Space
  • Online Workshop: Managing SEO Projects 10 Mistakes, 10 Keys

Last Comments


Events

Last event

Bloggers

  • J-P De Clerck
    J-P De Clerck

    Profession: Customer-centric digi...

    Company: Conversionation

  • Sam Murray
    Sam Murray

    Profession: Senior Search Consultant

    Company: Verve Search

  • Susie Hood
    Susie Hood

    Profession: Head of Copywriting

    Company: Click Consult / SEO C...

  • Tom Bogaert
    Tom Bogaert

    Profession: Managing Partner

    Company: QueroMedia


Latest Videos

Border_top
Border_bottom

Columns

  • Lizette van der Laan
    Social Media Image

    Is it the real you, the witty you, the person who reads the most interesting articles, makes t...




Newsletter

Subscribe to SC Newsletter:


RSS Feed

Are you a bloggerFacebook


Search



© 2014 Searchcowboys.com - All Rights Reserved - All views and opinions expressed are those of the authors of Searchcowboys.

All trademarks, slogans, text or logo representation used or referred to in this website are the property of their respective owners. Sitemap