Speed Up your Website, Quick!

Have you ever gone to a website that just loads pretty slow, or the content loads fine but the images take foreverrrrr. This is always something that is frowned upon from web master and even basic readers. Maybe you just started your blog or website and haven’t really thought about how fast your website is. Just because you pay upwards of $100 bucks a month for a T3 connection, that still leave out all of the people that steal internet from their neighbors(Wi-Fi)!

This guest article was written by Hayes Potter, the 13 year old web developer and designer.
Have some web development, web design or blogging skills? Contribute to CatsWhoCode!

First thing you need to do is to find out how to access your “.htaccess” file in your server. Please note the following tricks are only for Apache Servers.It is usually either in the home directory or some file management systems put it in a higher directory not accessible through your domain name. If you use cPanel the “.htaccess” file is hidden so you need to view the hidden files in your directory. Once you find your “.htaccess” file you need to open it up for editing, now lets start with Gzipping some components. Doing this makes some things have a smaller file size, its like compressing a file but with Gzip it’s still accessible. Put the following in the top of your “.htaccess” file:
Please note that if you use pretty permalinks in wordpress there will already be some code at the top of your “.htaccess” file you MUST put all of your new code under it.

<IfModule mod_deflate.c>
<FilesMatch ".(js|css)$">
SetOutputFilter DEFLATE

This deflates all of the .js and .css files in your server, you can add “.jpg|.gif|.png|.tiff|.ico” or whatever you want to compress other file types, too.

For our next trick I’ll show you how to add expires headers to your files, this will load the file types you specify only once, from then on they are already loading in the cache so it makes your site run faster. Although you should only add expires headers to file types that do not change a lot, like css files and javascript. If you already have a bunch of images on your site then add some it does not matter it will automatically add the expires header to it. If you do change a file with future header expires you need to update your expires header code in your “.htaccess” file or the file will not show up as updated on your site it will stay the same. Place the following code under the “mod_deflate” code we did above:

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Expires "Wed, 21 May 2010 20:00:00 GMT"

You can if you want to add “js|css” to the file types but I do not suggest it as I did not do this to my “.htaccess” file.

Thats all for “.htaccess” tricks, now lets start on some more simple tricks.

Put CSS at the top and Javascript at the bottom.
Always make sure this is done, css at the top makes sure all the format and simple scripts are loaded first so your site doesn’t look weird while loading. Also put javascript at the bottom of the page so all the javascript won’t slow down your header and css from loading. Your visitors can wait .300 milliseconds for your javascript to load.

Make few http:// requests.
Don’t make so many requests for other domains. Do not put petty little link backs to myspace or your favorite youtube video. Put only about one blog ranking chicklet on your site if you have to, do not have an “Add To Any” chicklet on every single section on your web page. If you are a blogger and you like to have quick images in your posts to relate to the article, do not just copy and paste the image location. If it means so much to you to have an image upload it to your server. Try to have 95% of everything your site uses within one domain.

