This question has been on my mind for quite some time already: “What makes a website a good website?” Besides that, there are other related questions that I’ve been thinking about too lately; Questions like “Why is it loading so slow?” and “Is it possible to make it load faster?” I’m no expert in anything web related, but I would like to voice out what I think and I hope that my thoughts and suggestions will be helpful to current web designers/developers, as well as those who plan to start making their own websites.
What
For now, I would just like to focus on blogs. Factors that immediately came to mind are:
- Pictures or cute girls
- Pictures of hot girls
- Pictures or wannabe cute girls
- Pictures of wannabe hot girls
- Pictures of food (with girls posing)
- Pictures of uncommon places (with girls posing)
- Pictures of uncommon objects (with girls posing)
- Childish writings by cute girls
- Childish writings by hot girls
- Childish writings by wannabe cute girls
- Childish writings by wannabe hot girls
- Fancy website designs
On the contrary, these are the factors that usually repulse readers from one’s site:
- Pictures or males
- Childish writings by males
- Boring website designs
So as you can see, 7 out of the 12 factors of success I’ve just mentioned consists of pictures with girls in them, and 11 out of 12 of them are related to girls, which is pretty safe to say that pictures and girls are the main source of attraction. I like blogs with pretty pictures of girls too! Abso-fucking-lutely no doubt about that! But althought blogs with pretty pictures are somewhat aesthetically pleasing, they can come at a cost, mainly the cost of losing your readers with crappy connections, especially impatient ones with crappy connections like myself. I can’t remember the number of times I quit my web browser just because a site is taking too long to load.
Why
But occasionally when I do wait until a blog completes loading, I normally find out the reason why it’s taking forever to load just by taking a quick glance at it. These blogs have a plethora of pictures in just a single post, and vary from 5 to 10 posts on the front page. In addition to that, some of them have other fancy features like Flash headers, oversized picture headers, Flash twitter widgets, JavaScript navigational bars, videos and Flash ads to name a few.
A quick benchmark of one of these bloated sites (I shall call it blog-X) show a shocking number of items being loaded:
- 7 Cascading Style Sheets (CSS)
- 212 Images
- 16 JaveScripts
- 2 application objects
How
Blog-X has a total of 7MB+ of data to be loaded, which is fine if you have a connection of 5Mbps or more. Which means people with shitty connections, mainly Malaysia, with connection speeds that don’t justify their advertised speed of <insert fake speed here>, will suffer, and not to mention delay times and queue times, which adds up to approximately 2-3 minutes of your life drifting away, slowly, waiting for Blog-X to finish loading.
Over the years, i’ve learnt that in web designing, the most important thing to remember is loading time. Try to reduce the number of items your site loads when someone visits it. I like to assume that everyone has a slow connection; It helps to eliminate unnecessary items being loaded, mainly flash and JavaScript objects. Other ways that i’ve learnt are:
- Compress Cascading Style Sheets (CSS)
- Compress JavaScripts
- Optimize images
Referring back to blog-X, 7 style sheets!? Why not just put them all into 1 file? Wouldn’t it be easier to go through 1 file instead of 7 different files to find the CSS property you’re looking for?
And c’mon, 212 images?!? Do you really have to load that many? Change the number of posts that show on your front page! If you know you’re going to write a shit load of trash and upload tons of unoptimized images, then reduced it to a post, or 2 at most. No one wants to wait forever for your site to load while it’s hogging every last drop of connection speed they have. It’s just downright depressing.
Not to forget, 16 JavaScripts, consisting of a few Twitter scripts, a few web counter scripts, and a few more random widget scripts. We don’t need to know how many people visited your site, keep the numbers to yourself. We also don’t need to know when you’re going to bed, when you woke up, what you’re eating or if you’re in the shower or not. These are the type of things that your readers can live without, if not less.
One good compression script for JavaScripts and CSS I found to be very effective and easy to use is Minify. I love how you can combine like files into a single link.
If you’re using WordPress, a possible way of reducing load times is to modify your theme’s single.php file so that it displays a single post per page, while retaining the number of posts shown in your archives per page. The way to do this is to first duplicate your single.php file and rename the duplicated one to home.php. In your index.php file, paste the following code under your get_header(); line.
< ?php $wp_query->is_single = true; ?>
So it should end up looking something like this:
< ?php get_header(); ?>
< ?php $wp_query->is_single = true; ?>
Next is to open up your home.php file and paste the following code under your get_header(); line too.
< ?php
$i=0; // Initialize to Zero;
if (have_posts()) :
while (have_posts()) : the_post();
if ($i==0) {$recentpostid = $post->ID; $i=$i+1;}
endwhile;
endif;
//get only the latest post
$posts = query_posts( 'p='.$recentpostid."'");
?>You’re done. Right now your main page should show 1 post per page in the format of single.php.
If you’re wondering why I didn’t just change the reading settings in the admin panel, it’s because if I did, the main page will indeed show 1 post per page, but if I click into my archives, it’ll also show only 1 post per page, which is really annoying if I’m trying to go through my old posts.
When it comes to uploading pictures, I like to first optimize it with Smush.itTM and post thumbnails instead of the full size, which saves on loading time and lets readers have the choice of choosing which picture they prefer to view in full size.
CSS has become so powerful now that it is capable of replacing images. If you’re using Safari 4 or Google Chrome, you should be seeing a blue gradient in my header. It’s done using CSS, not images. Same goes for the calendar on the left of this post. As mentioned in my first post, the only image I’m using for this theme is the “leafy” divider at the end of this post.
Therefore
This article my not be entirely true, but it is based on what I’ve noticed and learnt. Besides methods mentioned above, I’m sure there are other better ones available out there. If anyone would be kind enough to share, please feel free to contact me using the contact form.
