The Apache Web server provides a feature called .htaccess file, which provides commands
to control a Web site. This file is simply a text file containing Apache directives.
Those directives apply to the documents in the directory where the file is located,
and to all subdirectories under it as well. Other .htaccess files in subdirectories may change or
nullify the effects of those in parent directories.

You have to be careful when editing .htaccess files, as a small mistake can make
your Web site stop working. You should immediately test the site to be sure it works.

You can use any text editor to create or make changes to .htaccess files.
Keep in mind that commands in these files should be placed on one line only, so if your
text editor uses word-wrap, make sure it’s disabled.
Be sure .htaccess file is uploaded in ASCII mode, not BINARY, or it won’t work.

Your text editor or operating system may probably not allow to save file as .htaccess.
The solution is to save the file as htaccess.txt and upload it to your server.
After doing that, you should use your FTP client and rename the file to it’s proper name.

Some sites do not allow use of .htaccess files, since they can slow down a server overloaded
with domains if they’re all using such files, and some things that they can do can
compromise a server configuration that has been specifically setup by the admin.
Just be sure to read their TOS carefully or ask permission from your host.

Here are the most notable and useful .htaccess examples…

Custom error pages

The most common errors are 404 (Not Found) and 500 (Internal Server Error).
Design your custom Web pages for these errors (you aren’t limited to these errors,
you can create an error page for each and every error).
Add the following commands to your .htaccess file…

You can name the pages anything you want, and you can place them anywhere you want within
your site. The initial slash in the directory location represents the root directory of your site.

Enabling SSI

If you want to use SSI, but can’t do so with your current Web host, you can change that
with .htaccess file. The following lines tell the server that any file named .shtml should
be parsed for server side commands…

If you don’t care about the performance hit of having all .html files parsed for SSI,
change the second line to…

If you’re going to keep SSI pages with the extension of .shtml, and you want to use SSI
on your index pages, you need to add the following line to your .htaccess file…

This allows a page named index.shtml to be your default page, and if that isn’t found,
index.html is loaded.

Redirects

You can use .htaccess file to redirect any request for a specific page to a new page…

Server-side redirects are very useful for shortening affiliate links.
Your visitors won’t be turned off by long links that are obviously affiliate links.
For example, to create a redirect at the URL:

http://YourSite.com/link

to point to the URL:

http://www.MerchantDomain.com/affil.cgi?12345

put this line in your .htaccess file…

Protecting your bandwidth

“Bandwidth stealing,” also known as “hot linking,” is linking directly to non-html objects
on another server, such as images, electronic books etc. The most common practice of hot linking
pertains to another site’s images.

To disallow hot linking on your server, create the following .htaccess file and upload it to
the folder that contains the images you wish to protect…

Replace “YourSite.com” with your own. The above code causes a broken image to be displayed when
it’s hot linked. If you’d like to display an alternate image in place of the hot linked one,
replace the last line with…

Replace “YourSite.com” and stop.gif with your real names.

Preventing directory listing

Typically servers are setup to prevent directory listing, but often they aren’t.
If you have a directory full of downloads or images that you don’t want people to be able
to browse through, add the following line to your .htaccess file…

The * matches all files. If, for example, you want to prevent only listing of images, use…

Redirecting YourSite.com to www.YourSite.com

If search engines find both www and non-www links from other sites to your site, they may treat
http://YourSite.com and http://www.YourSite.com as two different websites with the same content.
This means that your site can be penalized for duplicate content.

Many experts recommend to set up a 301 redirect (permanent redirect) from YourSite.com to www.YourSite.com…

Replace “YourSite.com” with your real domain name.

The .htaccess file is very obscure and extremely useful when used properly.

Although WordPress and WordPress MU share somewhere around 95% of the same code, there are many more differences between the two than just multi-blog support. Here’s a thorough analysis:

Are there any other differences between WordPress and MU that I missed? Let me know in the comments!

SEO Techniques – Unethical

here are many unethical SEO techniques which SEO companies or an internet advertising company may use in their work which do not deliver the results anticipated at the time you purchase a company website design search engine optimisation service. You need to be careful that the company you choose does not advertise by using any unethical SEO techniques, as this can limit the potential of your internet advertising campaign. SEO techniques which are deemed unethical include meta-tag spamming, title spamming, hidden text, noscript content spamming and doorway and gateway pages. The risk of using unethical SEO techniques is harmful to your site long term and we recommend you stay away from them when proceeding with online media solutions and clever internet marketing promotions.

Unethical SEO Techniques – Meta-tag Spamming

Meta-tag spam is one of the unethical SEO techniques some internet marketing companies use. Meta-tags are html content search engine spiders use to quickly reference the content of your web page and what product or services you offer. What some companies do is spam the meta-tags “keyword” element with a long list of repeated search terms. They also then repeat this list in the “description” element of the meta-tags. This is an unethical form of SEO techniques as the correct way to use meta-tags is to place relevant keywords and a description about the web page itself in the meta-tags.

Unethical SEO Techniques – Title Spamming

Title spamming is also amongst the list of SEO techniques deemed unethical by internet marketing companies. As with meta-tags some website design companies place a long list of keywords in the title tags of the pages. The correct way to use the title tags is to place a descriptive brief in the title tag relevant to the web page itself. The title tags have to be done properly because it is through title tags that search engine spiders identify your web pages and what they relate to and if done correctly can be a clever internet marketing strategy.

Unethical SEO Techniques – Hidden Text

Another one of the unethical SEO techniques is hidden text when carrying out company website optimisation. Hidden text is when you try to place a long list of keywords on the page and style them with a cascading style sheet (CSS) to be “invisible” or blended into the web page. Using the hidden text technique is useless as search engine spiders are now upgraded and will know that you have tried to hide the content and can penalise your site for it. Our SEO consultancy team recommend strongly that you stay away from using hidden text on the pages as it can seriously de-value the other SEO techniques which may have been employed on your website for your clever internet marketing search engine optimisation campaign.

Unethical SEO Techniques – NOSCRIPT Spamming

NOSCRIPT, when abused, is another one of the undesirable and unethical SEO techniques which may be used in your SEO promotion campaign. The NOSCRIPT is content which is not visible on the web page when viewed in a browser, but is visible to the search engine spiders. When used correctly, NOSCRIPT can be beneficial to your company website. Our SEO Consultancy advise that if you do decide to use NOSCRIPT content that you do not spam the content with loads of keywords continuously repeated.

Unethical SEO Techniques – Doorway and Gateway Pages

The use of doorway or gateway pages is another form of undesirable SEO techniques for website optimisation. There are pages that are created to redirect to your homepage once clicked on. This is done via a meta-tag redirect script, mainly done by companies selling sex toys and Viagra. They optimise doorway or gateway pages for high searched terms, for example “cheap computers”, then once the pages are clicked on you are redirected to their website.

Our website promotion consultants do not recommend this as they are completely useless and will not be beneficial to your website and are not a clever internet marketing solution long term.As you have read there are many unethical SEO techniques which online marketing companies use. You have to be completely sure that you have chosen the right seo company who employ correct SEO techniques to use for your clever internet marketing advertising.

Weblinx SEO Techniques

At Weblinx we are an internet company that work in accordance with the Google guidelines for correct website design. We stay away from using any unethical and undesirable SEO techniques within our work. We are masters within internet marketing strategies and help you in your quest to be above your competitors when you advertise your business with our company website design search engine promotion techniques. A clever internet marketing strategy is the use of Google maps. They are free and can be used for national seo and local seo and are a free service offered by Google. We will guide you on how to implement your Google maps for national seo and local seo or we will charge a small admin fee to set you Google maps up targeting the local areas to your business address. We have seo managers waiting to help you get your website positioned on page one using clever internet marketing strategies to compliment your Google map listing for National seo or local seo.

We recently discussed the 15 Key Elements All Top Web Sites Should Have . This post focused on elements relating to design, content and development. This time, we’ll move onto the important issue of Search Engine Optimization (SEO).