If you want more information feel free to email me or leave a comment I will get back to you!

  • A 13 year old web developer! I now feel old.. *sigh*

    Great tips, but I wonder how much extra load you’ll put on your server having it deflate gzip files on page requests – especially if you receive plenty of traffic. Is the page load vs CPU load worth the extra time?

  • @Jamie: haha, don’t feel old I just have great teachers =).

    The extra load gzipping files would put on page requests is well worth it.

  • Pingback: Web 2.0 Announcer()

  • Pingback: Blog Xebia France - Revue de Presse Xebia()

  • I m in the web design and development business since 5 years.. but still feel like a newbie as there are many things to learn… thanks for the tips..

  • good tips these. as someone who used to have to make do with dial up internet access, i can remember what a pain it was to have to wait for a site to load. 🙁 even now, with broadband, i find that if a site doesn’t load quickly, i make a quick decision as to whether to even bother, or just move on to the next one…

  • These are great tips. Thank you. I guess everyday you learn something new, hey.

  • @Ruby: Thanks for the kind words, hope I can help in my future articles for CatsWhoCode.

    @Kouji: I had to deal with a dial up connection for about 2 years and I was fine with it being slow. Now I have broadband and I still cannot stand slow loading websites it’s like the site is not even worth it. Thanks for the comment.

  • Pingback: JohnPuPu » Blog Archive » FreeBSD Patch file 初體驗..(lighttpd mod_deflate module for freebsd)()

  • Or you may use this fast and helpful cache system:
    php-speedy at aciddrop.com
    with some testing ( js files ) it works nice and reliable.

  • You can also check using online tools how fast your site loads after you apply some tunings, for example, by http://Site-Perf.com/

  • i really like to play with .htaccess commands and these are one’s i never knew about and i am really amazed to see that this post was written by a 13 year old youngster i am impressed. very good post Hayes Potter.

  • @Milo and Zuborg: In my opinion the best tool to test how fast your website is, is YSlow with Firebug.

    @MOin: Glad I could help, thanks for the kind words. =)

  • @Hayes

    I still use that old .htaccess mod_deflate code that I came up with in ’06, but I use a much more complete caching scheme in .htaccess, if your interested Hayes you can read all about .htaccess caching on my blog. @http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

    Keep up the great work little dude!


    Hey I love playing with .htaccess as well, in fact I’ve been blogging about all the cool .htaccess tricks I’ve learned into one massive htaccess tutorial.

    Hope You love it!

  • @AskApache: Thanks, I will defiantly check it out for my new design site. Thanks again for the kind words.

  • Pingback: Vote for this article at blogengage.com()

  • OK I don’t really understand how this actually works but can I just add this into my .htaccess

    Header set Expires “Wed, 21 May 2010 20:00:00 GMT”

    How far ahead can I set the expiry date?

  • Dan

    Great tips, I just did it and my website and it works smoothly.

    thx! 🙂

  • Thanks for some great tips. I can especially use the one about CSS at the top and Java at the bottom of the page. I assume you’re talking about the html page? It’s great when a 13 year old can teach new tricks to a 54 year old!

  • @David: Haha, thanks makes it feel worth it.

  • Some great tips I actually wrote a similar article that was based around speeding up joomla, though the later points are universal


    @askapache, i actually stumbled across your site in my hayday as well and very useful!

  • Thanks for the tips. I can’t believe that you are so young to have so much knowledge. (this is coming from an old guy)

  • Your point to make few http requests is spot on. One pet peeve I have with our site is that it sometimes loads slowly because of an external http request to an affiliate site. Sometimes it can slow down the whole page load since it’s right at the top of all our pages. Yuck!

  • The absolute biggest time waste is the number of files your webpage has to load. Images, CSS, and Javascript all have been to retrieved from the server 2 at a time (default is 2 for IE, FF is 4, but it can be changed).

    That is why you ALWAYS use 1 CSS file and 1 javascript file.

  • Very interesting tips. I’m going to try it with my Joomla website. Are you realy 13 year old?

  • Kelly

    Hi guys. Very interesting tips, but i dont know where set to make CSS load first (top) and javascript after. thanks.

  • Ali

    great tips….
    I have some questions:
    1. Is that code work with Joomla!?
    2. I use Joomla! CMS and want know if I add that code to .htaccess is more compress .js and .css file or if I add this code to .css file and change that extention to .php?

  • These are great tips. Thank you. I guess everyday you learn something new….

  • Great tips, the only problem arises when someone changes the design/css on their website then you cant see the changes unless you clear your cache.

  • Thanks alot Hayes it helped alot.
    there is a free script i found on code/google to speed up the website or the scripts installed on it let me know if its ok to post the link so we can if its really works.

  • There is an open source tool – Web Optimizer ( http://code.google.com/p/web-optimizator/ ) that can accelerate your PHP website in a few minutes. One-click installation, ease interface, dozens of settings, all optimizations are done automatically.

  • This is good solution , but for Joomla I using special Web Optimizer for Joomla 1.5.
    He have more that 50 settings in admin panel. I have 8 sites , that using this plugin.

  • I has try to check few plugins for Joomla, but Web Optimizer for Joomla was the best. My site working now on 70% fasters.

  • Speed had a big impact for me on revenue. I noticed that revenue and enquiry rates dropped at peak times! Investigating further I did some tweaks including your deflate and headers trick and got the site speed up by 70% and revenue and enquires are at an all time high.

  • This is becoming especially relevant now (2010) since I hear that loading speed has apparently become more important in the Google algorithm.

  • Completely Amazing! I am also one of website developer but the extreme concept of this post really discloses some of authentic one.

  • Hi,
    Tell me some methods by which I can increase the loading speed of my site.