Connect With WRD
feed via e-mail
feed via e-mail

Info: Every user / developer has different experiences. Any more tips that you share in the comments will be appreciated.

"Why is my website slow?" is a popular question. And it is a vital problem for a website.

Faster the website, happier & more the visitors. That's a well-known fact.

There are several factors that may slow a website. In general, all of them can be solved. This just depends on how much effort you can spend on it.

How much time do you have?

You may not have enough time to spend on speeding up your website. Depending on your free time, you may choose the steps to apply like mentioned below:

  • I have very limited time: Apply step-1, step-2, step-4 & step-5 (only the compression parts) and step-6.
  • I have some time: Apply all of them except step-3 & step-8.
  • I rule the time: Go with them all.

Improve Website Speed

Most of the tips are the ones that you probably know. So, you can use the list as a checklist (which it normally is in my "customer notes sheet" : ) ).

Here are the tips:

1. Get A Fast & Less-Loaded Web Server

This is a must. Whatever you do to make your website faster, if it is served slow, there's nothing to do.

Make sure that the server your website is hosted has low ping values & it is not over-loaded. Specially if you've a database and/or using dynamic files (like asp, asp.net, php, ruby..) server over-load can kill the performance.

If you've a simple website with few visitors then shared hosting is ok. For a website getting popular, think of a VPS with guaranteed RAM & CPU usage. If the website is already popular, a dedicated server will be the best performing one.

2. Know When To Use GIF, JPG & PNG Files. 

Playing with the quality of images will dramatically lower the sizes of them while they will still be looking good.

GIF is suitable for images with few colors like logos, text & line art. When saving a GIF file, make sure you use a small color pallette (learn more).

JPG is good for images with lots of colors & details like photographs. Decrease the quality of a JPG image before saving. It will still look good for a web image (learn more).

PNG, a format specially for websites, has great quality – both transparent & non-transparent – is specially functional when you're in need of quality transparent images. Don't forget that IE6 has problems in displaying them (learn more).

3. Use XHTML – No Tables

This is easy to tell but may be harder to implement for anyone that has few experience with XHTML.

The thing is, tables are rendered slower than DIVs by browsers. You can do more with less code & no need to say it is much better to be compatible with any browser (including mobile browsers), in means of SEO, etc..

Update: There may be cases when using tables are much more logical like "tabular data". You may have to code a lot for creating the look of a simple 5 columned table. Don't do that & use tables when needed.

What is tried to be mentioned here is, use XHTML rather than tables in general. But don't try to draw images with XHTML.

4. Use CSS Smartly & Compressed

  • Mention every style in CSS files.
  • Find the common properties in objects, define them once & try not to repeat them.
  • If using a significant amount of totally different properties for a specific page, define them in another CSS file & only include on that page. So users viewing other pages won't need to download those properties.
  • Compress your CSS file (you may try this, this or this).

5. Merge & Compress JavaScript Files

Try merging JavaScript files prevent multiple includes (see step 6).

If a JavaScript file will be used only in few pages, try to include them inside those pages only (like CSS in step 4).

Compress JavaScript files. It lowers the size seriously & doesn't have any bad effects on your side. This & this are some of the popular compressors.

6. Manage Included Files Better

There may be several files included in webpages like CSS files, JavaScript files and other JavaScript files for statistic services, social bookmarking sites, widgets & more.

Try to decrease the number of these files:

  • If using digg-reddit-like voting widgets, don't use them in stories that won't hit the frontpage & remove the ones that were submitted few days ago as they won't have any help after sometime.
  • Use only 1 statistic service if possible. Every web-based service requires new files to be installed & they are called each time a page is loaded.
  • Host files on your side & don't use web addresses as file paths.
    • If you're using any JS frameworks like jQuery or MooTools, don't call the .js files from their websites but download & upload them to your website.
    • Don't try to call any file from a web address like "http://.." as this always requires dns queries to be done & will work slower.
  • PHP Speedy (WRD post)is a very effective solution that does all the combining & compressing automatically. You may want to try it.