SEO is such a hot topic these days. How do you get your web site within the first page or two of the search engines? How do you increase your Google page rank?

There are companies who dedicate themselves full time to doing SEO at a pretty penny. Something a lot of people can’t necessarily afford to pay for or spend the time on.

However, there are some simple things you can do when building your site that will help increase your chances of having good results. In no particular order, below are 10 of these items…

1. Title Tag

Near the very top of a web site’s source code you’ll find various meta tags — the standard ones being the Title, Description and Keyword tags. The title tag is technically not a meta tag, though it is commonly associated with them. The title tag plays such a large role in the indexing of your web site, that it is considered the most important of the three.

A page title is the first thing a search engine will look at when determining just what the particular page is about. It is also the first thing potential visitors will see when looking at your search engine listing.

It’s important to include a keyword or two in the title tag — but don’t go overboard – you don’t want to do what’s known as “keyword stuffing” which does nothing but make your web site look like spam. Most people will include either the company name, or title of the particular page here, as well.

2. Meta Tags

There are two primary meta tags in terms of SEO — the description and the keyword tag. It’s debatable whether the search engines use the description tag as far as ranking your results. However it is one of the more important tags because it is listed in your search result — it is what users read when your link comes up and what makes them decide whether or not to click on your link.

Be sure to include a few relevant keywords in this tag, but don’t stuff it with keywords either. The description tag should read like a sentence — not a keyword list.

Due to “keyword stuffing” many search engines now completely disregard the keyword tag. It is no longer nearly as important as it was years ago, however it doesn’t hurt to include them in your source code.

When creating your keyword list, you’ll want to think of the specific terms people will type in when searching for a site like yours. Just don’t go overboard — too many duplicates are not a good thing (as in “web designer” “web designers” “custom web designer” “html web designer” “your state here web designer” – you get the idea). Those are all basically the same, so pick one or two variations at the most and move onto the next keyword.

3. Proper Use of Heading Tags

This is a very important element to consider when writing out your site copy. Use of heading tags helps users, web browsers and search engines alike know where the major key points of your copy are.

Your main page title should use the <h1> tag — this shows what your page is about. Use of additional tags, such as <h2> and <h3> are equally important by helping to break down your copy. For one, you’ll see a visual break in the text. But as far as the search engines are concerned, it will automatically know what your topics are on a page. The various heading tags give a priority to the content and help index your site properly.

4. Alt Attributes on Images

Putting alt attributes on your images actually serves two purposes. In terms of SEO, putting a brief yet descriptive alt attribute along with your image, places additional relevant text to your source code that the search engines can see when indexing your site. The more relevant text on your page the better chance you have of achieving higher search engine rankings.

In addition, including image alt attributes help the visually impaired who access web sites using a screen reader. They can’t see the image, but with a descriptive alt attribute, they will be able to know what your image is.

5. Title Attributes on Links

Including title attributes on links is another important step that any good web site will have. That’s the little “tool tip” that pops up when you place your mouse over a link. These are especially important for image links, but equally useful for text links.

As a note, you should use descriptive text for your links. “Click here” doesn’t really tell a person – or more importantly, the search engines — what the link is. At the very least put a title tag that will explain that “Click Here” really means “Web Design Portfolio” for example. Better yet – make the main link text something like “View my web design portfolio” — this will give some value to the link showing that the resulting page is relevant to searches for portfolio’s.

6. XML Sitemap

My last post referenced the sitemaps used by web visitors to help them navigate through your site themselves. However, there’s another version — XML sitemaps — that are used by the search engines in order to index through your site, as well.

This list of ALL pages / posts / etc. of your site also includes information such as the date the page was last modified, as well as a priority number of what you feel the most important pages of your sites are. All elements that help the search engines properly find and link to all content of your site.

7. Relevant Content

Having content relevant to your main page or site topic is perhaps the most important SEO aspect of a page. You can put all the keywords you want in the meta tags and alt image tags, etc — but if the actual readable text on the page is not relevant to the target keywords, it ends up basically being a futile attempt.

While it is important to include as many keywords in your page copy as possible, it is equally as important for it to read well and make sense. I’m sure we’ve all seen keyword stuffed pages written by SEO companies that honestly don’t make much sense from the reader’s point of view.

When creating your site copy, just write naturally, explaining whatever information you’re discussing. The key is to make it relevant, and to have it make sense to the reader. Even if you trick the search engines into thinking your page is great — when a potential customer arrives at the site and can’t make heads or tails of your information and it just feels spammy to them — you can bet they’ll be clicking on the next web site within a matter of seconds.

8. Link Building

We’ve probably all heard of Google Page Rank — it seems to be every web site owner’s dream to have as high a page rank as possible. While the algorithm for determining page rank encompasses many elements, and is constantly changing, one item is the number of links pointing to your web site.

Now, you’ll want to steer clear of link farms and other spammy attempts at getting links to your site. However there are many reputable and niche directory sites that you can use to submit your web site, or specific blog articles to.

With genuine content — especially if you have a blog — you’ll be able to generate links with other web sites and blogs, as well. It’s somewhat of a give and take, in that if you link out to other sites, you’ll find sites linking back to you  — and hopefully see your page rank going up, as well!

9. Social Media

Although technically not SEO, Social Media is such a growing factor in getting your web site noticed, that it’s an important element to include in your plan.

Social media ranges from social networks like Twitter, Facebook and LinkedIn — to social bookmarking sites such as Delicious, Digg, StumbleUpon and many more. There is a lot of relationship building involved, but as you build your own networks and build quality content on your web site or blog, you’ll see traffic to your web site increasing, as well.

As with any relationship, it is a give and take. Don’t just expect to join a site like Twitter for the pure sake of pushing your content. That just won’t fly — your true intentions will stick out like a sore thumb and do nothing but turn people off.

Even if you are on the site purely for networking reasons, the key is to make friends. Help out members of your network if they ask for a “retweet” or Digg, give helpful advice if asked, etc. You’ll see the same in return.

If you write a great post and have built meaningful relationships with peers in your  niche, you’ll often find that friends will submit your posts and give you votes on the social bookmarking sites. The more votes you receive, the more likely your post is to be noticed by others and shared around, often resulting in additional link backs from other blogs, etc.

10. A Few SEO Don’ts — Flash and Splash

Along with any list of Do’s come the Don’ts. As far as SEO is concerned, two of these items are splash pages (often consisting of a flash animation) and all flash web sites.

Yes, flash is pretty! Full flash web sites can actually be amazing to look at — their own bit of interactive artwork. But unfortunately the search engines don’t get along well with Flash. Although there is talk of possible advancement in this area, for the most part the search engines cannot read Flash.

All that great content that you wrote for your site will not be seen by the search engines if it’s embedded into a Flash web site. As far as the search engines are concerned, your all flash web site might as well be invisible. And if the search engines can’t see your site content, a good chunk of potential customers will miss out on what you have to offer, too.

Equally as “pointless” are splash pages. Once very popular, the splash page should no longer be an important feature of any site. While splash pages used to serve as an introduction into a web site (often with a flash animation), it is no longer seen as helpful, and often times might actually annoy visitors.

For one — it’s an extra click to get into your content. Worse is when you don’t give a “skip intro” option or set of links into your main site content — because you’re essentially forcing your visitors to sit through the full animation. If you’re lucky, this will only annoy them… if not — they’ll just leave without giving your main web site a shot. And without an html link pointing into your site, the search engines have no way to continue either (unless you made use of a sitemap.xml file — but still…)

A good alternative to both issues is to make use of a flash header. There’s no problem to include a flash animation at the top of your main site, or as a feature within the content area, etc. Because this is an addition to your web site, as opposed to a full separate element.

Quick Summary

If you have some technical background, you can skip the detailed steps in this tutorial. Here are the simplified steps on how to install WordPress on a local computer:

1. Install a local server (Mac: MAMP, PC:XAMPP or WAMP).
2. Create a new database.
3. Download WordPress from wordpress.org and extract the files to a new folder under the htdocs folder.
4. Rename the wp-config-sample.php file to wp-config.php and update the database details according to your local server.
5. Run wp-admin/install.php and follow the instructions to install WordPress.
6. Done!

