10 Ways to Instantly Speed Up Your Website

10 Ways to Instantly Speed Up Your Website

Optimizing the performance of a website is often neglected by web developers due to laziness or just not knowing what can be done to speed up their website. One thing most developers don't realize is that if a page is taking too long to load, allot of users will leave the site before the page is finished loading.

Today there are probably over 100 ways to improve the performance of a website. In this article I will show you simple 10 things you can do in less than an hour to speed up your website and see amazing results instantly.

1. Minimize HTTP Requests

When loading up a new website, the majority of the time is spent loading the website's components: images, stylesheets, scripts, Flash, etc. One thing to keep in mind is that when transferring data over the internet, we have to deal with things like latency, bandwidth, etc. By having fewer components to load will reduce the number of HTTP Requests, which in turn makes your website load faster.

Make use of CSS Sprites

If you've heard about CSS Sprites but don't know what they are or how they work, you'll learn this now.
The idea of CSS Sprites is basically to combine all images of the same type and combine them into one image, and using the background-position property of css to select the part of the sprite you wish to use.
This can for example, reduce the amount of HTTP Requests from 50 png files, to 1 png file. That's 49 less HTTP Requests!
Often, it even pays off to replace those small gifs you have with png versions of them to include them in your final css-sprite.
Nowadays, pretty much all high-traffic websites use CSS Sprites to reduce load times for the end-user.

Here is an example of a CSS Sprite: Apple's navigation menu.

Apple in The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

More articles about CSS Sprites:

Combine Javascript and CSS files

Having several different css and javascript files also increases HTTP Requests, which slows down your website. So instead of having them all spread up, why not combine your css files into 1 css file?
For example, at first I had several CSS files such as my CSS Reset, some wordpress plugin CSS files and my main CSS file.
What I've done is combine all of these files into 1 big CSS file, which reduced the number of HTTP Requests, thus making the page load a little faster.

If your stylesheets are static files and you would like to keep them seperate for better maintenance, you can bundle them into one request dynamically:

# File css.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");

Don't forget to set the header information in PHP like this:

# File css.php
header('Content-type: text/css');
# ...

Save this code as a file called something like css.php and reference it from your HTML:


Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

More articles about Combining Javascript and CSS files

2. Minify CSS and JavaScript

Minifying is the removal of unnecessary characters from code to reduce its size, thereby improving load times.
When you minify CSS or JavaScript, all comments and white space characters are removed(tab, new lines and spaces).

There are various tools for minifying CSS and JavaScript code. My favorite tools are CSS Min for minifying CSS and Javascript Compressor for minifying JavaScript.

3. Place Stylesheets in the Header

Web developers are concerned about performance of their website want browsers to load whatever content it has as soon as possible. This fact is especially important for pages with a lot of content and for users with slow Internet connections. When the browser loads the page progressively the header, the logo, the navigation components serve as visual feedback for the user.

When we place style sheets near the bottom part of the html, most browsers stop rendering to avoid redrawing elements of the page if their styles change.

4. Put Scripts at the Bottom of the Document

When loading a page, your browser completely stops when it encounters a <script> tag and executes the code within before continuing. You can't even load images from other hostnames until it's done.
So if your JavaScript tags and files are in the <head> part of your document, your browser will load all the content of those <script> tags before displaying the <body> part of your page.

This is why it's important to put your JavaScript files at the bottom of the document, right before the </body> tag. By doing this, your browser will load all of your important content(text, pics, etc) before loading the JavaScript.

In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

More articles about increasing JavaScript load speed

5. Make Use of a Content Delivery Network

Browsers are able to download two or four components on parallel per hostname.
Hosting your static content(images, stylesheets and scripts) on different servers from your dynamic content will increase the load speed of your page by making use of parallel downloading.

According to the results of experiments conducted by Yahoo! Performance Team, using too many hostnames increases the amount of simultaneous HTTP requests but it will also increase the amount of DNS requests which affects the performance negatively. The Performance Team mentioned a strong balance between the number of parallel HTTP requests and required DNS requests to be performed of 2 to 4 hostnames. For higher number of hostnames, you may negatively affect the performance.

More articles regarding Content Delivery Networks:

6. Gzip your CSS and JavaScript

CSS and JavaScript files can get pretty damn big. Gzipping or compressing these files has shown to provide a reduction in the neighborhood of 70-80% of the original file size for large websites.

To Gzip a CSS or JavaScript file, all you need is to put the following PHP snippet at the top of the document:

<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");    
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>

One thing to keep in mind though is to remember to use Content-type: text/javascript wen Gzipping Javascript files.

The code does 4 things:

  1. It uses PHP's ob_gzhandler to send compressed data. This function will first check to see if the browser requesting the file will accept 'gzip,deflate' encoding; if not it sends the file uncompressed.
  2. It sends a header for the content type and character set for the file - in this case text/css and UTF-8.
  3. The next step sends a 'cache-control http header'. Here 'must-revalidate' ensures that any information that you pass along about the freshness of your document is obeyed.
  4. The final step is to send an 'Expires' header, to set an age on how long our cached file will last. Here we set it to expire in one hour.

In order for the Gzip to work, you'll have to rename the .css file to .php and reference it in your html.

There are more methods for Gzipping CSS and JavaScript. You can read more about them in the following articles:

7. Make JavaScript and CSS External

Using external files generally produces faster pages because the JavaScript and CSS files are cached by the browser. Inline JavaScript and CSS increases the HTML document size but reduces the number of HTTP requests. With cached external files, the size of the HTML is kept small without increasing the number of HTTP requests.

