How to Optimize Your Website for Speed

Mike DalisayNovember 19th, 2013Last Updated: November 19th, 2013

4 32 3 minutes read

Hey guys! Today we have a guest post about some tips on how to speed up your website! He’s currently working for an e-commerce website and one of his tasks is to make the site load fast. So enjoy reading below! ~ Mike

Website speed becomes an obsession of search engines like Google and one of the reasons is the rapid growth of mobile internet browsing. If you’re working with the web (developers, designers, bloggers and students), it is now a requirement to have knowledge in making a website load fast, and our post for today will give you some ideas on why and how to achieve it.

1.0 A must read note from Google

“Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.”

2.0 Website Speed and Performace

2.1 Pagespeed Insights – analyzes the content of a web page, then generates suggestions to make that page faster.
2.2 Pingdom Website Speed Test – one of the most reliable website speed tester, you can test the load time of your page, analyze it and find bottlenecks.
2.3 Yslow – is also a plugin that grades website and gives statistical information of your website performance.
2.4 GTmetrix – provides result right away and suggest necessary improvement for your website:
2.5 Weboptimization – analyzes and gives detailed recommendations for site improvement as well as your web page speed report.

3.0 Image Optimization

3.1 Photoshop – when saving your photo choose the option “Save as for Web and Devices” (see Mike’s post here for a more detailed instruction). Compare the result of your image to its original size; see also if the visual quality changed. In my example image, this is the result of my tests.
1. JPG, 60 quality – 32K
2. PNG-8, 256 colors – 37K
3. GIF, 256 colors – 42K
4. PNG-24 – 146K
3.2 Yahoo Smush.It – “drag or paste your photo urls”. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality.
3.3 Image optimizer – is also a free tool and can compress image in bulk.

Tip: Crop white spaces of images and other unnecessary pixels to reduce file size of your file.

4.0 Compress your HTML, CSS and JavaScript

4.1 HTMLCompressor – is a small java library that minifies codes in html and xml by removing unnecessary characters and whitespaces without changing your codes.
4.2 JSCompress – copy paste your javascript code and compress it online to reduce 30% to 90% unneeded characters or comments.
4.3 Prettydiff – Minify, beautify and compare your code online. This tool is used by W3.org and Travelocity.
4.4 MinifyCSS – has css and javascript compression tool. It helps you clean and compress codes without manipulating or installing other applications. Copy paste and submit your code online then get the same result right away.

Note: If you already use gzip, you don’t need to use some of the tools recommended above.

5.0 Performance Best Practices

5.1 Scripts
- 5.1.1 Script position – always put your JavaScripts at the end of your HTML document, usually before the ending </body> tag. What it does is it loads the more important content of your page (like images, text, etc.) before the scripts, and that makes your page load faster.
- 5.1.2 Use external CSS instead of inline CSS.
  Good practice:
```
<link type='text/css' rel='stylesheet' href='//www.yoursite.com/styles/main.css' />
```
  Not recommended to include in your HTML document:
```
<style>
.myClass{
    padding:0 .5em;
    margin:1em;
}

#myId{
    padding:.5em;
    border:thin solid red;
}
</style>
```
  or
```
<div style='width:20em; border:thin solid #d1d1d1;'>Some div contents here.</div>
```
- 5.1.3 Combine Rules and use it once in CSS.
  Use this sample as a guide:
```
h1 { color: blue; }
p { color: blue; }
```
  Combined rule:
```
h1, p { color: blue; }
```
- 5.1.4 Validate your script at W3.Org Validator

5.2 Cache – Cache your web pages. This is very important specially to an e-commerce website and those sites that have a lot of visitors daily.

5.3 Comment Box – If you guys use comment box system, please lazy load it so that it will load only when the user reaches the lower part of your page.

5.4 CDN (content distribution/delivery network)

5.4.1 Some may not be familiar with Google CDN but take a moment to learn and take advantage to use the Hosted Libraries.
5.4.2 Cloudflare – we used this in our ecommerce site and other sites for almost 3 years and so far, we are secured and it is free of charge but they also offer advance services with fee.

5.5 Use HTML5 codes that gives you a solution for faster page performance and integration

Our HTML5 sample:

<!DOCTYPE html>

Instead of:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note: Some tutorials for you to learn HTML5 are my favorite sites when I was starting w3schools and in advance learning html5 rocks tutorials.

6.0 Hosting Services

Check your Hosting Services if they provide you the best hosting solution and better web performance. You can test their website using the above tools. Shared hosting are usually the worst, especially if your website has a lot of visitors, you should have a dedicated server.

Thanks guys for reading my insights, I hope you get new techniques in improving your website speed or projects. Let’s help one another to become a better designer and developer.

Reference: How to Optimize Your Website for Speed from our JCG partner Mike Dalisay at the The Code of a Ninja blog.