Let’s Begin…

Before you start, let’s look at the requirements to run WordPress:

• PHP 4.3+
• MySQL 4+ Database Server

1. Install a Local Server

In order to run any PHP/database application on a local computer, you need a local host (ie. Apache + MySQL). For Mac, use MAMP. For PC, use XAMPP or WAMP.

I’m using Mac here, so I’m going to install MAMP. Go to mamp.info, download and install MAMP.

2. Create a New Database

After you’ve installed MAMP, run it and it should take you to the start page. Now click on phpMyAdmin. In the phpMyAdmin page, create a new database (eg. wordpress).

3. Download WordPress

Go to wordpress.org and download the latest build of WordPress. Go to the htdocs folder (where you installed the MAMP), extract the wordpress.zip to a new folder (eg. mysite).

4. Update wp-config.php File

In the folder, rename the wp-config-sample.php to wp-config.php. Open wp-config.php and update the database details (db_name, user, password, host) according to your local server.

5. Run install.php

With your browser, go to http://localhost:8888/mysite/wp-admin/install.php and follow the instructions to install WordPress.

1. Export Local Database

Login to your local phpMyAdmin, select the database from the dropdown. Click on the Export tab:

• Under the Export field, make sure all tables are selected
• Under the Structure field, tick “Add DROP TABLE / DROP VIEW”
• Tick “Save as File”
• Then click Go and it will prompt you to download a SQL file

2. Find & Replace All Local URLs

