How to preserve bandwidth and speed up your site

By: jez

30-01-2007

1 comment

There are several ways of preserving bandwidth when you are running near your bandwidth quota:
For those of you who have not bandwidth limit per month, read this article as well, because I am going to tell you how to speed up your pages big style

Different approaches can be used to increase the time your website is displayed on your users computers.
You can measure the time it takes for your page to load with Firebug, an extension for Firefox. Once downloaded, installed, Firefox restarted (use the brain hack to keep open Tabs), you will find a small icon in the lower right area of your browser. Click enable, if it asks, then you can start viewing your page using the “Net” -tab (all) of Firebug. It will tell you how long the page took for loading. You will be surprised by the wide spectrum of details you will get to know about your website. E.g. using fat script libraries such as (full) scriptaculous or prototype take quite some time to load. Often whole libraries are included for effects that only need a handful of functions (lightbox!). More under a.4 later on.

a. reduce the over-all size of files/data that will be transfered when accessing your site


   a.1 images (jpg/png/gif)
   a.2 markup (php/html/css)
   a.3 stylecheets (css)
   a.4 javascript (js)
   a.4.1 overview of different lightweight javascript libraries/frameworks
   a.5 general (plugins, temporarily removing 'fat files')

gif)

Many websites use a high amounts of images, and there is nothing bad about it,
as long as a suitable compression is used. There is a difference between images compressed with jpg (jpeg), png and gif.
While jpg is great for images that feature loads of different colours, gradients and generally speaking pictures (photos), png and gif make more sense if an image does only consist of few different colours (max. 256 for good results). Gif images have to be used if you are going for transparent or semi transparent images. PNG can be transparent as well, but there are issues with the Internet Explorer, so I’d not recommend using png for transparent images. A jpg compression of 60 is often far enough, no need to go by even higher, because most of your users will most likely not see any difference. The difference file size concerned is massive.
You can easily safe some kilobytes there. REMEMBER: less kb to download = faster display of site. Safing photos in gif or png file format makes them ugly and big, so stick to jpg.

a.2 Save bandwidth and optimize speed using valid markup (php/html/css)

While this seems to be hard for many designers and programmers, one should try to produce valid markup.
Valid markup displays faster on many computers. Don’t over comment your source on websites.
It might be a good idea to keep local commented copies of your files, but in the web that’s only resource and thus speed hogging.

I’d recommend this online HTML tidy program for checking your markup, as well as the official w3c markup validation service [For CSS]
A great online tool to strip comments from your code (html/js) is memtronic’s packer
as well as dean edward’s packer.

a.3 Save bandwidth and optimize speed using compressed CSS

Compressed CSS is loaded like ordinary CSS, but simply faster. REMEMBER: less filesize = less load time of page
If your pages’ CSS is loaded faster, the site is earlier displayed on your visitors’ PC. He/she is then more likely to not leave your page in the first 10 seconds if he/she sees the content. It is essential to aim for the below 10 seconds (check the time your users remain on your website with Google analytics). There are some CSS compressors that work and others that proclaim they work, but don’t. Here are three, that definately work more or less depending on the complexity of coding.

CSS compressors
Flump cake css optimiser
icey’s css compressor
css formatter and optimser

a.4 Save bandwidth and optimize speed using compressed js

Many WordPress scripts want you to include big and fat javascript on your blog. Usually those can be compressed, downsized and optimized. I mentioned two compressors before: memtronic’s packer
and dean edward’s packer.
A by far even better compressor is dojo shrinksafe.
You can use these compressors to remove descriptive lines, comments and examples from the source. Usually compressed files will still work. If they don’t, use another option or different compressor. Be sure to compress valid js markup only.

a.4.1 Overview of javascript libraries and compress JS

So basically we all know scriptaculous and prototype. Some also know mootools (and moo.fx), but my personal #1 is byte.fx with an overall size of 3kb.
Prototype and scriptaculous can be compressed to some extent, Steve Kallestad did that and offers these compressed files on his site:

The downloads are available at:

