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
Google Page Speed produces reports that looks like this:
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:
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:
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
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:
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:
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/
HTML5 Boilerplate: http://html5boilerplate.com/
Know any other tools? Share them in the comments!
Tagcloudchina london blogger marketing mobile event yandex business app google maps streetview twitter seo images news adwords privacy realtime sea europe google tools tools android google earth social media interview yahoo sem bing search engine search engines iphone facebook gmail matt cutts ppc searchcowboys street view google wave advertising