Open the database SQL file with a text editor. Find and replace all local URLs with your domain URL (eg. replace all “http://localhost:8888/mysite” with “http://www.yourdomain.com“).

3. Import The Database

Login to your server cPanel, go to MySQL Databases, create a new database and assign a user. Now go to phpMyAdmin, select the database (the one that was just created) from the dropdown, click on the Import tab, browse the SQL file and click Go.

4. Upload WordPress

Upload the entire WordPress folder to your server.

5. Change The wp-config.php Setting

On your server, open the wp-config.php file. Change the database details to reflect your server settings.

6. Done

Go to your website and everything should work perfect.

1. The Blog Frontend

Before you start, let’s take a look at the WordPress default theme and see how it is structured. Take note of the elements (header, post title, search form, navigation, footer, etc.).

Default Frontpage (index.php)

Default Single (single.php)

2. Photoshop Mockups

Based on the information gathered from the default theme, design a Photoshop mockup of your blog. Here I’m using GlossyBlue, one of my free WordPress themes, as an example. Download the demo.zip to see the Photoshop file.

3. HTML + CSS

After the PSD design is done, create a static HTML+CSS template of each page. You can use my GlossyBlue HTML files in the demo.zip to follow this tutorial. Extract the zip and take a look at the index.html, single.html, and page.html. Later in the tutorial, I will use these HTML files and convert them into a theme.

Why Create a Static HTML File First?

Mainly because it will make the development process a lot easier. I usually create a HTML file for every template that I need, test it across all browsers, validate both HTML and CSS markups, then all I have to do is cut & paste the WordPress code. By doing so, I don’t have to worry about HTML or CSS bugs during my theme making process.

4. How WordPress Theme Works

If you go the default theme folder (wp-content/themes/default), you should see many PHP files (called template file) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page (index.php << header.php, sidebar.php, and footer.php).

For more details, check out Site Architecture and Template Hierarchy at Codex.

5. Duplicate The Template Files

Copy the GlossyBlue HTML folder into the wp-content/themes folder. Then, go to the default theme folder, copy the comments.php and searchform.php file to the glossyblue folder.

6. Style.css

Go to the WordPress default theme folder, open the style.css file. Copy the commented code at the top and paste it to the GlossyBlue style.css file. Change the theme name and the author information as you desire.

7. Splitting The Files

Now you need to understand where to split the file into several files: header.php, sidebar.php, and footer.php. The image below shows a simplified version of my index file and how the markups should split.

8. Header.php

Open the index.html file. Cut from the top to where the <!--/header --> ends, paste it in a new PHP file, and save the file as header.php.

Go to the default theme folder, open the header.php. Copy and replace the tags where it requires PHP code (Template Tag): <title>, <link> stylesheet, <h1>, and <div>.

Navigation Menu (wp_list_pages)

Replace the <li> tags in the <ul id=nav> with <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

Reference: wp_list_pages.

9. Sidebar.php

Back to the index.html file, cut from where the <form id=searchform> start to the closing tag of <div id=sidebar> and paste it in a new PHP file, save it as sidebar.php.

• Replace the <form id=searchform> wrap with <?php include (TEMPLATEPATH . '/searchform.php'); ?>.
• Replace the category <li> tags with <?php wp_list_categories('show_count=1&title_li='); ?>
• Replace the archive <li> tags with <?php wp_get_archives('type=monthly'); ?>

References: wp_list_categories and wp_get_archives.

10. Footer.php

Back to the index.html file, cut from the <div id=footer> tag to the end of </html> and paste it in a new PHP file, save it as footer.php.

Recent Posts

Here I used the query_post to display the 5 latest posts.

Recent Comments

Recent comments are generated by a plugin (included in the theme folder).

11. Index.php

Now in your index.html file, you should only have the <div id=content> wrap. Save the file as index.php. Insert the line:get_header, get_sidebar, and get_footer in the same order as your layout structure.

12. Understanding The Loop

The image below illustrates how The Loop works. The Loop is used to display blog posts and it also lets you control what to display. Basically, The Loop checks if there are posts in your blog, while there are posts, display it, if no post found, say “Not Found”.

13. Copy The Loop

Go to the default theme folder, open the index.php file. Copy The Loop from the default index.php and paste it in between the <div id=content>..</div>. Then, replace the static text with the WordPress Template Tags: post date, title, category, comments, next and previous link.

14. Preview The Theme

Congrats! You’ve done the front page (the main part of the theme). Now, login to your admin panel, go to the Design tab, you should see the GlossyBlue theme, activate it and go to the front page to preview the theme.

15. Single.php

Now, it is time to do the single.php template. If you want, you can go through the same process — cut & paste from the default theme. But, I find it easier to use the index.php that you just created and save it as single.php. Open the default theme single.php file and copy the Template Tags over. Then include the comments_template. The image below highlights what I’ve changed:

16. Page.php

With the single.php template you just created, save it as page.php. Remove the post date, comment form, next/previous link… and that’s it.. there goes your page.php template.

17. Delete The HTML Files

Delete all the HTML files in the glossyblue folder (we don’t need them anymore). Technically, that is enough for a basic WordPress theme. You may notice there are more PHP files in the default theme. Well, you don’t really need those files if you just want a basic theme. For example, if the search.php or 404.php is not present in the theme folder, WordPress will automatically use the index.php to render the page. Read the Template Hierarchy for more details.

18. WordPress Page Template

Ok, final example. I will show you how to use Page Template to create an archive page that will list all posts on your blog (good for sitemap). Copy the archives.php file from the default theme folder. Delete the unwanted code and you should have something like this:

Here I’m using the query_post (showposts=-1 means display all posts) to display a list of all posts.

Now, login to your admin panel, write a new page, title it Archives. On the Page Template dropdown, select Archives.

A. Introduction To WordPress

Site: http://wordpress.org/

Description

“WordPress is a state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability. What a mouthful. WordPress is both free and priceless at the same time. More simply, WordPress is what you use when you want to work with your blogging software, not fight it.”

Benefits

• Easy to use back end for writing content and making other dynamic changes to your site.
• Simple setup, anyone with a little bit of server experience can install it.
• Themes and Plugins are numerous and mostly free.
• Easy to build your own theme or customize an existing one.
• Uses standard/free web server technologies: PHP & MySQL.

Using WordPress

1. Login to the administration features by going to: http://<your blogurl>/wp-admin/
2. To write a post click on the “Write” tab. You can write in a visual editor or you can write straight HTML. I recommend learning HTML and editing pages in it, you’re posts will come out a lot better and be easier to modify later. Choose your editor under My Profile -> “Use visual editor when writing”. If you have a normal sized monitor you may also want to turn up the number of lines you can see at once in the editor at: Options -> Writing -> “Size of the post box”, I recommend setting it to about 30 lines instead of 20.
   
3. General options for your blog are under: Options -> General.
   
4. An important option is: Permalinks. These determine the directory structure of your blog. You probably want to change it from default to custom with structure of something like: “/%category%/%postname%/”. This will help your site rank in Google and other search engines. %category% will be the category you choose for your post. Warning: For SEO optimization give each post only one category. If you use multiple categories Google will find your post in multiple locations and may discard it as duplicate content. Your %postname% comes from the “Post slug” field on the post writing screen. It will default to your post title but you can change it to anything you want, just make sure that it’s something that will be valid as a url (no spaces or weird characters). For example if we categorized our post as “Awesome” and made a slug of “this-is-the-most-awesome-slug” it would show up on our blog at /awesome/this-is-the-most-awesome-slug/ which would rank well in Google for phrases like “awesome slug”.
5. Your theme is chosen under Presentation -> Theme
   

B. WordPress Themes

Almost everything about WordPress can be customized through your theme. Themes are where WordPress really starts to shine. Here are a few example themes:



You can browse and download thousands of themes from:
http://themes.wordpress.net/

How do I install a new theme?
Your themes are located in a subdirectory of your WordPress installation: <your WordPress installation directory>/wp-content/themes/. Each theme has it’s own directory, which is the name of theme. You’ll always start out with a
theme called “default” which is the standard WordPress theme. To add a new theme download the zip file for the theme and unzip it into your /wp-content/themes/ directory. That’s it! You should now see the new theme under the Presentation -> Theme tab in the administration back end.

C. Structure Of A WordPress Theme

Theme Templates

There are a couple different types of pages in WordPress. Each type of page can have a customized look and feel. This customization is done by templates. Templates are how themes work. Each template is a seperate PHP file inside the theme’s directory. Here are the standard templates:

• 404 Template = 404.php – It’s handy to create a custom 404 page (Page Not Found) template. You can list common links and ways for users to find what they are looking for.
• Archive Template = archive.php
• Archive Index Page = archives.php
• Comments Template = comments.php – This template defines how comments look under individual posts on the “Post Template”.
• Footer Template = footer.php – HTML that is placed at the bottom of each page, saves you time and produces less duplicate HTML code in your templates.
• Header Template = header.php – HTML that is placed at the top of each page, usually has the <head> section in it.
• Links = links.php
• Main Template = index.php – Usually this page lists your most recent posts. This is the “home” page of your site.
• Page Template = page.php – Used for single pages, instead of blog posts. Your “About” page uses this template. This is the default page template, you can make your own custom page templates. I’ll cover this more in detail later.
• Popup Comments Template = comments-popup.php
• Post Template = single.php – This is where you customize pages that display single posts. Click on a post title (permalink) and you will be at it’s single post page using the post template.
• Search Form = searchform.php
• Search Template = search.php
• Sidebar Template = sidebar.php – Usually the right hand side bar of the page. Some themes have more than one side bar so you’ll see templates like left_sidebar.php.
• Stylesheet = style.css – Default place to put your CSS. It also contains the name and description of the theme. You must always have this file with the name and description of your theme. Many themes will have multiple CSS files that are linked to from the header.php file or the individual page templates to customize individual pages with different style rules.

D. Making Your New Theme

1. Find a theme you want to base your new theme off of. A good place to start is the default theme, but you may also want to just tweak another theme that’s closer to the look/feel you are going for.
2. Copy the existing theme to a new directory in your themes directory for example if I was making a theme called “webdesign_meetup” I might copy the “default” directory into a new directory called “webdesign_meetup”.
3. In your new theme directory edit the style.css file. You should see something
   like this in that file:
   /*
   Theme Name: WordPress Default
   Theme URI: http://wordpress.org/
   Description: The default WordPress theme based on the famous Kubrick.
   Version: 1.6
   Author: Michael Heilemann
   Author URI: http://binarybonsai.com/
   */
4. Edit the theme information. This is the information that will show up under Presentation -> Theme in the administrator.
5. Go into the WordPress administrator and change your current them to the new one you just created.
6. Now you can start customizing and see the affects in real time on your site!

E. Modifying The Header

The first thing you might want to do when customizing your theme is change the header. Most sites have a custom header image, usually a company logo or a picture that has to do with the theme of your site. To edit the header just go into your theme directory and edit the header.php file. The header HTML will usually be stored in this file. In some more rare cases theme authors may have placed header information in the individual page templates (if they did you’ll have to hunt around a bit more!). You’ll usually see a piece of HTML under the opening <body> tag that’s something like lt;div id=”header”>…header content…</div>. You can customize this content with your new header.

F. Blog / Post Templates

Maybe you want to display an ad at the bottom of each post, or perhaps you’d like to add or remove the author information under the post header? The place to do these things is in the single.php file. This file controls the layout of your individual post pages.

Let’s examine the components of this file for the default WordPress theme:

<?php get_header();
?>

<div id=”content”
class=”widecolumn”>

<?php
if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”navigation”>

<div
class=”alignleft”><?php previous_post_link(’&laquo; %link’)
?></div>

<div
class=”alignright”><?php next_post_link(’%link &raquo;’)
?></div>

</div>

<div
class=”entry”>

<?php the_content(’<p
class=”serif”>Read the rest of this entry &raquo;</p>’);
?>

So how do I add some author information and maybe date of the post to this?
It’s easy! There’s a lot of information stored with each post that is accessible within “The Loop”. To see a list of all the functions you can use to get at this information visit this documentation page: http://codex.wordpress.org/Template_Tags. There you’ll see all the template functions that are available to you. So to get the author of the post we’d just call the_author();. Of course we’d want to put some HTML formating around it so we might do:

Now to put the date the post was written we could put:

<?php the_date(’Y-m-d’,
‘<h2>Published On ‘, ‘</h2>’); ?>
There are tons of stuff you can do with posts so check out: http://codex.wordpress.org/Template_Tags and get started.

G. The Post Loop

So you want a custom loop? The loop is powered off of the current page query. The query is generated by WordPress, typically from your URL. So if your on your site and your at /category1/a-blog-post-with-id-12 the query to get blog post id 12 in category 1. The internal mechanics of how this happens are fairly complex, so we won’t go into them. It’s enough to know that each page has a query generated for it that will grab the correct content for that page. So if you want to customize your loop and grab something besides what WordPress would do by default you need to modify the query before you call your loop.

Let’s say you want to put just the 3 most recent blog posts on a page, maybe under some other content. On my site the home page has static content and then displays some recent blog posts. Here’s how you do it:

<?php query_posts(”showposts=3″);
?>

This does a new query to grab the 3 most recent posts to the blog. I can then display these posts in a normal loop:

<?php if (have_posts()) {
?>

<h3>Recent
News</h3>

<?php while (have_posts()) :
the_post(); ?>

<div
class=”blog_post”>

<?php the_content();
?>

</div>

<?php endwhile;
?>

<?php } ?>

There are almost infinite ways you can write queries to get the posts you want for your loop. Visit these two pages for more information:

http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Function_Reference/WP_Query

H. Page Templates

Page templates are used to format specific pages. For example if you want your About page to have a specific template you can assign it a page template. Posts can not have templates, only pages (under Write -> Write Page). To start a new page create a new php file, for example we could call our new file about_us.php. In the file put this code at the top:
<?php

/*

Template Name: About
Us

*/

?>
WordPress will see this file as a page template and will display it in the list of page templates you choose from when you are editing a page. To create a page in the admin interface go to Write -> Write Page. Then on the right side bar you can pick a custom page template. Pick your new “About Us” template.

You probably want a number of standard template elements on your custom page template. Here’s a good framework to start you template with:

The loop on your page template will by default grab the content your write for your page in the admin interface.

I. Sidebars

Most templates have one or sidebars. Sidebars usually contain navigational links, but they can also include search boxes, lists of related pages, and other widgets (like mybloglog etc.). It’s really easy to edit your sidebars. Just find the sidebar.php file and open it your editor. You’ll see the HTML that creates the side bar and puts the content within it. There are a few template functions that are helpful within the sidebar like wp_get_archives(); which will display a list of time periods that you wrote blog posts (think August (8), September (2) which are links to those months posts). Most sidebar functions are meant to be placed within <ul></ul> tags because they format their output as lists. So in your side bar you might have this code:

This code would generate two lists, one of archive months, and one of categories you have posted under.

You can find more of these functions at:
http://codex.wordpress.org/Template_Tags

J. Meta Data / Custom Fields For Page Customization

Meta data can be added to any blog post or page. It’s located under the edit box on the Write Post and Write Page sections of the admin interface. Look for the section called “Custom Fields”, that’s your post meta data. Each piece of meta data has a key and a value. You can use meta data to store almost anything, and you can retrieve it within the page using some template functions/tags. Here some code I use so that each page can have a custom title, description, keywords, and style rules. This code is placed within my <head></head> tags in my header.php file:

The first section of the code loads the meta data. For example to get the title meta data I call $title = get_post_meta($wp_query->post->ID, “title”, true);. I can then use the $title variable within my code to display the title information I retrieved. The styles meta data I retrieve is a little
more complex because it is grabbing an array of styles. So if there are more than one meta data elements with the title “style” I will get all these styles within one array. The last parameter of get_post_meta determines if an array is to be returned or just single value. I loop through the array and display each style using this code: <?php foreach ($styles as $s) echo $s . “\n”; ?>.

Are you wondering what FTP is and how you can use it to upload/files from your site quickly and easily? Would you like to know how to set permissions on files and folders? If so, then this tutorial is for you.

This tutorial started out as a simple primer for newbies that need to learn a few specifics about FTP technology and how to use it, but I’ve also inserted some interesting stuff about FTP permissions syntax that some of you seasoned guys probably don’t know or just never got around to looking at. Things that make you go ‘hmmm’ and ‘wow, I get it… cool.’

I know some of you may be convinced that you have sufficient tools to upload and download files using your built in FTP client in your HTML editor, but I will show you an example of a freeware FTP client that will give you more control over the advanced features of your site, allowing you to upload and install scripts properly, rather than just uploading HTML files.

Please note: This permissions tutorial applies to UNIX/Linux-based servers only and although Windows does have a permission system, it’s different and cannot be set by anyone using an FTP client.

FTP stands for File Transfer Protocol. In easy to understand terms, FTP is the way that computers talk to each other to transfer files. It’s quicker than transferring a file by email or on a disk. It’s direct access to the space that you are transferring files to.

Ok, so how do we get connected in order to transfer files using FTP? Good question. We need a ‘client’ or a browser that speaks ‘FTP’. We need an FTP client.

There are tons of FTP clients out there, and some are even built into your HTML editors to allow you to upload your files to your web space. Most of these only transfer files to and from the space that you are connected to. While, in most cases, this is sufficient for updating the content of a website, they just don’t cut it as far as I’m concerned.
You need something that will allow you to change permissions at the very least. When you start to get a little more involved you might want to explore some FTP commands and also use SFTP or SSH (Secure FTP or encrypted connections).

I found FileZilla was a decent choice because it has the ability to allow you to grow a little. You can download a copy from the current project page for free at http://filezilla.sourceforge.net/

In order to connect to a web site using FTP, you must have 3 things: A server/FTP address, a username and a password.
This will then connect you to the folder on the computer that the username is allowed to access. This will usually be where your website domain is pointing when you view it from a browser.

To connect using FileZilla, you can simply use the quick connect bar at the top of the program to enter your FTP server address, username and password. Don’t worry about the port number, it simply defaults to 21. If you must use a specific port for FTP then you can enter it there.

Once you are connected you should see a list of files (if there are any) or folders in your remote directory listing. Sometimes you will connect just outside your viewable website folder which might be public_html, www, htdocs or httpdocs. If you don’t know where your viewable website folder is, then you should ask your host – just email them and say something like “Look, I’m new to using FTP, and I need to know which folder my website is stored in so I can upload files to my site”. That should be enough for them to tell you where it is.

Another way to see where your viewable folder might be is to check the email that was sent to you by your host when you signed up. If you were able to get the FTP details, then you might see a path that contains your website directory. Eg. /home/www/username/public_html. The last thing to remember about your viewable website directory is that you cannot access it from your domain using the actual folder name. For example, if your domain is www.yourdomain.com and your website folder is “public_html”, then you cannot access www.yourdomain.com/public_html because it is already pointing directly at the folder when you type www.yourdomain.com – you don’t need to add the folder name on the end.

Here’s an example site that I logged into using FileZilla.

If all is well and you have connected via FTP to your website directory, then you should be able to look on your local drive on your computer for a file that you want to place on your website. The best choice at this stage would be a normal HTML file that is already viewable locally within a browser. So instead of this address – C:Documents and SettingsUser1My Documentsmyhomepage.htm, you will upload the file and then access it from your domain name like this- http://www.yourdomain.com/myhomepage.htm

Upload a HTML file via FTP and you will be able to see it through your browser. You will have published a file that anyone on the Internet can see. The earlier diagram shows connecting to the same space using a browser and an FTP client.

File permissions are necessary to protect and to instruct the server about how to handle certain files. They can be set using raw FTP commands, but the easiest way to set them is using an inbuilt tool from your FTP client. This is where some FTP clients do not support the changing of permissions on files. One good example is the built-in FTP client in Dreamweaver, which will only allow you to set permissions using a specific raw FTP command. If you have multiple files and folders to set permissions on, typing the FTP command multiple times would become tedious.

It is a good idea to become at least a little familiar with what permissions are used for what purpose. The reason for this is that most scripts will actually need certain permissions to run. If they are simply uploaded as normal by say, Dreamweaver, they will inherit ‘normal’ permissions by default, but it may not be suitable in order to actually ‘run’ or ‘execute’ the commands that are inside the script. Most default permissions will only allow you to read a file, which will unfortunately not be enough to run a script.
The most common permission required to run a script is CHMOD 755 (-rwx r-x r-x)

CHMOD stands for Change Mode and simply means that you are changing your permissions on the file or folder. “CHMOD” is also a UNIX command that is used in code and through the command line to change permissions on files and folders.

For example, in PHP it’s used like this: chmod(“/path/to/filename”, 0755);

There are three types of permissions to set on folders and files on UNIX servers – Read, Write and Execute permissions. There are three distinct groups that are affected with these permissions to allow you to control who has access to the file or folder.

These groups are as follows:
The owner of the file – usually whoever uploaded it, or whomever created it.
The group – usually other registered hosting users on the actual server or common resources that are setup to run under this permission group.
The public – this is the public or Internet user.

So each group has three settings or switches, to allow you to control their access based on whether you want them to read, write or execute the resource that you are setting permissions on. For example, you can allow the owner group to read and write to the files, while the group and public can only read.

FileZilla will allow you to change the file permissions or “attributes” as this program calls them, on files and folders. You can even choose multiple files and folders in the same window view to change multiple permissions at the same time.

Setting a file or folder permission in FileZilla is easy. You simply check the box to turn that setting on, like a switch. Select a file, then right click on it. A menu will appear and you will need to choose “File Attributes”.

A popup will appear with options available for all permissions on each group. You simply have to check the boxes or enter the numbered permission that you require in the box provided.

As you saw above, FileZilla sets permissions using checkboxes to allow you to quickly and visually turn the switch on for a specific permission for each user. However, you may come across some weird looking notation like the following:

“-rwxr-xrwx” or someone may tell you to use the permission, CHMOD 757 on a file to allow it to run properly. These are just two ways to represent the same thing.

Let’s explore the first text based notation. It has a dash, then 9 characters after it. The first dash could be a ‘d’ to represent a directory, or a dash to represent a file. Sometimes it’s just left out and isn’t even there.
The next 9 characters represent the three groups – owner, group and public in order as well as the permission for each. Look at the diagram below compared to your checkbox model of applying permissions.

Once you know the syntax of the FTP permission, you can quickly read it and then interpret what it means in terms of actual permissions for your script or file.
You can use the above diagram until you know them off the top of your head.
Some scripts don’t tell what CHMOD to use numerically, so it’s great to be able to interpret the permissions from text notation.

The number notation is quite interesting actually and it has an almost algebraic feel to it. The actual numbers used are based on the bits, which I won’t get into, but basically each CHMOD number is broken up into 3 numbers in order of owner, group and public and the permissions for each group are based on it’s total sum. It’s pretty hard to explain in words, so I’ll have to show you the numbers used to represent the read, write and execute attribute to allow you to understand more fully.

This would mean the owner and public can read, write and execute, while the group can only read and execute.
Let’s break this number into columns. The first ‘column’ is the owner, the second ‘column’ is the group and the third ‘column’ is the public.

Now we’ll learn where these numbers are coming from and what they mean.
In FTP number notation, “Read” is represented by the number 4, “Write” is represented by the number 2 and “Execute” is represented by the number 1.
The actual permission for each group is based on the total number for each column. A combination of the three permissions will create a different total for that column, which represents the permission for that group.

Look at the following table and what that number represents. I will also explain with representation why that total means that particular permission.

User can read only is represented by a 4. You are simply turning on reading by the 4 that represents the read attribute.
User can write only is represented by a 2 and user can execute only is represented by a 1.

User can execute and write is represented by a 3.
Eg. since execute = 1 and write = 2
1 + 2 = 3 which is the same as saying ‘execute’ + ‘write’ = 3
The server knows to allow this user to execute and write

User can read and execute is represented by a 5.
Eg. since read = 4 and execute = 1
4 + 1 = 5 which is the same as saying ‘read’ + ‘execute’ = 5

User can read and write is represented by a 6.
Eg. since read = 4 and write = 2
4 + 2 = 6 which is the same as saying ‘read’ + ‘write’ = 6

User can read, write and execute is represented by a 7
Eg. since read = 4 and write = 2 and execute = 1
4 + 2 + 1 = 7 which is the same as saying ‘read’ + ‘write’ + “execute” = 7

So for each column, which represents each group, you simply enter the permission that you want for that group based on the number notation explained above.

So, there’s some little FTP tips for those of you who might have had trouble installing scripts in the past. It might have been a permissions problem, so you should definitely revisit that script and it might just work now.

Hopefully I have given you some insight into the FTP technology and hopefully you will start using FileZilla or a similar FTP application that will give you more control over your websites, and allow you to install some scripts for better functionality on your site.

Please note: This permissions tutorial applies to UNIX/Linux based servers only and although Windows does have a permission system, it’s different and cannot be set by anyone using an FTP client.

tag: content

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

One way to reduce the number of components in the page is to simplify the page’s design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended.

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. As described in Tenni Theurer’s blog post Browser Cache Usage – Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

Use a Content Delivery Network

tag: server

The user’s proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective. But where should you start?

As a first step to implementing geographically dispersed content, don’t attempt to redesign your web application to work in a distributed architecture. Depending on the application, changing the architecture could include daunting tasks such as synchronizing session state and replicating database transactions across server locations. Attempts to reduce the distance between users and your content could be delayed by, or never pass, this application architecture step.

Remember that 80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. This is the Performance Golden Rule. Rather than starting with the difficult task of redesigning your application architecture, it’s better to first disperse your static content. This not only achieves a bigger reduction in response times, but it’s easier thanks to content delivery networks.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.

Add an Expires or a Cache-Control Header

tag: server

There are two things in this rule:

• For static components: implement “Never expire” policy by setting far future Expires header
• For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. This is a far future Expires header, telling the browser that this response won’t be stale until April 15, 2010.

Expires: Thu, 15 Apr 2010 20:00:00 GMT

If your server is Apache, use the ExpiresDefault directive to set an expiration date relative to the current date. This example of the ExpiresDefault directive sets the Expires date 10 years out from the time of the request.

ExpiresDefault “access plus 10 years”

Keep in mind, if you use a far future Expires header you have to change the component’s filename whenever the component changes. At Yahoo! we often make this step part of the build process: a version number is embedded in the component’s filename, for example, yahoo_2.0.6.js.

Using a far future Expires header affects page views only after a user has already visited your site. It has no effect on the number of HTTP requests when a user visits your site for the first time and the browser’s cache is empty. Therefore the impact of this performance improvement depends on how often users hit your pages with a primed cache. (A “primed cache” already contains all of the components in the page.) We measured this at Yahoo! and found the number of page views with a primed cache is 75-85%. By using a far future Expires header, you increase the number of components that are cached by the browser and re-used on subsequent page views without sending a single byte over the user’s Internet connection.

Gzip Components

tag: server

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It’s true that the end-user’s bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.

Starting with HTTP/1.1, web clients indicate support for compression with the Accept-Encoding header in the HTTP request.

Accept-Encoding: gzip, deflate

If the web server sees this header in the request, it may compress the response using one of the methods listed by the client. The web server notifies the web client of this via the Content-Encoding header in the response.

Content-Encoding: gzip

Gzip is the most popular and effective compression method at this time. It was developed by the GNU project and standardized by RFC 1952. The only other compression format you’re likely to see is deflate, but it’s less effective and less popular.

Gzipping generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip. If you use Apache, the module configuring gzip depends on your version: Apache 1.3 uses mod_gzip while Apache 2.x uses mod_deflate.

There are known issues with browsers and proxies that may cause a mismatch in what the browser expects and what it receives with regard to compressed content. Fortunately, these edge cases are dwindling as the use of older browsers drops off. The Apache modules help out by adding appropriate Vary response headers automatically.

Servers choose what to gzip based on file type, but are typically too limited in what they decide to compress. Most web sites gzip their HTML documents. It’s also worthwhile to gzip your scripts and stylesheets, but many web sites miss this opportunity. In fact, it’s worthwhile to compress any text response including XML and JSON. Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.

Gzipping as many file types as possible is an easy way to reduce page weight and accelerate the user experience.

Put Stylesheets at the Top

tag: css

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

Front-end engineers that care about performance want a page to load progressively; that is, we want the browser to display whatever content it has as soon as possible. This is especially important for pages with a lot of content and for users on slower Internet connections. The importance of giving users visual feedback, such as progress indicators, has been well researched and documented. In our case the HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: “Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times.” Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

Put Scripts at the Bottom

tag: javascript

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn’t support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

Avoid CSS Expressions

tag: css

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They’re supported in Internet Explorer, starting with version 5. As an example, the background color could be set to alternate every hour using CSS expressions.

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );

As shown here, the expression method accepts a JavaScript expression. The CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting properties in Internet Explorer needed to create a consistent experience across browsers.

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.

Make JavaScript and CSS External

tag: javascript, css

Many of these performance rules deal with how external components are managed. However, before these considerations arise you should ask a more basic question: Should JavaScript and CSS be contained in external files, or inlined in the page itself?

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

The key factor, then, is the frequency with which external JavaScript and CSS components are cached relative to the number of HTML documents requested. This factor, although difficult to quantify, can be gauged using various metrics. If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Many web sites fall in the middle of these metrics. For these sites, the best solution generally is to deploy the JavaScript and CSS as external files. The only exception where inlining is preferable is with home pages, such as Yahoo!’s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

For front pages that are typically the first of many page views, there are techniques that leverage the reduction of HTTP requests that inlining provides, as well as the caching benefits achieved through using external files. One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser’s cache.

Reduce DNS Lookups

tag: content

The Domain Name System (DNS) maps hostnames to IP addresses, just as phonebooks map people’s names to their phone numbers. When you type www.yahoo.com into your browser, a DNS resolver contacted by the browser returns that server’s IP address. DNS has a cost. It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname. The browser can’t download anything from this hostname until the DNS lookup is completed.

DNS lookups are cached for better performance. This caching can occur on a special caching server, maintained by the user’s ISP or local area network, but there is also caching that occurs on the individual user’s computer. The DNS information remains in the operating system’s DNS cache (the “DNS Client service” on Microsoft Windows). Most browsers have their own caches, separate from the operating system’s cache. As long as the browser keeps a DNS record in its own cache, it doesn’t bother the operating system with a request for the record.

