The accompaning slides to my presentation at the Cape Town Front End Developers Group. Please enjoy and send me any other questions you might have :)

2. 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

3. COOL, BUT WHAT DO YOU KNOW?

4. 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!

5. 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

6. WHAT’S AN HTTP REQUEST, AND THE REAL COST
HTTP 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.

7. 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/

8. 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.

9. 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.

10. 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…

11. KRAKEN
Available as online with drag and drop or enter a url
Available as a browser plugin for one click page optimisation
LOSSY, or LOSELESS

12. 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))

13. 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

14. 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/#dataurlmaker
https://github.com/tm-minty/sublime-text-2-image2base64
http://css-tricks.com/data-uris/

15. 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 or
http://cdnjs.com/
- Combine and minify all other scripts into one. (how to coming right up)

16. 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/

17. 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'));
});
}

18. SVG TOOLS
http://benhowdle.im/svgeezy/
http://petercollingridge.appspot.com/svg_optimiser optimise!
https://code.google.com/p/svgmin/
SVGeezy

19. 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

20. CDN PROVIDERS
Cloudflare (FREE)
MaxCDN
AmazonS3

21. 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:

22. 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.

23. 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 .HTACCESS
https://gist.github.com/mauryaratan/2627841

24. 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

25. GRUNT JS
Grunt depends on NPM node package manager, an easy download:
http://nodejs.org/download/

26. YEOMAN –A MODERN WORKFLOW
- Grunt powers many other libraries such as Yeoman http://yeoman.io/
- Yeoman includes project scaffolding and package managment

27. 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

28. CODEKIT
If you like a nice GUI, and automation this tools for you
OSX only 

29. BONUS: WORDPRESS!
Secret Panel: yoursite.com/wp-admin/options.php enable gzip here or use a
plugin
Automate your smushing, server side

30. TOTAL CACHE FTW
• Server cached static html
• Link to a CDN
• Minify js/css
• improved security

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