Web Site Design Tips From A Beginner: 2009-02-17
I have recently done some work to make my web site run faster, even if it was only slightly so. I'd like to share the knowledge I've learnt while doing this, while it may seem like common sense to experts, or even beginners, or even mundane, I found these to help me out. I didn't really have any real web development experience before this, the last site I worked on being a Geocities site, so all of this is coming from a real beginner.
Optimize your images.
There are lots of ways to go about this. What I did was found an image tool that works really well, Smush It. This tool will reduce your image's size, making it load faster, which is always a good thing. I have run this on all images on my site, reducing their size an average of 7% each, the biggest saving I had was 15% on one file. This does not reduce the quality of the images at all, they look exactly the same before and after.
Eliminate your white space and compress your CSS files.
Eliminate whitespace, this might be harder for some people than others, but if you can eliminate unneeded whitespace in your code, ie. linebreaks, spaces, that don't need to be there it will reduce your file size, and your scripts will run just a little faster. Of course it will be harder to look at and edit, but you can choose to either get used to it, or keep a copy with whitespaces to edit, and simply run it through a program that will eliminate them before uploading. You can use an online tool to do this, and it will take your code and compress it as small as possible. I found a few good ones for CSS, they convert everything to shorthand and take out spaces etc. Using this reduces my filesize in half, making it easier for people to load my page, though harder for me to edit. Now although I recommend keeping two files, one to edit and one to use on your site, I found this harder to do in practise when I was constantly editing things on a daily basis. I have learnt to edit my CSS file, just mentally adding breaks where needed, doing this has reduced the size of my CSS file by about 30%. I have also removed the comments from my CSS, but keep a back-up with comments in case I ever need to see them. This has always helped to keep my HTML/PHP files a little smaller, though not by much.
Limit your SQL calls.
I just recently cut the load time of my front page in half by making a simple adjustment. Every time the front page was loaded it would update the latest modified pages in the database, checking the timestamp and placing it into the database. This was necessary because I made all my edits through the FTP, opening up the web pages and editing them manually. I have since created a way to edit my web pages on the web, making it easier to edit them, but I never changed the latest modified script. As my web page grew my front page slowed down more and more. Finally I figured it out and changed it so it updates all of the web pages whenever I edit a page, not when I open the home page. It still updates all of the pages in the database, not just the entry for the page I recently edited. This is because I still edit some pages manually, any page that has code in them needs to be edited manually and not in my editor, which is about 5% of my pages. This if fine for now since I'm the only one that edits pages and the load time is still far from unbearable, about half a second to a second. I plan on updating my editor to allow for the PHP code, not just the HTML code so that I can reduce the number of entires that are updated whenever I edit a page.
The less you write to your database the better, if you find things are starting to slow down perhaps you are making too many writes for a simple instruction, why change every entry if only one needs changing? You should always plan things out ahead of time to reduce the amount of writes you will have to make in the future.
Use your database calls wisely.
When selecting data from the MYSQL database be as specific as possible, if you are not selecting all of the columns of the database don't use "Select * from", instead only select the columns you will need "Select Name, Current from". Also use a where attribute where possible to eliminate having to select the entire column, "Select Name, Current from database Where Username '$Count' for example". The more specific you are the less your site has to search through the database, which will speed things up.
Don't use excess commands.
Never put two echo statements in a row. This might make it easier to view when your editing the code, but it really can all be put in one echo statement. If you have a variable and need to break the brackets simply add a "." before the string, and before the quotes before you continue with the HTML. For example "echo 'hello' .$username .'Welcome. Today's newest article is ' .$new .'.';".