Saturday, January 23, 2010

How to make your website load faster

Most websites these days share a very similiar layout concept - there is a "template" that contains the page's header, a side or top menu, a bottom "Copyrights" text, and a "middle section" that is where the actual page display is shown.

While other considerations, such as database performance, may impact the loading speed, the actual real cause for loading speed are the size of the HTML pages being transmitted, and the size and number of images (GIFs/JPGs etc) that are being sent.

Therefore, if you want to make your website load faster you'll need to make sure that your images take as less space as needed, and that your HTML pages are the smallest as they can.

Google is a good example site to look on.
If you'll look at the size of the HTML of their homepage you will see it takes just 4Kb, which is nothing!

So how do you achieve those tasks ?

1. Reducing images size - Use an images optimizer. Adobe's ImageReady and PhotoShop are a great product to do just that, as it allows you to save "optimized" images where they actually allow you to see a preview of how the compressed image will look like = allowing you to adjust maximum compression for best possible view.

2. Reducing HTMLs size

Now, as far as your HTML goes, here's a little quick tip: If your pages have a common structure (such as a table) that is used to draw menus or catalog items etc, you can dramatically increase the loading speed of such pages by creating a JavaScript function that does the "drawing" of the table row or cells automatically, where you just have to pass the parameters to it and it will do the drawing it self.

This amazingly decreases the page's size and makes it load very fast, and since there's no browser today that doesn't support JavaScript, its a sure go!

Here's an example of what im talking about:

-- Original Page --



Assuming this page has 200 table rows like that, thats at least 138 characters per row, which means 27,600 bytes (or 27.6KB!!) with only the table's layout and WITHOUT any information!

So, instead of doing this, you can convert this page into a very nice and quickly loading page using a simple JavaScript function that draws the table for you and saves you tons of time and speeds your loading up by orders of magnitude.

Here's how:

-- Optimized Page: --



As you can see, we created a JavaScript function, called dr(), which is short for "draw", which does the actual drawing of the table row's HTML portion. All it does, is you pass the parameters for ID, Name and Address to it, and it does the drawing for you. By using this approach, we now have turned those 138 bytes into 24 bytes without information, which means that on a page with 200 rows like that, the page size will now be 4800 bytes, or 4.6KB , thats quite a difference !!

Unoptimized = 27.6KB
Optimized = 4.6KB

That means we reduced the page's size by at least 85% if not more !

And that was a very short demonstration.
There are webpages that I saw, where every table row takes 2KB , so imagine a page like that containing 100 rows - it takes 200KB to send !!!

And if you can reduce a page like that to even 10KB, thats loads of a difference in loadup speeds.

Ponder that for a while, and feel free to leave your comments, feedback and questions.

Monday, January 18, 2010

Welcome to my Programming Blog!

Hello everyone,

Welcome to my programming tips blog.

My name is Miki and I am a software developer , programmer and engineer from Israel. It is 2010 now and I'm aged 31 years old right now, I have no diploma in computer science (although I did start my studies but quit in the middle, simply because i got a realy good job offer) but I do my work professionally and flawlessly.

Would like to give a little background about my programming experience now, so you should who I am and where I got from.

I had my first computer back in 1986, when I was just 8 years old - It was a Sinclair ZX-Spectrum that was connected to the home TV screen and used Cassette Tape to save its code !!!

In the beginning I started just by playing games in it, as a kid, but at some point I got curious and wanted to start and develop my own games, so thats when I actually started my first touches in programming using the Sinclair's BASIC language back when I was just 8 years old.

I got my first "official" computer when I was 10 years old as a birthday gift from my father in November 1988. This computer was IBM XT running 8086 CPU with 10Mhz speed, No HDD, and with a CGA display screen, and "just" 256KB of RAM. You have guessed it right - its a realy damn slow computer, compared to what it is today, but it was way more powerful than the Sinclair one I had. With this computer I started to write more complex programs in BASIC. At some point I realized that basic was a limited language, and that if i wanted to create computer games i needed operations like screen scrolling and FAST graphics rendering to be done, that was when I moved to Pascal. Pascal was a much faster language, and I have spent most of my youth ages 10-17 writing programs in Pascal (mostly) and in C (very few).

Pascal was still a limited language and in order to create realy fast calculations I eventually discovered that i'll need to learn how to embed "Assembly" code in my Pascal programs, so I then learned Assembly and discovered its such a simple yet powerful language, that I even wrote WHOLE programs from start to scratch in assembly. It was fun !!

So what kind of programs did i write from ages 8-17 , in BASIC, PASCAL and ASSEMBLY?
Many kinds of different programs: from simple drawing programs, to calculation programs, and then to encoding programs, compression programs, advanced sounds & graphics programs (big thanks to SWAG library for many of the knowledge!!), at some point I even started to create BIG projects such as: a complete audio editing software, graphics editing software, and eventually I even wrote a networking server (!!!) - a BBS software, written purely in Pascal, that was used to serve files to multiple users.

In terms of programming "touch", I can say i have it.
I didn't learn how to program the way they teach in the university today - filled with unuseful math, complex recursion tasks, and alot of realy UNUSEFUL technology being taught. My entire programming skills were learnt by REAL LIFE PRACTICE - in building hundreds upon hunders of programs in different languages.

Every big "project" or computer program is eventually made out of smal "chunk" procedures, or "sub-programs". So it actually came to the point, that after having learnt how to program to many hundreds of "small programs", I could KNOW exactly, intuitively, ALL THE "SMALL PROGRAMS" i'll need to use in order to create ANY BIG project !

In this blog, Im looking forward to share my insights on programming as well as to give tips on anything I can include: from networking and writing server-clients (which is where most of my work these days is done) all the way to algorithms, optimizations, operating systems and more that i can include.

I hope this blog will give you a different kind of view on programming, and that you will find useful answers here that can help you.

You are more then welcome to leave your comments and feedback on every post im going to bring in here and if you have any questions feel free to ask them and i'll do my best to answer them if i have the time for it !

Thank you for reading all of this,
Im more than even sure you WILL find this blog useful and more than even glad you found this.

Respectfully,
Miki