Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

Speed up your website TUT

Maybe your site is loading slow, maybe it's ok, but it can always be faster.
Especially if you're running joomla or wordpress, loading tons of modules and plugins will slow down your site.
So these are some tips which will make your site much faster.

Requestes

Probably, you didn't thought about this one, but this is the first thing we need to do.

What are requests? Well, every file, every element or query of your page is a request. Someone could explain this better then me, but when user visits your site, all those things are requested from the server, and every of it takes time to load, no matter of it's content size.

So for example if you have 10 images, those are 10 requests. And images is what we would like to get rid of first.
Well, not literally removing images, but combining it.
Probably you saw 'sprite menus' somewhere. It's using the same image for all buttons.
Same way, we could do the whole graphics on our page, why not.
So make one big image and put all your icons, gradients and stuff in it.
Later in CSS, your every page will load the same image background but with different position.
example: background: url(..images/sprite.png) -120px 50px;

Just adding the coordinates after the image url, we can find our pic inside the big one.
This way, we are going to have 1 request for all our images.

Same like this, we want to combine CSS and JS files. If you have 10 CSS files, then again, it's 10 requests.
Combine it all in one file, and change all paths to it. It's should be an easy task.
Again, same with JS.

Page size

Logically, less page size will load faster. So that's what we are going to do too.
And naturally, most of page size takes images.

First try to make textures if you can instead of large size images. Textures are repeating images with which you can sometimes get the same effect.
If you have gradient images, you can do it in CSS if you like:
GRADIENT GENERATOR
Avoid .png for large images. Usually, articles has .jpg extension. Images with few colors has .gif. And of corse, png hq images and the transparent ones.
Take all your .png images you have, and compress them:
PNG COMPRESSOR (it won't reduce image quality)

Now when we're done with the images, we are going to reduce the size of other files too. May sound silly, but don't be lazy, every kilobyte is important.

What can we do here is to compress CSS and JS files.
Take the note, when you compress the file it's gets minimized, so it's hard to work on it later. So, make a non-compressed copy somewhere in the backup.
To compress CSS files: http://www.csscompressor.com/
To compress JS files: http://jscompress.com/

Fonts

Fonts sometimes can be very large. Especially if you download one, and attach it to your page. That's not a proper way to do it.
If you don't want to use default fonts, you must use google fonts.
GOOGLE FONTS

Now when we're done with this, we need to make some caching.

I won't go much into that, you can find bunch of techniques if you google, and it's not always same for everyone.
For example this: http://www.askapache.com/htaccess/speed-...ching.html

Other tips:

Remove any non-existing paths. For example, if you are pointing to he image somewhere which you deleted, it can slow down your site much.

Check your statistics here, and post it if you like.
http://tools.pingdom.com/
Haha Lol I made this happen :D!
but yea good tut.
Hadn't even thought of combining the images.
But yea currently the site im working on has about 0.7-1sec load time.
And using only 1 CSS 1 HTML and 10 images.
So yea probably going to try to combine them into 1 big images and use the correct coordinates.
Also the site provided works really well for me to test all the loading.
Also it gives you a graph of what is being requested and loaded so see if you can do something about those things should decrease the load speed.
Thanks for the tutorial bro. Will probably gonna come in handy for me later..
Thanks for the tuto bro.
I am also developing websites.
(Sep 13, 2013 03:29 AM)Ryuuji Takasu Wrote:  Haha Lol I made this happen :D!
but yea good tut.
Hadn't even thought of combining the images.
But yea currently the site im working on has about 0.7-1sec load time.
And using only 1 CSS 1 HTML and 10 images.
So yea probably going to try to combine them into 1 big images and use the correct coordinates.
Also the site provided works really well for me to test all the loading.
Also it gives you a graph of what is being requested and loaded so see if you can do something about those things should decrease the load speed.

Don't know how I didn't remember to create this tut earlier :d