7. Use HTTP Compression

HTTP compression is one of the most effective step with a little effort.

Today, almost every browser & web server supports HTTP compression. Using it, your files are sent to the visitor compressed & un-compressed on their side & you can have up to 90% success for the text based files (like HTML).

You have 2 popular choices with this:

8. Better Coding

This is for websites which does not use any ready-to-use systems like WordPress, Drupal, ExpressionEngine or similar (if you're using these then you're lucky as they are already well-coded).

Besides the better XHTML & CSS coding, the dynamic coding of the website directly effects the performance.

As you can guess, this is a huge subject. But there are some major things like:

  • Seperate the static & dynamic content. This will help writing less-code.
  • Create smart & effective functions. For ex: if you're going to use a user's name & birthdate at the same page, don't run 2 queries or functions, your function must call 2 of them. Simply, try to do everything once.
  • Connect to the database as few as you can & once connected, call only the data you need.
  • Try to keep database sizes small. If you've a large database, sometimes seperating it into several databases perform better, specially for the data which is reached not so often. From the server's point of view: 4-250mbs of dbs perform better than 1-1gb of db.

9. Cache Webpages

Caching is a superb way of decreasing the stress on the server by running more static files & less queries. It simply saves a static, HTML version of the page to be displayed & displays that file rather than the dynamic one.

For CMS applications like WordPress, there are already ready-to-use caching plugins (like WP-Cache). For PHP, here is a great article from SitePoint.

A small note, caching can also be done at the web server level. But if you're on a shared hosting account, you better be lucky to have it on.

What Do You Suggest?

Besides the tips mentioned above, what are your tips to make websites faster?

PrototypeXtensions is a Prototype.js and Script.aculo.us based JavaScript library.

It aims to add extra methods & components to Prototype.

Prototype Extensions

Currently, it has 3 components:

  • Core extension: class, cookie, event management & time calculations.
  • History: easy "set/get" parameter on hash of URL, observe the hash of URL & more.
  • Tabs: show / hide, select, Ajax / iframe.

Although the library is in very beta state, it is promising when considered what it currently does.

Jumpeye Components is giving away 3 FlashEff Premium Unlimited Licenses ($249 value/each) to WebResourcesDepot readers.

Details of the giveaway & how to join it can be found below the post.

What is FlashEff?

FlashEff is a Flash CS3 (and Flash CS4 ready) AS3 component for easing the animation process & creating stunning animations.

Tip: To see the beauty of the effects, click here to go to the effects gallery.

Flash Text Effects

It is also a collection of over 100 patterns (and growing) that enable cool animations and interactive actions on visual objects and texts. FlashEff can be used/customized from both, the visual interface and API.

The visual interface, FlashEff Panel, is a powerful online utility that loads inside your Flash CS3 IDE and configures everything for the FlashEff component.

FlashEff Effects

Using FlashEff, you can:

  • Create amazing animations with images, movieclips or text.
  • Create animated buttons without coding.
  • Perform commands and trigger actions on any event such as rollOver, press or doubleClik.
  • Add static or animated fitlers to any visual object within Flash CS3.
  • Most of the patterns can be combined to create complex animated objects.

FlashEff Pattern Creation Contest With $2500 Worth Prize!

Do you have advanced AS3 skills? Then create a pattern for FlashEff, submit it until 31 October 2008 & get the chance to be one of the winners who will earn $2500 worth prize.

Click here to see the details of the Pattern Creation Contest.

How To Win The Free Licenses?

Simply comment to this post & that’s all.

Winners will be selected randomly from commenters 1 week later (29 September 2008 – Thursday) with the SQL query below:

SELECT * FROM wp_comments WHERE comment_post_id=533 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all : ). 

Koders is a search engine that is a must-bookmark for developers.

It is used for quickly finding open source code, methods, examples, algorithms and more.

