For some time the facts on this topic were quite vague, but Google recently announced that website speed is now officially one of the top 200 items taken into account when generating search results. So in this series, I’ll be taking a look at how you can increase the speed of your site.

The effect of website speed on page rank is not a big threat to most users as Google estimates that only 1% of websites will be affected. But it comes down to the end users once again, and a faster internet is a better internet for everyone. Content stays at the top of the log, but if you have two sites with good content the faster site will be indexed above the other.

How do I know how fast my website is loading?

There are a lot of tools to help you determine your website speed, such as :

• Site performance is a tool under Labs in the Google webmaster site that shows your average loading times
• webpagetest.org gives you a nice broken down view of the different parts loading in your website

How do I increase my website loading time?

Here are a number of ways :

• Minimize HTTP Requests: The less resources on each page, the faster your site will be. The html counts as 1 resource, and each javascript file, css file and image counts as another resource (images referenced in stylesheets count as well), so try to keep these to a minimum. You can also combine all your css files into one file, and the same with your javascript files. Most background images referenced in your css can also be combined into a single sprite file, and positioned with the background-position property.
• Server location: The closer your users are to the server which sends them the site, the faster. So if you are targeting users from a specific region, hosting your website on a server close to that region will help the majority of users. But when it comes to search engines you might want to look at hosting on a number of different servers distributed over the planet, so that your users can get a connection to the nearest server — there are service providers who provide this functionality, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks.
• Cache: If you cache your pages, the crawler only loads each resource from the server the first time. Thereafter, depending on how you implement caching, the resources load from the user’s browser cache, which is almost instantaneous, and saves everyone’s bandwidth too. Different content is cached in different ways:
  For static pages (ie. things which hardly ever change): implement “Never expire” policy by setting a far future Expires header.
  For dynamic components (ie. things which change every so often): use an appropriate Cache-Control header to help the browser with conditional requests.
• Zipping: If the user’s browser supports some form of compression, such as gzip or deflate, you can compress html, css and js files on the server before sending it to the client, which makes the site faster for the user but also saves your bandwidth! The browser will then decompress it before displaying it to the user. In PHP, the HTTP_ACCEPT_ENCODING environment variable tells you whether the user has compression support, for example :

  $support = getenv('HTTP_ACCEPT_ENCODING');
  if ( ($support!==false) && (stripos($support,'gzip')!==false) ) {
      // user accepts gzip compressed content
  }
  

• Position of includes: Put style sheets at the top and scripts at the bottom — this helps with progressive loading and user experience.
  Some browsers, like IE, prevent rendering objects on the page until the stylesheet is loaded, so if your stylesheet is at the bottom, the user will have to look at a white page until the css has loaded, whereas when its at the top, they will see the page load progressively. The w3c HTML specification also states that stylesheets are to go in the HEAD section of the page.
  As for Javascripts: They block parallel downloads — The HTTP 1.1 spec specifies that browsers download no more that 2 components in parallel. Thus if you are downloading a script you might hinder images from downloading or other externals, increasing page load time.
• Make javascript and css external:
  By doing this the browser can cache the files, making loading faster on each subsequent page which includes that same code. If they are inline however, they are downloaded every time the page is loaded — an unnecessary waste of bandwidth and time.
• Less markup, so, obviously, get away from tables being used for layout!
  It is obvious that the more text your file contains, the bigger the size of the file, and the longer it will take to download. So have as little markup as possible.
• Don’t use high definition images, but keep your image quality lower if you can afford it.
  The same as with the markup, the lower quality and lower def, the smaller the size of the images and thus the faster the load–time.
• Avoid CSS expressions: Expressions are css that triggers javascript code to determine what style to show. They are deprecated and should therefore not be used at all — they are triggered whenever something changes on your screen, so while the mouse cursor moves, the expression can be triggered thousands of times, costing the user memory and time.
• Avoid unnecessary redirects as each redirect is an HTTP request which takes time.
• Minify scripts and css:
  You can run a minification program or script on your code, which takes out unnecessary characters like newlines, and replaces variable and function names with much shorter names, amongst other things. The result is basically a compressed file. As specified above, the smaller the size, the faster the site loads.
• Don’t use Iframes, as they are out-dated :
  An Iframe or frame is basically just a window in your HTML page with another HTML page in it. So if you have a frame or Iframe, you are trying to load more than one webpage at the same time, thus making total loading time longer.

There is so much more to write about page loading speed, and so little time…

Well that’s it for this instalment, stay tuned for more!

You might also like :

• Breadcrumbs in google search results