Using some of these methods I've reduced the loading time for one of my websites from 20seconds to only 3!
Why should I improve my website loading speed?
- it improves UX (user experience) , that means more happy users on your website that will stay longer
- loading speed has a major influence on SEO
- having a website that loads fast will also reduce the stress on the server-side (your server can hold more visitors)
In this tutorial I'll only show the most efficient and easy to use methods of improving a website speed.
First you need to know that there's an essential tool that really makes your life easier when it comes to website speed optimizations. It's called Page Speed and it now works in both Chrome and Firefox. This tool simply tells you what you need to do to make your website faster :) .
Now, some tips (most of them are also shown in page speed).
Enable gzip compression
There are many tutorials on the web that show how to enable gzip compression on your web server. This should be enough.
Reduce the number of files
What is a sprite sheet? Let's say your website uses images for home icon, back button, add to cart, social network icons, buttons,etc... instead of having tens of files you can merge all of them into a single large image. You can then use the sprite sheet image as a background and position it with CSS using background-position. Doing all this file-merging you can reduce the file requests from 25-30 to only 5-6.
Here is a more in-depth tutorial about CSS sprite sheets :) .
Make it "feel" faster
I'll talk about two ways on how to make the website feel faster without actually being faster.
One way and the simplest is to save your images as interlaced (or progressive for jpeg and gif). This will load a low-resolution version of the image and then, as the loading process completes, the image will become crisper. Doing this will allow the user to see where content is located on your website and will also keep the website template un-altered while loading. Here's a little more about all this progressive/interlaced thing.
As mentioned in the previous paragraph cache allows the browser to temporary save files on your computer for later use. Cache is important for website loading speed and enabling it is pretty straight-forward. I've found useful this tutorial that shows how to enable cache on apache using .htaccess.
Image files are for photos!
With this "new" CSS3 technology you can create a 100% functional button faster then you can design it in Photoshop. Replacing all these small images with simple CSS designs will drasticaly reduce your website loading speed.
All the steps above are not so hard to be done but have a visible impact on your website's loading speed.
To sum it up: use gzip compression, reduce the number of files, load only what's needed, no inline CSS.
Remember there are many other steps that can make your website even faster: image optimization, buffer flushing, obfuscation, just to name a few. You can search on the web more about the mentioned topics and if you have anything to ask feel free to post a comment in the section below :).