Internet Explorer caches DNS lookups for 30 minutes by default, as specified by the DnsCacheTimeout registry setting. Firefox caches DNS lookups for 1 minute, controlled by the network.dnsCacheExpiration configuration setting. (Fasterfox changes this to 1 hour.)

When the client’s DNS cache is empty (for both the browser and the operating system), the number of DNS lookups is equal to the number of unique hostnames in the web page. This includes the hostnames used in the page’s URL, images, script files, stylesheets, Flash objects, etc. Reducing the number of unique hostnames reduces the number of DNS lookups.

Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.

Minify JavaScript and CSS

tag: javascript, css

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation is an alternative optimization that can be applied to source code. It’s more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript and CSS increases, so will the savings gained by minifying your code.

Avoid Redirects

tag: content

Redirects are accomplished using the 301 and 302 status codes. Here’s an example of the HTTP headers in a 301 response:

HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

The browser automatically takes the user to the URL specified in the Location field. All the information necessary for a redirect is in the headers. The body of the response is typically empty. Despite their names, neither a 301 nor a 302 response is cached in practice unless additional headers, such as Expires or Cache-Control, indicate it should be. The meta refresh tag and JavaScript are other ways to direct users to a different URL, but if you must do a redirect, the preferred technique is to use the standard 3xx HTTP status codes, primarily to ensure the back button works correctly.

