WEBSIT

E OPT

IMIS

ATIO

N

A P

RE

SE

NT A

TI O

N B

Y G

RE

G B

EN

NE

R

WHO AM I?

@gregbenner

http://gregbenner.ca

http://za.linkedin.com/in/gregbenner

WHAT DO I DO?

Front End Development-focusing on javascript, and jquery-CSS3 and HTML5-PHP and MYSQL

COOL, BUT WHAT DO YOU KNOW?

WHAT I WOULD LIKE TO COVER

• Why do we need to optimize a website?

• What’s an http request, and the real cost of one

• How do we check our website

• What these tools show us

• What is minifying, how does this help

• Images, and how to tame them

• Tools, best practices and choosing the right file type

• SVG’s and how to make use of them today

• Fonticons the newest craze

• GZIP, Deflate

• Command Line Tools

• Bonus: WordPress tips and tricks!

WHY??

People want to see what you’re sharing with them quickly.

- If they don’t they will leave quickly.

- They don’t want to pay to see your site, keep it low, keep their bills low.

- Google, and Bing will give you a higher index if your site is fast (SEO)

- Save yourself time and money. Going over your bandwidth will cost you or crash you

- I can go on but I think you get the idea

WHAT’S AN HTTP REQUEST, AND THE REAL COSTHTTP Requests vs File Size?

http://stackoverflow.com/questions/9855545/http-requests-vs-file-size

The practical answer is never, especially when you're talking about relatively minuscule amounts of data like a kilobyte or two.

The real enemy of a web page's performance is not the number of bytes transferred; rather, it is network latency. Let's take your example and consider a 5 Mb/s connection (the average connection speed in the US is a little over that) with a ping time to your server of 80ms:

1x 20 kB files: 80ms latency + 31ms transfer time = 111ms

2x 4 kB files: 160ms latency + 13ms transfer time = 173ms

This "optimization" just cost at least 62ms with all other variables being equal. In the real world, I'd wager that performance would be even worse due to things like extra server load.

INSPECTION TOOLS

PageSpeed https://developers.google.com/speed/docs/best-practices/rules_intro

YSlow http://developer.yahoo.com/performance/rules.html

Pingdom http://tools.pingdom.com

Webkit Inspector:

WIN Ctrl + Shift + I OSX ⌥ + ⌘ + I

Or as a last resort right click anywhere then inspect element

Learn the DOM Tools for free in depth http://discover-devtools.codeschool.com/

NETWORK PANEL

Latency, the time between making the request and the server's first response, is shown in the lighter shade within each bar.

The blue and red vertical lines - on the right-hand side in the above screenshot - indicate firing of the DOMContentLoadedand Load events respectively.

WHAT IS MINIFYING, HOW DOES THIS HELP?- Image files contains a lot of information that is useless on the

Web. For example, a

JPEG photo can have Exifmetadata from the camera (date, camera model, location,

etc.)

- A PNG contains information about colors, metadata, and sometimes even a

miniature

embedded thumbnail.

- To improve the User Experience you should use Progressive JPEGS, in photoshop the

default is baseline. Baseline are a bit smaller but the way in which they load is

perceived to be much, much slower.

SOME TOOLS TO HELP YOU OUT

Online:

• Smush it by Yahoo http://www.smushit.com/ysmush.it/ loseless

• Tiny PNG http://tinypng.org/ lossy

• Kraken http://kraken.io/ both

Desktop:

• ImageOptim (Mac)

• RIOT (Windows)

• ImageAlpha (Mac)

• JPEGMini (Mac, iOS, soon Windows)

Command Line tools covered later…

KRAKEN

Available as online with drag and drop or enter a urlAvailable as a browser plugin for one click page optimisationLOSSY, or LOSELESS

SPRITING, IT’S A GOOD THING

A Sprite is the idea of taking many small images and combining them into one big

One. This is a best practice in web design and the idea originates from Arcade games

