10 Ways to Instantly Speed Up Your Website
Posted by JP on January 12th, 2010 in Coding | 17 Comments
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.
More articles about CSS Sprites:
- The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
- CSS Sprites: What They Are, Why They’re Cool And How To Use Them
- CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
- CSS Sprite Generator
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.
- Combine Your CSS Media Styles Into One File
Minifying is the removal of unnecessary characters from code to reduce its size, thereby improving load times.
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.
<head> part of your document, your browser will load all the content of those
<script> tags before displaying the
<body> part of your page.
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.
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:
<?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); ?>
The code does 4 things:
- 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.
- It sends a header for the content type and character set for the file - in this case text/css and UTF-8.
- 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.
- 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.
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:
- How to Preload Images When You Can’t Use CSS Sprites
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
- Best Practices for Speeding Up Your Web Site
- Website Performance: What To Know and What You Can Do
- 10 Ways to Improve Your Web Page Performance
- 15 Ways to Optimize CSS and Reduce CSS File Size
- 20+ .htaccess Hacks Every Web Developer Should Know About
- Create a Sleek CSS3 Button Under a Minute
- 10 Basic SEO Tips Every Web Developer Should Follow
- 6 CSS Tutorials That Take You From Beginner to Expert