8. Optimize Your Images

Optimizing images is a must since they're usually the biggest files on the page and optimizing them can greatly reduce their size and reduce load times.
So, before you upload your images to your ftp, see if you can optimize them to decrease the loading time of your website by using tools like PunyPNG, Yahoo!'s Smush.it or any other image optimization tools out there.

More articles about Image Optimization:

9. Preload Components

Preloading content is a great way to improve user experience. When components are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for AJAX and image-heavy sites such as photo galleries where you want to deliver the goods as quickly and seamlessly as possible.

More articles about preloading:

10. Use Tools to Analyze Performance

There are literally a million things you can do to make a page load faster, but in this article I only showed 10 which I think have the biggest impact on the load times of a page. In the future I'll make articles about front and back end tweaks you can do to boost the load times even more.

More articles about speeding up websites

Related Articles



Tags: , ,

15 Comments

  1. 1 kilas says:
    Jan 14, 2010 at 11:27 am

    11. Use module mod_deflate or other compressor for content before being sent to the client over the network.

    Eg.:

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript application/x-javascript

    More: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

    Good article.

  2. 2 JP says:
    Jan 14, 2010 at 12:42 pm

    Thanks Kilas.

    In the future I’ll post more advanced ways of increasing performance so stay tuned :D

  3. 3 Amber Weinberg says:
    Jan 14, 2010 at 3:07 pm

    Putting scripts at the bottom of the site seems to speed things up pretty well – especially when the site is very KS dependent. Of course, being the blonde I am, I always forget they’re at the bottom and spend forever trying to find the links ;)

  4. 4 Arnold Dela Cruz says:
    Jan 14, 2010 at 3:13 pm

    I’m stoked to read that you recommend placing javascript files just before the tag. So many WP plug-ins, however, automatically bloat the tag with their entire scripts or CSS styles. This puts additional work on the part of the web designer or developer to use hooks to modify.

    Comprehensive and well-written. Thanks!

  5. 5 Aaron M. says:
    Jan 14, 2010 at 3:43 pm

    Good list!
    I have been using Minify ( http://code.google.com/p/minify/ ) for a good portion of the optimizations listed here since 2007 with great success. It handles combining Javascript and CSS files, minifying them and gzipping them. It also has some pretty intelligent server-side and browser caching that will boost performance even more by not regenerating the files with PHP unless something has changed and by allowing browsers to use a cached copy unless something has changed.

  6. 6 JP says:
    Jan 14, 2010 at 5:31 pm

    @Arnold Dela Cruz, for this blog I’m using contact form 7, which by default places WordPress’ jQuery and c-form 7′s Css file.
    I prevented c-form from doing this. I put the jQuery hosted by google @ the bottom and included the c-form 7 css manually in my main css file.

    You can prevent any plugin from automatically adding css and js files in the top. I always do this to speed up the use of plugins if I have to(I try to use as little as possible to keep the blog fast).

    @Aaron: thanks for the share! I didn’t know that the script did all of those things.. I thought it just minifies.

  7. 7 Tony says:
    Jan 19, 2010 at 9:48 pm

    Firebug is the web designer’s favorite toy.

  8. 8 JP says:
    Jan 21, 2010 at 1:40 am

    @Tony: apparently there are quite some web designers out there that don’t use it though

  9. 9 Gordon says:
    Jan 31, 2010 at 8:11 pm

    I use YSlow and AOL Webpage test for diagnostics. We put a website accelerator software called Aptimize WAX on our sites almost a year ago and that has saved us a tonne of time as we no longer have to do “manual” performance tuning, WAX does the optimizations automatically and our sites are between 32-54% faster, depending on the page. Must say I always struggled with manual tuning so this has been a great find for me.

  10. 10 yabate says:
    Apr 17, 2010 at 3:34 pm

    Thanks friend for all those informations.

    Currently i am using everything you wrote except CSS Sprites and preload components.

    I already tried to make CSS sprites, but my wp theme syndicates some errors,so i left it for a near future time.
    Thanks for info’s…

  11. 11 Omer Greenwald says:
    Apr 27, 2010 at 5:02 pm

    Great comprehensive article, thanks. I would also add to minimize PHP queries and db calls by turning dynamic code to static (only where it is reasonable to do so).

  12. 12 JP says:
    Apr 29, 2010 at 10:25 pm

    @Omer Greenwald: You’re totally right! I forgot to about minimizing PHP Queries; this increases the server-side performance of your website.

  13. 13 wpdotmd says:
    Aug 13, 2011 at 3:25 am

    kilas mentioned the most effective way to speed-up the website. Using Gzip is a best way.

    To see if your site is already GZipped you can use GzipDetect:
    http://www.sysadmin.md:3000/

  14. 14 webstar says:
    Jan 21, 2012 at 10:40 am

    all these steps are important for speed up your website. here are some tips speed up your website

  15. 15 twitter.com says:
    Mar 20, 2014 at 10:43 am

    Outsourcing janitorial services provides a variety off cleaning
    services including carpet cleaning, pressure washer, carpet cleaners, cleaning services unlimited
    but choosing the right provider who can meet your satisfaction.
    Finnd out what your apartment cleaning, or driveway cleaning.
    It requires a lot of problem cleaning services unlimited for you.
    Janitorial equipment suppliess such as paper towels, terry cloth rags,
    microfiber cloths, pads, brushes and spras to be biodegradable so
    hat the quality of services and products.

Leave a Comment