The main thing to remember is that redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.

One of the most wasteful redirects happens frequently and web developers are generally not aware of it. It occurs when a trailing slash (/) is missing from a URL that should otherwise have one. For example, going to http://astrology.yahoo.com/astrology results in a 301 response containing a redirect to http://astrology.yahoo.com/astrology/ (notice the added trailing slash). This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlash directive if you’re using Apache handlers.

Connecting an old web site to a new one is another common use for redirects. Others include connecting different parts of a website and directing the user based on certain conditions (type of browser, type of user account, etc.). Using a redirect to connect two web sites is simple and requires little additional coding. Although using redirects in these situations reduces the complexity for developers, it degrades the user experience. Alternatives for this use of redirects include using Alias and mod_rewrite if the two code paths are hosted on the same server. If a domain name change is the cause of using redirects, an alternative is to create a CNAME (a DNS record that creates an alias pointing from one domain name to another) in combination with Alias or mod_rewrite.

Remove Duplicate Scripts

tag: javascript

It hurts performance to include the same JavaScript file twice in one page. This isn’t as unusual as you might think. A review of the ten top U.S. web sites shows that two of them contain a duplicated script. Two main factors increase the odds of a script being duplicated in a single web page: team size and number of scripts. When it does happen, duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

Unnecessary HTTP requests happen in Internet Explorer, but not in Firefox. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.

In addition to generating wasteful HTTP requests, time is wasted evaluating the script multiple times. This redundant JavaScript execution happens in both Firefox and Internet Explorer, regardless of whether the script is cacheable.

One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.

<script type=”text/javascript” src=”menu_1.0.17.js”></script>

An alternative in PHP would be to create a function called insertScript.

<?php insertScript(“menu.js”) ?>

In addition to preventing the same script from being inserted multiple times, this function could handle other issues with scripts, such as dependency checking and adding version numbers to script filenames to support far future Expires headers.

Configure ETags

tag: server

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component’s ETag using the ETag response header.

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: “10c24bc-4ab-457e1c1f”

Content-Length: 12195

Later, if the browser has to validate a component, it uses the If-None-Match header to pass the ETag back to the origin server. If the ETags match, a 304 status code is returned reducing the response by 12195 bytes for this example.

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: “10c24bc-4ab-457e1c1f”

HTTP/1.1 304 Not Modified

The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won’t match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.

The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a given file may reside in the same directory across multiple servers, and have the same file size, permissions, timestamp, etc., its inode is different from one server to the next.

IIS 5.0 and 6.0 have a similar issue with ETags. The format for ETags on IIS is Filetimestamp:ChangeNumber. A ChangeNumber is a counter used to track configuration changes to IIS. It’s unlikely that the ChangeNumber is the same across all IIS servers behind a web site.

The end result is ETags generated by Apache and IIS for the exact same component won’t match from one server to another. If the ETags don’t match, the user doesn’t receive the small, fast 304 response that ETags were designed for; instead, they’ll get a normal 200 response along with all the data for the component. If you host your web site on just one server, this isn’t a problem. But if you have multiple servers hosting your web site, and you’re using Apache or IIS with the default ETag configuration, your users are getting slower pages, your servers have a higher load, you’re consuming greater bandwidth, and proxies aren’t caching your content efficiently. Even if your components have a far future Expires header, a conditional GET request is still made whenever the user hits Reload or Refresh.

If you’re not taking advantage of the flexible validation model that ETags provide, it’s better to just remove the ETag altogether. The Last-Modified header validates based on the component’s timestamp. And removing the ETag reduces the size of the HTTP headers in both the response and subsequent requests. This Microsoft Support article describes how to remove ETags. In Apache, this is done by simply adding the following line to your Apache configuration file:

FileETag none

Make Ajax Cacheable

tag: content

One of the cited benefits of Ajax is that it provides instantaneous feedback to the user because it requests information asynchronously from the backend web server. However, using Ajax is no guarantee that the user won’t be twiddling his thumbs waiting for those asynchronous JavaScript and XML responses to return. In many applications, whether or not the user is kept waiting depends on how Ajax is used. For example, in a web-based email client the user will be kept waiting for the results of an Ajax request to find all the email messages that match their search criteria. It’s important to remember that “asynchronous” does not imply “instantaneous”.

To improve performance, it’s important to optimize these Ajax responses. The most important way to improve the performance of Ajax is to make the responses cacheable, as discussed in Add an Expires or a Cache-Control Header. Some of the other rules also apply to Ajax:

• Gzip Components
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Configure ETags

Let’s look at an example. A Web 2.0 email client might use Ajax to download the user’s address book for autocompletion. If the user hasn’t modified her address book since the last time she used the email web app, the previous address book response could be read from cache if that Ajax response was made cacheable with a future Expires or Cache-Control header. The browser must be informed when to use a previously cached address book response versus requesting a new one. This could be done by adding a timestamp to the address book Ajax URL indicating the last time the user modified her address book, for example, &t=1190241612. If the address book hasn’t been modified since the last download, the timestamp will be the same and the address book will be read from the browser’s cache eliminating an extra HTTP roundtrip. If the user has modified her address book, the timestamp ensures the new URL doesn’t match the cached response, and the browser will request the updated address book entries.

Even though your Ajax responses are created dynamically, and might only be applicable to a single user, they can still be cached. Doing so will make your Web 2.0 apps faster.

Flush the Buffer Early

tag: server

When users request a page, it can take anywhere from 200 to 500ms for the backend server to stitch together the HTML page. During this time, the browser is idle as it waits for the data to arrive. In PHP you have the function flush(). It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. The benefit is mainly seen on busy backends or light frontends.

A good place to consider flushing is right after the HEAD because the HTML for the head is usually easier to produce and it allows you to include any CSS and JavaScript files for the browser to start fetching in parallel while the backend is still processing.

Example:

… <!– css, js –>

</head>

<?php flush(); ?>

<body>

… <!– content –>

Yahoo! search pioneered research and real user testing to prove the benefits of using this technique.

Use GET for AJAX Requests

tag: server

The Yahoo! Mail team found that when using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it’s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies). The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.