Prototype.js 1.50rc1(25K as is, 13K with gzip compression, 64K uncompressed)
scriptaculous 1.65 (41K as is, 20K with gzip compression, 105K uncompressed)
combined prototype and scriptaculous (62K as is, 29K with gzip compression, 169K uncompressed)

Be sure to check them locally before you take these versions for an online test-walk!

a.5 Save bandwidth and optimize speed deactivating or tweaking plugins

Many wordpress plugins are filled with explanations, comments and examples.
These can be removed to save additional space and thus increase the download speed of your website.
Use the mentioned above compressors to compress plugins like Lightbox or Flash-embedding plugins.
If you ever run low on bandwidth, deactivate unneeded plugins (and later on re-activate them!) for the needed time.
You will be surprised by the amount of traffic the lightbox.js does generate.
Also check your site for deadlinks, sometimes a deadlink generates a 404-error page. If you got custom error-pages that render a nice “not found”-page, this is a massive traffic and bandwidth generator. Locating these files and fixing their deadlinks is essential to maintaining a slick site.

b. enable server-side options to tweak the way stuff gets transfered

  b.1 gzip compression
  b.2 *Sql tweaks / WordPress 2.1

b.1 Save bandwidth and optimize speed using server-side options

If you can get your hoster or admin to enable mod_deflate (former mod_gzip), you are most likely to save tons of bandwidth, because of serving compressed content. Note: not all browsers support this. Read all full tutorial on that here.

b.2 Save bandwidth and optimize speed using sql-tweaks (WP 2.1)

In January this year, WordPress 2.1 was released:
They state:
[...] Much more efficient database code, faster than previous versions. Domas Mituzas from MySQL went over all our queries with a fine-toothed comb [...]
But if you want some real fast WordPress a-like CMS, go for Flatpress, a SQL-less CMS (currently under development). Static files, such as html, load faster than any dynamic ones. just as a golden rule.

c. move the server to a location where most of your visitors come from

  c.1 mirrors and foreign hosting

c.1 Relocating your website

Sometimes it makes more sense relocating your website to the country of #1 traffic origin or offering a mirror server then merely tweaking your site. If you’d for example have a Fansite dealing with an American (US) actress or model, but run your website from Europe, then most of your targeted audience (Americans) will have a slower site experience than if you’d place a server on the American mainland. Even ‘mainland’ is not equal mainland, due to the huge geographic distance of the east and westcoast. Thus offering mirror might be a wise idea. So based on the origin of site request either www1 or www2 is accessed.

I will be moving to DREAMHOST (LAX, USA), but not merely because of the later stated issue of traffic origin. In the next few days this site will be moved (early February), so if you experience any trouble, please be patient, feel free to comment or drop me a mail at jez at this domain (h4x3d.com). I hope you enjoyed this article and also checkout my five tips for your daily work life.

display a div on top off flash

By: jez

04-08-2006

code

0 comments

The solution to display a div on top off flash for the newer browser is the wmode option opaque or transparent.

[...] general embed object code here
parameter name stuff like movie source and quality here
[param name="wmode" value="opaque" /]
wmode=”opaque”>[end embed code]

