[TIPS] Improve website loading speed

 In this tutorial I'll show you the most popular and efficient methods for improving a website's loading speed.
 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)

What can I do about it?
 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

 By far the most straight forward method is to enable gzip. When you enable gzip you tell the server to compress the data before sending it to the client, this way less data is sent accross the network. When the compressed file arrives to the client the browser immediately deflates the file, restoring it to its initial size.
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

 Even though the files you are sending after the gzip compression are smaller you can reduce even more the loading speed.
Why? Because for each and every file on your website (javascript,image,css,etc...) the client has to make a request to the server. Each of these requests takes a notable amount of time to complete. Another drawback of these requests is that their number is mainly restricted to about 6 at a time in the most browsers.
 To reduce the requests you simply have to reduce the number of files. What does this mean? You can put all your javascript into a single file, try to merge the external files into fewer files on your sever. One big difference can be made using sprite sheets.
 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.

 The second trick is done using AJAX. Think about what the users see when the page is loaded. Now think about what they don't? Get it? It's common for websites to have a very large height and due to that most of the webpage content is not visible without scrolling. What you can do is only load the visible part of the website and, when that part has finished loading you can start loading the rest. Also, using the same method, after the current page has loaded you can start thinking about where the users would go next and load the images/javascript that should be requested in the next page. Loading it before the users actually gets there will tell the browsers to cache that resources so that when you go to the next page all the files will have been already loaded.

Cache?
 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.
 Not directly related to cache: you should not use external resources on your website (CSS files,javascript files, images) because that slows down your website and also you can have no guarantee that the external server you are loading from is up and running. One exception can be made for the jQuery library that is usually included from the google library (or other popular files that may present on other websites) because the user may already have that file cached from a website he previously visited.

CSS? Javascript? Where, what?

Every time a new CSS rule is declared the browsers will re-apply all the styles used. To stop this from happening make sure no inline CSS is used and also make sure that the CSS is loaded from an external file in the header , before the javascript.

When javascript is loading the entire DOM is frozen. It's recommended for the javascript files to be included just before the <body/> ending tag.

Image files are for photos!

Stop using image files for buttons, gradients, shadows and other graphical elements of your website (excluding 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.


Conclusion
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 :).