Speed Up your Website, Quick!

by Hayes Potter. 36 Comments -

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
</FilesMatch>
</IfModule>

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"
</FilesMatch>

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!

Comments (36) - Leave yours

  1. Jamie Souef said:

    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?

  2. Web 2.0 Announcer said:

    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 websi…

  3. kouji / captivating Capiz said:

    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…

  4. Hayes Potter said:

    @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.

  5. MOin said:

    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.

  6. AskApache said:

    @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!

    @MOin

    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!

  7. David said:

    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!

  8. Donace said:

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

    http://thenexus.tk/my-need-for-speed-14-ways-to-speed-up-joomlahtml/

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

  9. CyberberCucina Gourmet said:

    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!

  10. Desk Coder said:

    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.

  11. Kelly said:

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

  12. Ali said:

    great tips….
    tanx.
    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?

  13. Albatol Network said:

    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.
    thanks

  14. sunnybear said:

    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.

  15. Andrei said:

    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.

  16. Andy Holiday said:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!