70’s (http://en.wikipedia.org/wiki/Sprite_(computer_graphics))

TOOLS TO HELP YOU OUT

http://www.spritecow.com/ online

http://spritepad.wearekiss.com/ online

http://www.codeandweb.com/texturepacker

http://compass-style.org/help/tutorials/spriting/ sass compass

INLINE IMAGES

• Another Nifty trick to add to your arsenal is data-uri images or base64 images.They have decent support, IE8 is limited to 32kb but is easy enough to have a fallback

for.

• They have the advantage of no http request, and even though they generally are 30%Larger than the equivalent raster image, they benefit greatly from GZIPPING on the server.

• There are online tools to generate them, desktop tools, command line tools, and plugins for your favorite text editors.

http://compass-style.org/reference/compass/helpers/inline-data/http://dataurl.net/#dataurlmakerhttps://github.com/tm-minty/sublime-text-2-image2base64 http://css-tricks.com/data-uris/

ANATOMY OF A FAST WEB PAGE

-As a general rule, styles in the <head> right at the top.

-One style sheet for the whole website (Personal philosophy) remember those nasty

http requests from earlier

-JS at the bottom, so it doesn’t block page loading.-

- Exceptions being modernizer, or any script required to render the DOM such as an IE shiv/shim

- Serve popular libraries from a Content Delivery Network such as https://developers.google.com/speed/libraries/devguide#jquery orhttp://cdnjs.com/

- Combine and minify all other scripts into one. (how to coming right up)

WHY MINIFY JS/CSS/HTML?

JPG,PNG, and GIF’s have already been compressed to a degree. But our text based

files at this point are sitting there all bloated and full of whitespace.

JS/CSS/HTML/SVG/XML and anything else text based on the net can be minified

which is the process of removing extra whitespace. This provides a significant

reduction in bandwidth.

Some online tools:

http://www.willpeavy.com/minifier/

https://developers.google.com/closure/compiler/

http://yui.github.io/yuicompressor/

SVG’S THEY’RE VECTORIFIC!

Use svg’s they are sometimes a little larger in file size but they are crisp and look

great on retina displays or when a user is zoomed in. Plus SVG’s are text based and

when served gzipped (as you should!) the file size is at least the same as an

equivalent raster image which doesn’t benefit from gzip compression.

Modernizer Trick:

if (!Modernizr.svg) {

$('img[src$=".svg"]').each(function()

{

$(this).attr('src', $(this).attr('src').replace('.svg', '.png'));

});

}

SVG TOOLS

http://benhowdle.im/svgeezy/

http://petercollingridge.appspot.com/svg_optimiser optimise!

https://code.google.com/p/svgmin/

SVGeezy

CONTENT DELIVERY NETWORKS

Content Delivery Networks, are a host that is in the cloud. They have multiple

locations and based where the rwebpage is being requested try to provide it from the

closest geographical location to minimize latency.

CDN’s also provide a firewall to block threats to your site and can be cheaper to host

With. The downside is that there aren’t many stations in South Africa / Africa so you

will not benefit from the reduced latency. If you cater for a world wide audience they

are worth looking into

CDN PROVIDERS

Cloudflare (FREE)

MaxCDN

AmazonS3

ICONFONTS

One downside to SVG’s is browser support, here’s where iconfonts really shine.

They are backwards compatible to IE7, work on mobile and maintain a small size.

There are a plethora of ready made ones for download, including twitter bootstrap

famous:

BUT WHY NOT ROLL YOUR OWN?

With the lovely ICOMoon service you can create or source SVG files upload them and

Create a whole set for yourself, or even pick and choose from existing fonticons.

GZIP

It’s like winzip for you server!

• Gzip is easily turned on with an .htaccess file place in your directory root

• Gzip works well with text based files, but not images (it can add file size)

• Gzip can also be turned on when using a CMS such as WordPress, Joomla, or Drupal via the admin panel or plugins

Check out this GIST for an starter .HTACCESShttps://gist.github.com/mauryaratan/2627841

COMMAND LINE TOOLS

This is the next level of automation, I used to fear the command line but now it’s easy

• The biggest advantage here is you can achieve all the same results without any extra work

• Set these bad boys up, use one command and every time you save they will go to work.

• They are mostly written in JavaScript running on a server called NodeJS

• There are also nifty Ruby tools that do similar tasks.

commandline tools for images:

• pngout

• jpegtran

• gifsicle

• imgopt

GRUNT JS

Grunt depends on NPM node package manager, an easy download:

http://nodejs.org/download/

YEOMAN –A MODERN WORKFLOW

- Grunt powers many other libraries such as Yeoman http://yeoman.io/

- Yeoman includes project scaffolding and package managment

GRUNT IS BASED ON PLUGINS

IMAGES: https://github.com/heldr/grunt-img optipng / jpegtran

SVG to ICON FONTS https://github.com/filamentgroup/grunticon svg

SVG OPTIMISATION https://github.com/sindresorhus/grunt-svgmin

CODEKIT

If you like a nice GUI, and automation this tools for you

OSX only

BONUS: WORDPRESS!

Secret Panel: yoursite.com/wp-admin/options.php enable gzip here or use a plugin

Automate your smushing, server side

TOTAL CACHE FTW

• Server cached static html• Link to a CDN• Minify js/css• improved security

THANKS!

I will put these up on slideshare with all the links, watch my twitter @gregbenner

QUESTION? ASK AWAY!