Speed Up Your Websites

Maverick: I feel the need…
Maverick, Goose: …the need for speed!

I remember the movie as my boss imitated Maverick from Top Gun. He wanted to our company product to load fast, very fast.

Speed is a big issue today.

Here are some fascinating facts and statistics by KissMetrics1.

  • 47% of consumers expect a webpage to load in 2 seconds or less
  • 40% of people abandon a website that takes more than 3 seconds to load
  • A 1 second delay in page response can result in a 7% reduction in conversions
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year
  • 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again

Slow page loads costs money. Literally. And faster websites improve user experience. Time to speed up our sites!

Determine your sites performance

So, how fast does your website load again? There are few tools available online to evaluate the speed of your site.:

  • Page Speed – Google’s tool for examining your site’s load speed
  • YSlow! – a free tool that suggests enhancements you can do for your site

Now, let’s speed up our sites!

There have been a curnicopia (I always wanted to use that word in a blog post) of tips on how to speed up your sites. Here are well-tested tips to speed up your websites.

Put Scripts at the bottom

Unless you are new to web development, you would have probably encountered this rule on a lot of websites. Viewing some websites’ sources make you want to wonder why <script> tags are just above the <body>’s end tag.

The reason is simple really. When we put <script> tags at the bottom, they block rendering while they are being loaded executed/run.

<html>
    <body>
        <p>My page already loads faster!</p>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </body>
</html>

Minify Javascripts

Javascript files, while meant to be coded by individual beings, it is just some command to the browser. No matter how legible your code is, it won’t matter to the browser. Spaces in your javascript files are still bytes. Which means they are one of the few things your browser doesn’t need but will be downloaded. Shave off the extra bytes.

Try working with a minified and un-minified version of javascript files when you work and use the minified versions of the scripts for your websites.

Un-minified version
$(function(){
    $('#button').click(function{
        alert("I have been clicked!");
    })
});
Minified version
$(function(){$('#button').click(function{alert("I have been clicked!");})});

Minify HTML

Removing whitespace is commonly used when minifying HTML.

Default values are the keys here. HTML tag attributes just like many other things have their default values. This means that there are a ton of things we don’t need to write but write anyway just because we can.

Here are a few examples of tag attributes we don’t need to write:

<form method="get">
// Better alternative
<form>
<a href="http://yourwonderfulwebsite.com/home.html">
// Better alternative
<a href="/home.html">

Final Words

Remember, slow loading pages, costs money and faster loading pages improve customer experience.

Further Reading

There are tons of information on the web about performance. Here’s a list of very good articles with regards to performance and web speed.

1 KissMetrics

 HTML5 Datalist

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Autocomplete is probably one of the most used UI implementations of the last decade.

Why shouldn’t it be? It makes it easier for websites to present possible values you would want. It makes for a sleeker form instead of having an ugly select tag.

HTML5 Datalist

As always HTML5 has come up with the neatest tricks possible. As a replacement to our old autocomplete implementations, HTML5 presents the Datalist.

How to Use

First, we will need to have some data that we want to present to our users.

<datalist id="countries">
    <option value="United States">
    <option value="Afghanistan">
    <option value="Andorra">
    <option value="Antigua and Barbuda">
    <option value="Argentina">
    <option value="Armenia">
    <option value="Australia">
    <option value="Austria">
    <option value="Azerbaijan">
    <option value="Bahamas">
    <option value="Bahrain">
    <option value="Bangladesh">
    <option value="Barbados">
    <option value="Belarus">
    <option value="Belgium">
    <option value="Belize">
    <option value="Benin">
    <option value="Bhutan">
    <option value="Bolivia">
    <option value="Bosnia and Herzegovina">
    <option value="Botswana">
    <option value="Brazil">
    <option value="Brunei">
    <option value="Bulgaria">
    <option value="Burkina Faso">
    <option value="Burundi">
    <option value="Cambodia">
    <option value="Cameroon">
    <option value="Canada">
    <option value="Cape Verde">
    <option value="Central African Republic">
    <option value="Chad">
    <option value="Chile">
    <option value="China">
    <option value="Colombia">
    <option value="Comoros">
    <option value="Congo (Brazzaville)">
    <option value="Congo">
    <option value="Costa Rica">
    <option value="Cote d'Ivoire">
    <option value="Croatia">
    <option value="Cuba">
    <option value="Cyprus">
    <option value="Czech Republic">
    <option value="Denmark">
    <option value="Djibouti">
    <option value="Burundi">
    <option value="Dominica">
    <option value="Dominican Republic">
    <option value="East Timor (Timor Timur)">
    <option value="Ecuador">
    <option value="Egypt">
</datalist>

Then we need to add our input box

<input name="countries" list="countries" />

Try it!

Try the HTML5 Datalist sample here!

 Best Practices When Creating HTML Emails

Most web developers have, even once, written an HTML email.

Coding a HTML website is one thing. Coding an HTML is another. There are a few things you have to consider when designing and coding one.

Keep it Light on the Images

While most people who prefer websites with dazzling images, most people don’t like it in their emails. For a few reasons.

  • They load slowly
  • It (sometimes) makes things hard to read
  • Makes it hard to make sense of it all

Besides, most email clients block the images at first load. Why not take advantage of CSS colors instead?

In any case, use images, but use them sparingly.

Use Tables

I can’t image using tables when coding in HTML, except when its for data based content. I am a big fan of pushing CSS to the limits but with HTML emails, you shouldn’t. Tables will be your friend here. No floats will be available to you.

<table><tr><td>I know you hate me and I know it.</td></tr><table>

Use External Images

Images should be hotlinked from an external server. That’s the way it should be.

<img src="http://www.gravatar.com/avatar/2461e49b79f7b1f72273bad5d06f2b3d?s=75" />

Use Inline CSS

Remember having read, never to use CSSs inline? Forget that when writing HTML emails. Most clients will block or won’t interpret external CSSs.

<p style='background-color: #333333; color: #FFFFFF'>This is some white text on black background</p>

Test on various email clients

Test. Test. Test. A nice HTML email will be able to be rendered correctly on a bunch of mostly used HTML email clients. The most popular are:

  • Microsoft Outlook
  • Yahoo! Mail
  • Hotmail
  • Gmail
  • Apple Mail

Now, don’t forget these when you think of writing or designing your own HTML emails!

 Create / Modify Text Files on the Command Line

While working on the command line, I hate opening up files in editors just to create files that would contain measly content like, .rvmrc, phpinfo files and README files.

Fortunately, in Linux and Unix systems, you can easily create and modify files with just the command line. This guide will teach how to create and modify any text files without the use of a text editor on the Command line.

Create a file

This command simply lets you create files:

touch phpinfo.php

This command simply lets you create the files and start adding content. Press Ctrl+D to stop.

cat > phpinfo.php

Append content

This simply lets you append some text. In this case, <?php phpinfo();.

echo "<?php phpinfo();" > phpinfo.php

This command simply lets you append to the file specified. Press Ctrl+D to stop.

echo "<?php phpinfo();" > phpinfo.php

View a file’s content

cat phpinfo.php
<?php phpinfo();

‘Nuff said!