Web Optimisation
-
Upload
gregory-benner -
Category
Technology
-
view
1.344 -
download
0
description
Transcript of Web Optimisation
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!