O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Web Optimisation

1.567 visualizações

Publicada em

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 :)

Publicada em: Tecnologia
  • Brilliant, thanks Greg.
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • @SavyraMeyer No trouble, if you are in Chome you can access the dev tools 'View>Devleoper>Developer Tools' or 'Ctrl + Shift + I'
    Click the 'network tab', refresh the page it will log everything that loads, scroll down to the bottom and in the grey/blue bar it says 'X requests | X MB transfered' the lower both of these numbers the better. https://developers.google.com/chrome-developer-tools/docs/network
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • At the risk of hogging this space: How do I measure the size of a page? One of the factors in an upcoming website is that a blog link is going to be shared once a week or so with a large group, all of whom will be on Whatsapp and all of whom need to have smaaaaall uploads because prepaid airtime is an issue.
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Brilliant! Thanks so much Greg. Am about to do 3 sites inc my own so this info couldn't have come at a better time.
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Hi Savyra you can go to https://developers.google.com/speed/pagespeed/insights enter your site address and hit analyze. The results will give you tips on ways to improve your site's speed.
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Web Optimisation

  1. 1. WHO AM I?@gregbennerhttp://gregbenner.cahttp://za.linkedin.com/in/gregbennerWHAT DO I DO?Front End Development-focusing on javascript, and jquery-CSS3 and HTML5-PHP and MYSQL
  3. 3. 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!
  4. 4. 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 youor crash you- I can go on but I think you get the idea
  5. 5. WHAT’S AN HTTP REQUEST, AND THE REAL COSTHTTP Requests vs File Size?http://stackoverflow.com/questions/9855545/http-requests-vs-file-sizeThe practical answer is never, especially when youre talking about relatively minusculeamounts of data like a kilobyte or two.The real enemy of a web pages performance is not the number of bytes transferred; rather, itis network latency. Lets take your example and consider a 5 Mb/s connection (theaverage connection speed in the US is a little over that) with a ping time to your server of80ms:1x 20 kB files: 80ms latency + 31ms transfer time = 111ms2x 4 kB files: 160ms latency + 13ms transfer time = 173msThis "optimization" just cost at least 62ms with all other variables being equal. In the realworld, Id wager that performance would be even worse due to things like extra serverload.
  6. 6. INSPECTION TOOLSPageSpeed https://developers.google.com/speed/docs/best-practices/rules_introYSlow http://developer.yahoo.com/performance/rules.htmlPingdom http://tools.pingdom.comWebkit Inspector:WIN Ctrl + Shift + I OSX ⌥ + ⌘ + IOr as a last resort right click anywhere then inspect elementLearn the DOM Tools for free in depth http://discover-devtools.codeschool.com/
  7. 7. NETWORK PANELLatency, the time between making the request and the servers firstresponse, is shown in the lighter shade within each bar.The blue and red vertical lines - on the right-hand side in the abovescreenshot - indicate firing of the DOMContentLoadedand Loadevents respectively.
  8. 8. WHAT IS MINIFYING, HOW DOES THIS HELP?- Image files contains a lot of information that is useless on the Web. Forexample, aJPEG photo can have Exifmetadata from the camera (date, camera model,location,etc.)- A PNG contains information about colors, metadata, and sometimeseven aminiatureembedded thumbnail.- To improve the User Experience you should use Progressive JPEGS, inphotoshop thedefault is baseline. Baseline are a bit smaller but the way in which they loadisperceived to be much, much slower.
  9. 9. SOME TOOLS TO HELP YOU OUTOnline:• Smush it by Yahoo http://www.smushit.com/ysmush.it/ loseless• Tiny PNG http://tinypng.org/ lossy• Kraken http://kraken.io/ bothDesktop:• ImageOptim (Mac)• RIOT (Windows)• ImageAlpha (Mac)• JPEGMini (Mac, iOS, soon Windows)Command Line tools covered later…
  10. 10. KRAKENAvailable as online with drag and drop or enter a urlAvailable as a browser plugin for one click page optimisationLOSSY, or LOSELESS
  11. 11. SPRITING, IT’S A GOOD THINGA Sprite is the idea of taking many small images and combining them intoone bigOne. This is a best practice in web design and the idea originates fromArcade games70’s (http://en.wikipedia.org/wiki/Sprite_(computer_graphics))
  12. 12. TOOLS TO HELP YOU OUThttp://www.spritecow.com/ onlinehttp://spritepad.wearekiss.com/ onlinehttp://www.codeandweb.com/texturepackerhttp://compass-style.org/help/tutorials/spriting/ sass compass
  13. 13. 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 afallbackfor.• They have the advantage of no http request, and even though they generallyare 30%Larger than the equivalent raster image, they benefit greatly from GZIPPING onthe 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-image2base64http://css-tricks.com/data-uris/
  14. 14. 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) rememberthose nastyhttp requests from earlier-JS at the bottom, so it doesn’t block page loading.-- Exceptions being modernizer, or any script required to render the DOMsuch as an IE shiv/shim- Serve popular libraries from a Content Delivery Network such ashttps://developers.google.com/speed/libraries/devguide#jquery orhttp://cdnjs.com/- Combine and minify all other scripts into one. (how to coming right up)
  15. 15. WHY MINIFY JS/CSS/HTML?JPG,PNG, and GIF’s have already been compressed to a degree. But ourtext basedfiles 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 beminifiedwhich is the process of removing extra whitespace. This provides asignificantreduction in bandwidth.Some online tools:http://www.willpeavy.com/minifier/https://developers.google.com/closure/compiler/http://yui.github.io/yuicompressor/
  16. 16. SVG’S THEY’RE VECTORIFIC!Use svg’s they are sometimes a little larger in file size but they are crisp and lookgreat on retina displays or when a user is zoomed in. Plus SVG’s are text basedandwhen served gzipped (as you should!) the file size is at least the same as anequivalent 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));});}
  17. 17. SVG TOOLShttp://benhowdle.im/svgeezy/http://petercollingridge.appspot.com/svg_optimiser optimise!https://code.google.com/p/svgmin/SVGeezy
  18. 18. CONTENT DELIVERY NETWORKSContent Delivery Networks, are a host that is in the cloud. They havemultiplelocations and based where the rwebpage is being requested try to provideit from theclosest geographical location to minimize latency.CDN’s also provide a firewall to block threats to your site and can becheaper to hostWith. The downside is that there aren’t many stations in South Africa /Africa so youwill not benefit from the reduced latency. If you cater for a world wideaudience theyare worth looking into
  19. 19. CDN PROVIDERSCloudflare (FREE)MaxCDNAmazonS3
  20. 20. ICONFONTSOne downside to SVG’s is browser support, here’s where iconfonts reallyshine.They are backwards compatible to IE7, work on mobile and maintain asmall size.There are a plethora of ready made ones for download, including twitterbootstrapfamous:
  21. 21. BUT WHY NOT ROLL YOUR OWN?With the lovely ICOMoon service you can create or source SVG files uploadthem andCreate a whole set for yourself, or even pick and choose from existingfonticons.
  22. 22. GZIPIt’s like winzip for you server!• Gzip is easily turned on with an .htaccess file place in your directoryroot• Gzip works well with text based files, but not images (it can add filesize)• Gzip can also be turned on when using a CMS such as WordPress,Joomla, or Drupal via the admin panel or pluginsCheck out this GIST for an starter .HTACCESShttps://gist.github.com/mauryaratan/2627841
  23. 23. COMMAND LINE TOOLSThis is the next level of automation, I used to fear the command line butnow it’s easy• The biggest advantage here is you can achieve all the same resultswithout any extra work• Set these bad boys up, use one command and every time you save theywill 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
  24. 24. GRUNT JSGrunt depends on NPM node package manager, an easy download:http://nodejs.org/download/
  25. 25. YEOMAN –A MODERN WORKFLOW- Grunt powers many other libraries such as Yeoman http://yeoman.io/- Yeoman includes project scaffolding and package managment
  26. 26. GRUNT IS BASED ON PLUGINSIMAGES: https://github.com/heldr/grunt-img optipng / jpegtranSVG to ICON FONTS https://github.com/filamentgroup/grunticon svgSVG OPTIMISATION https://github.com/sindresorhus/grunt-svgmin
  27. 27. CODEKITIf you like a nice GUI, and automation this tools for youOSX only 
  28. 28. BONUS: WORDPRESS!Secret Panel: yoursite.com/wp-admin/options.php enable gzip here or use apluginAutomate your smushing, server side
  29. 29. TOTAL CACHE FTW• Server cached static html• Link to a CDN• Minify js/css• improved security
  30. 30. THANKS!I will put these up on slideshare with all the links, watch my twitter@gregbenner