Code Search Engine

It searches code written in 30+ languages & categorized with 28 different licence types.

Koders also has pluging for Eclipse, Visual Studio & Firefox for integrated searching + it provides adding "code search" functionality to your site with a widget feature.

jWYSIWYG is a jQuery plugin for creating inline content editors easily.

It turns a textarea into an editor via a simple function below:

$(function()
{
    $('#wysiwyg').wysiwyg();
});

jQuery Inline Editor Plugin

It has very simple features that makes it suitable to be used in contact or comment forms & similar.

jWYSIWYG is lightweight (7kb packed) & provides the ability to add custom controls, like adding a "line break" function.

Templates.com, which presents various templates, illustrations, cliparts & more, has a handy new feature. 

A quality product from their database is given away for free every week (check their announcement).

They are starting with an illustration this week:

Free Illustration
The product will be free for a week & after that it will be paid again. So don’t miss the opportunity to download the product while it is free.

This is like a weekly inspiration. Just checkout this presentation page whenever you want & find a quality freebie (bookmarking it can be a good idea).

To download the products, a free membership is required & that’s all.

Other than the illustration offered this week, Templates.com offers other free illustrations besides the paid ones.

 

Bluff is an open source JavaScript graphing solution that uses canvas tags.

It is a JavaScript port to the Gruff graphing library for Ruby.

Open Source JavaScript Graphs

Bluff has only 2 dependencies:

  • JS.Class (2kb), which is a class for making JavaScript act like Ruby (which is definitely handy).
  • Google’s ExCanvas, for canvas support in IE6.

Creating good looking graphs is very easy with this graphing library & it has a well-documented API that is supported with examples.

Last week, a post had announced 3 Pro licenses giveaway for JCODER Java IDE ($79 value / each).

We have the winners selected. Before that, JCODER Java IDE is running a special 50% discount to WebResourcesDepot readers which is valid until 18 November 2008. Click here to get the discount.

To remember:

JCoder LogoJCODER Java IDE is a powerful Integrated Development Environment (IDE) for Java developers. It allows you to compile and debug your Java  program from the editor environment, as well as browse through your classes, etc.

Here are the winners:

  • stan (comment #18151)
  • SEANRON (comment #18311)
  • Marius (comment #18180)

Thanks to everyone who contributed & congratulations to the winners.

MenuMatic, a MooTools 1.2 class, makes creating dropdown menus easier, flexible & SEO friendly.

For users without JavaScript, it switches back on a CSS menu system.

MooTools DropDown Menu

Some features of MenuMatic:

  • SEO Friendly: Manipulates ıonly the existing links.
  • User Friendly: Hide-delay speed can be adjusted.
  • Accessible: Tab key navigates through main menu items & arrow keys can be used for dropdowns..
  • Fails Gracefully: When no JavaScript is available, switcches to suckerfish CSS based drop down menu system.
  • Stylish: Total style control with CSS.
  • Flexible: Many other controls like the opacity of menus…

The class can be used for both horizontal & vertical menus .It is also compatible with all major browsers.

P.S. Thanks to Jason from GreenGeckoDesign for the suggestion.

Panda is an open source solution that handles uploading, encoding & streaming videos.

All the process is completed via an elegant REST API.

Panda Video Stream
Panda
is designed to run in the cloud using Amazon's array of web services.

The application runs on a customised EC2 instance with everything pre-installed, including FFmpeg and an plethora of codecs.

SimpleDB is used to store all of data for video, encoding, accounts and encoding profiles. Uploaded and encoded video files are then stored on S3.

Other features of Panda:

  • Everything contained within one elegant Merb application.
  • Support for FLV, h264 for Flash, iPhone formats & more.
  • Panda gem for painless integration with Ruby on Rails and Merb.
  • Lovely little admin dashboard for managing your videos.

By default, Panda uses the JW FLV player but you can switch to any other video player easily.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com