the opaque part is the important thing to remember.
the other attributes remain the same
The following browsers currently support windowless mode:
Most of the old browsers dont support it, but as >90% use IE 6 + Firefox, that`s okay.

* Macromedia Flash Player version 6,0,65,0 (Windows) or 6,0,67,0 (Macintosh) or higher required for this feature.
Source: google.com

Duplicate entry ?0′ for key 1

By: jez

23-04-2006

code, Wordpress

0 comments

1. Go into your phpMyAdmin panel.
2. For each tables structure, edit the first entry (which should be a primary key such as ID).
3. Delete the 0 in the default value and select “auto_increment” in the drop-down menu next to it (on the right).
4. Save.
5. Go to the next table and do the same.

Changing Permalink structure (removing datestamp)

By: jez

04-01-2006

code, Wordpress

0 comments

If you used the default permalink structure,
you’d have something similar to:

/%year%/%monthnum%/
%postname%/

now say you want to get rid of the dates
(maybe seo-wise driven?)
you’d have

/%year%/%postname%/

But now all your posts (and post slugs) are outdated,
thus returning 404 or if you got the right
redirection rules return you to some error document.
That’s exactly what I did and troubled with.
Now there is this guy scotty from fucoder.com
who is a real genius.
He told me to solve this problem by
by adding an extra Mod_Rewrite rule before the rules
generated by WordPress.
In my case:

RewriteRule ^([0-9]{4})/
([0-9]{1,2})/([0-9]{1,2})/
([^/]+)/?$ /$4/ [L,R=301]

He told me to put that right after RewriteBase
to install this redirection and it worked wonders.
Thanks scotty!

Vielleicht auch fuer einige interessant ist dieser Artikel ?ber das Aendern von Permalinks in WordPress (alte uri /archiv/ neue /)

find /path/to/typo3temp/ -type f -atime +10 -exec rm -f {} \;

By: jez

26-12-2005

code

0 comments

// Delete all files that have not been accessed over the last 10 days: # find /path/to/typo3temp/ -type f -atime +10 -exec rm -f {} \;

TYPO3.org: English (main) list archive

.htaccess cheat sheet

By: jez

12-09-2005

code, Oldskool

0 comments

Here is a simple cheatsheet for the .htaccess file:

Enable Directory Browsing

Options +Indexes
## block a few types of files from showing
IndexIgnore *.wmv *.mp4 *.aviDisable Directory Browsing

Options All -IndexesCustomize Error Messages

ErrorDocument 403 /forbidden.html
ErrorDocument 404 /notfound.html
ErrorDocument 500 /servererror.htmlGet SSI working with HTML/SHTML

AddType text/html .html
AddType text/html .shtml
AddHandler server-parsed .html
AddHandler server-parsed .shtml
# AddHandler server-parsed .htmChange Default Page (order is followed!)

DirectoryIndex myhome.htm index.htm index.php Block Users from accessing the site
order deny,allow
deny from 202.54.122.33
deny from 8.70.44.53
deny from .spammers.com
allow from all Allow only LAN usersorder deny,allow
deny from all
allow from 192.168.0.0/24Redirect Visitors to New Page/Directory

Redirect oldpage.html http://www.domainname.com/newpage.html
Redirect /olddir http://www.domainname.com/newdir/Block site from specific referrers

RewriteEngine on
RewriteCond %{HTTP_REFERER} site-to-block\.com [NC]
RewriteCond %{HTTP_REFERER} site-to-block-2\.com [NC]
RewriteRule .* – [F]Block Hot Linking/Bandwidth hogging

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ – [F]Want to show a ?Stealing is Bad? message too?

Add this below the Hot Link Blocking code:

RewriteRule \.(gif|jpg)$ http://www.mydomain.com/dontsteal.gif [R,L]Stop .htaccess (or any other file) from being viewed

order allow,deny
deny from all
Avoid the 500 Error

# Avoid 500 error by passing charset
AddDefaultCharset utf-8Grant CGI Access in a directory

Options +ExecCGI
AddHandler cgi-script cgi pl
# To enable all scripts in a directory use the following
# SetHandler cgi-scriptSave Bandwidth

# Only if you use PHP

php_value zlib.output_compression 16386
Password Protecting Directories

Use the .htaccess Password Generator and follow the brief instructions!

The CheckSpelling Directive

From Jens Meiert: CheckSpelling corrects simple spelling errors (for example, if someone forgets a letter or if any character is just wrong). Just add CheckSpelling On to your htaccess file.

The ContentDigest Directive

As the Apache core features documentation says: ?This directive enables the generation of Content-MD5 headers as defined in RFC1864 respectively RFC2068. The Content-MD5 header provides an end-to-end message integrity check (MIC) of the entity-body. A proxy or client may check this header for detecting accidental modification of the entity-body in transit.

Note that this can cause performance problems on your server since the message digest is computed on every request (the values are not cached). Content-MD5 is only sent for documents served by the core, and not by any module. For example, SSI documents, output from CGI scripts, and byte range responses do not have this header.?

To turn this on, just add Content Digest On.

Source: the net / google