# 7 Things I've Learnt Optimizing Baz's site 

[TOC]

## Site

* [http://zabirvalliji.co.uk/] (http://zabirvalliji.co.uk/)

* [http://zabirvalliji.co.uk/] (http://zabirvalliji.co.uk/)

* [http://zabirvalliji.co.uk/] (http://zabirvalliji.co.uk/) 

* Wordpress

* [http://zabirvalliji.co.uk/] (http://zabirvalliji.co.uk/) 

* Wordpress

* 2 Pages

* [http://zabirvalliji.co.uk/] (http://zabirvalliji.co.uk/) 

* Wordpress

* 2 Pages

* Responsive

* [http://zabirvalliji.co.uk/] (http://zabirvalliji.co.uk/) 

* Wordpress

* 2 Pages

* Responsive

* Animations

## YSlow

+ [Firefox plugin] (http://goo.gl/Ml2uRa) 

+ [Chrome plugin] (http://goo.gl/XWjnel) 

## 14 Rules

- [14 Rules] (http://stevesouders.com/hpws/rules.php)  

## 7 Things

### Thing 1: Make Fewer HTTP Requests

* Image Sprites

* Image Sprites

* File Concatenation

* Image Sprites

* File Concatenation

* CDN

### Thing 2: Gzip Compression

_Update `            ` file with:_

. . . . 

.htaccess

[Gzip Components] (http://gtmetrix.com/enable-gzip-compression.html)

### Thing 3: Cache Yo

+ Add Expires Header

+ [Add Expires Header] (http://www.paulund.co.uk/set-expire-headers-in-htaccess)

+ Add Expires Header

+ Remove Etag

+ Add Expires Header

+ Remove Etag

 # Remove Etag
 Header unset Pragma
 FileETag None
 Header unset ETag

   [Etag wiki] (http://en.wikipedia.org/wiki/HTTP_ETag)

+ Add Expires Header

+ Remove Etag

+ CDN

### Thing 4: Stylesheets and Scripts Organization

* No Inline Styles or Scripts

* No Inline Styles or Scripts

* Stylesheets at the Top - Scripts at the Bottom

* No Inline Styles or Scripts

* Stylesheets at the Top - Scripts at the Bottom​

* Separate Files for Desktop and for Mobile

### Thing 5: Minify

- Image Minification

  [jpg] (http://imageoptimizer.net/Pages/Home.aspx)

  [png] (https://tinypng.com/)

  [datauril] (http://dopiaza.org/tools/datauri/index.php) 

- Image Minification

- CSS Minification

  [Online Tool] (http://refresh-sf.com/)

- Image Minification

- CSS Minification

- JS Minification

  [Online Tool] (http://refresh-sf.com/)

- Image Minification

- CSS Minification

- JS Minification

- Custom builds

[jQuery] (http://projects.jga.me/jquery-builder/) 

[Bootstrap] (http://getbootstrap.com/customize/) 

### Thing 6: Background Images -> CSS

+ Gradients

  [Gradient Editor] (http://www.colorzilla.com/gradient-editor/)

+ Gradients

+ Icons -> Font Icons

  [Icon Generator] (https://icomoon.io/app/#/select)

+ Gradients

+ Icons -> Font Icons

+ Transparent Background

`background: rgba(R, G, B, A)`

### Thing 7: JS Animations -> CSS Animations

* @keyframes

. . . . 

   @keyframes fadeIn {
       0% {opacity: 0}
       100% {opacity: 1}
   }

* @keyframes

* Transitions 

  `                                                                           `

transition: background-position 0.5s ease

## Recap

1. Thing 1: Make Fewer HTTP Requests

2. Thing 2: Gzip Compression

3. Thing 3: Cache Yo

4. Thing 4: Stylesheets and Scripts Organization

5. Thing 5: Minify

6. Thing 6: Background Images -> CSS

7. Thing 7: JS Animations -> CSS Animations

## Markdown

* [Mardown Syntax](http://daringfireball.net/projects/markdown/syntax)