An interesting side affect is that POST without actually posting any data behaves like GET. Based on the HTTP specs, GET is meant for retrieving information, so it makes sense (semantically) to use GET when you’re only requesting data, as opposed to sending data to be stored server-side.

Post-load Components

tag: content

You can take a closer look at your page and ask yourself: “What’s absolutely required in order to render the page initially?”. The rest of the content and components can wait.

JavaScript is an ideal candidate for splitting before and after the onload event. For example if you have JavaScript code and libraries that do drag and drop and animations, those can wait, because dragging elements on the page comes after the initial rendering. Other places to look for candidates for post-loading include hidden content (content that appears after a user action) and images below the fold.

Tools to help you out in your effort: YUI Image Loader allows you to delay images below the fold and the YUI Get utility is an easy way to include JS and CSS on the fly. For an example in the wild take a look at Yahoo! Home Page with Firebug’s Net Panel turned on.

It’s good when the performance goals are inline with other web development best practices. In this case, the idea of progressive enhancement tells us that JavaScript, when supported, can improve the user experience but you have to make sure the page works even without JavaScript. So after you’ve made sure the page works fine, you can enhance it with some post-loaded scripts that give you more bells and whistles such as drag and drop and animations.

Preload Components

tag: content

Preload may look like the opposite of post-load, but it actually has a different goal. By preloading components you can take advantage of the time the browser is idle and request components (like images, styles and scripts) you’ll need in the future. This way when the user visits the next page, you could have most of the components already in the cache and your page will load much faster for the user.

There are actually several types of preloading:

• Unconditional preload – as soon as onload fires, you go ahead and fetch some extra components. Check google.com for an example of how a sprite image is requested onload. This sprite image is not needed on the google.com homepage, but it is needed on the consecutive search result page.
• Conditional preload – based on a user action you make an educated guess where the user is headed next and preload accordingly. On search.yahoo.com you can see how some extra components are requested after you start typing in the input box.
• Anticipated preload – preload in advance before launching a redesign. It often happens after a redesign that you hear: “The new site is cool, but it’s slower than before”. Part of the problem could be that the users were visiting your old site with a full cache, but the new one is always an empty cache experience. You can mitigate this side effect by preloading some components before you even launched the redesign. Your old site can use the time the browser is idle and request images and scripts that will be used by the new site

Reduce the Number of DOM Elements

tag: content

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

A high number of DOM elements can be a symptom that there’s something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there’s a better and more semantically correct way to do your markup.

A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser’s defaults formatting. This is a chance to start fresh and think about your markup, for example use <div>s only when it makes sense semantically, and not because it renders a new line.

The number of DOM elements is easy to test, just type in Firebug’s console:
document.getElementsByTagName(‘*’).length

And how many DOM elements are too many? Check other similar pages that have good markup. For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

Split Components Across Domains

tag: content

Splitting components allows you to maximize parallel downloads. Make sure you’re using not more than 2-4 domains because of the DNS lookup penalty. For example, you can host your HTML and dynamic content on www.example.org and split static components between static1.example.org and static2.example.org

For more information check “Maximizing Parallel Downloads in the Carpool Lane” by Tenni Theurer and Patty Chi.

Minimize the Number of iframes

tag: content

Iframes allow an HTML document to be inserted in the parent document. It’s important to understand how iframes work so they can be used effectively.

<iframe> pros:

• Helps with slow third-party content like badges and ads
• Security sandbox
• Download scripts in parallel

<iframe> cons:

• Costly even if blank
• Blocks page onload
• Non-semantic

No 404s

tag: content

HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.

Some sites have helpful 404s “Did you mean X?”, which is great for the user experience but also wastes server resources (like database, etc). Particularly bad is when the link to an external JavaScript is wrong and the result is a 404. First, this download will block parallel downloads. Next the browser may try to parse the 404 response body as if it were JavaScript code, trying to find something usable in it.

Reduce Cookie Size

tag: cookie

HTTP cookies are used for a variety of reasons such as authentication and personalization. Information about cookies is exchanged in the HTTP headers between web servers and browsers. It’s important to keep the size of cookies as low as possible to minimize the impact on the user’s response time.

For more information check “When the Cookie Crumbles” by Tenni Theurer and Patty Chi. The take-home of this research:

• Eliminate unnecessary cookies
• Keep cookie sizes as low as possible to minimize the impact on the user response time
• Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected
• Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

Use Cookie-free Domains for Components

tag: cookie

When the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.

If your domain is www.example.org, you can host your static components on static.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.

Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies. On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the www subdomain and write the cookies to that subdomain.

Minimize DOM Access

tag: javascript

Accessing DOM elements with JavaScript is slow so in order to have a more responsive page, you should:

• Cache references to accessed elements
• Update nodes “offline” and then add them to the tree
• Avoid fixing layout with JavaScript

For more information check the YUI theatre’s “High Performance Ajax Applications” by Julien Lecomte.

Develop Smart Event Handlers

tag: javascript

Sometimes pages feel less responsive because of too many event handlers attached to different elements of the DOM tree which are then executed too often. That’s why using event delegation is a good approach. If you have 10 buttons inside a div, attach only one event handler to the div wrapper, instead of one handler for each button. Events bubble up so you’ll be able to catch the event and figure out which button it originated from.

You also don’t need to wait for the onload event in order to start doing something with the DOM tree. Often all you need is the element you want to access to be available in the tree. You don’t have to wait for all images to be downloaded. DOMContentLoaded is the event you might consider using instead of onload, but until it’s available in all browsers, you can use the YUI Event utility, which has an onAvailable method.

For more information check the YUI theatre’s “High Performance Ajax Applications” by Julien Lecomte.

Choose <link> over @import

tag: css

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.

In IE @import behaves the same as using <link> at the bottom of the page, so it’s best not to use it.

Avoid Filters

tag: css

The IE-proprietary AlphaImageLoader filter aims to fix a problem with semi-transparent true color PNGs in IE versions < 7. The problem with this filter is that it blocks rendering and freezes the browser while the image is being downloaded. It also increases memory consumption and is applied per element, not per image, so the problem is multiplied.

The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

Optimize Images

tag: images

After a designer is done with creating the images for your web page, there are still some things you can try before you FTP those images to your web server.

• You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Using imagemagick it’s easy to check using
  identify -verbose image.gif
  When you see an image useing 4 colors and a 256 color “slots” in the palette, there is room for improvement.
• Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don’t support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations). This simple imagemagick command results in totally safe-to-use PNGs:
  convert image.gif image.png
  “All we are saying is: Give PiNG a Chance!”
• Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:
  pngcrush image.png -rem alla -reduce -brute result.png
• Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images.
  jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Optimize CSS Sprites

tag: images

• Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
• Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
• “Be mobile-friendly” and don’t leave big gaps between the images in a sprite. This doesn’t affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100×100 image is 10 thousand pixels, where 1000×1000 is 1 million pixels

Don’t Scale Images in HTML

tag: images

Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.

Make favicon.ico Small and Cacheable

tag: images

The favicon.ico is an image that stays in the root of your server. It’s a necessary evil because even if you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found. Also since it’s on the same server, cookies are sent every time it’s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.

So to mitigate the drawbacks of having a favicon.ico make sure:

• It’s small, preferably under 1K.
• Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it). You can probably safely set the Expires header a few months in the future. You can check the last modified date of your current favicon.ico to make an informed decision.

Imagemagick can help you create small favicons

Keep Components under 25K

tag: mobile

This restriction is related to the fact that iPhone won’t cache components bigger than 25K. Note that this is the uncompressed size. This is where minification is important because gzip alone may not be sufficient.

For more information check “Performance Research, Part 5: iPhone Cacheability – Making it Stick” by Wayne Shea and Tenni Theurer.

Pack Components into a Multipart Document

tag: mobile

Packing components into a multipart document is like an email with attachments, it helps you fetch several components with one HTTP request (remember: HTTP requests are expensive). When you use this technique, first check if the user agent supports it (iPhone does not).