Web Performance Optimization (WPO)


Published on

What you should know on Web Performance Optimization, to evangelize on this critical issue.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Performance Optimization (WPO)

  1. 1. Web Performance OptimizationJust one second please !Maxime Lemaitre
  2. 2. • Introduction• Goals & Objectives• Why performance matters ?• Web application delivery chain• Some rules & Some tools• Next Steps2Agenda
  3. 3. • Evangelize performance and explain why it isimportant– Have a performance culture !– Have a performance plan !• Do performance tests, setup production metrics& KPIs, do monitoring and reports• And of course, increase responsiveness ofyour website !3Goals & Objectives• We won’t talk (today) about– Load Testing– How to write efficient data acces queries– Which is the fastest between C#, Java or Php ?– ….
  4. 4. 4Web performance matters ?short history : from a tech challenge to a differentiator• First decade of the webs existence (1993 – 2003).– Performance focus on :• Optimize website code (simple scripts)• Improve data access (use indexes, fewer queries, …)• Reduce packet loss and retransmission• Pushing hardware limitations (CPU, Memory, IO…) Not focused on browser display speed• An emerging industry (2004-2009)– Steve Souders (Yahoo), pioneer in « web performance optimization »• 85% of the time that it takes to download and view a website is controlled by the front-end structure• 10 predictions (fast by default, Visibility into the browser, monitoring, mobile, … => a differientator)– Velocity 2009 Conference is a key event in web performance• Many case studies from Microsoft, AOL, Amazon, ShopZilla , …• Not only for techs but also other parts of the organization (management, marketing, sales, …)• Last years (2010 – Now)– Google : « we’ve decided to take site speed into account in our search rankings »– For an ecommerce website, it’s been proven that speed = money– Trend : make the web faster because web pages are bigger and more complex than ever
  5. 5. Bing : page that was 2 seconds slower resulted in a 4.3% drop in revenue/userYahoo : 400 milliseconds slowdown resulted in a 5-9% drop in full-page trafficGoogle : 400 millisecond delay caused a 0.59% drop in searches/userEven after the delay was removed, these users still had -0.21% fewer searches slower user experience affects long term behaviorAOL : page views drop off as page load times increaseMozilla : Shaving 2.2 seconds off their home page increased downloads by 15.4%ShopZilla : 5 second speed up• 25% increase in page views• 7-12% increase in revenue• 50% reduction in hardwareAmazon : Every 100ms delay costs 1% of sales5Web performance matters ?case studies in web industry
  6. 6. 6Why performance matters ?for customers (source : Velocity Conf, Aberdeen, Gomez, Akamai)Is Web Performance important for your company ?• Are you in a competitive industry ?• Do you sell something ?• Does another website sell basically the « samething »• Is is important to attract new users ?• Is SEO important for you ?• Does you marketing team wants to showeverything on your homepage ?• ….
  7. 7. • Better user experience– Customers will be happier and will tell others how good we are– Keep them more focused on our content, rather than waiting for scripts/images• Improve SEO– One of the 200 signals used in Google Rankings• Mobile performance : a new challenge– Tablets/Smartphones are slower than desktops– Much more limits and latency• Improve conversion rate– every second win, will boost customer confidence and trust in your site• Reduce costs– Bandwidth– Less Hardware/Servers• Better Scalability7Why performance matters ?for techs & devs
  8. 8. • Final page speed is a depending on– User computer and browser– User current activity– User network connection/ISP– Internet Backbone– Web Hosting location– HTML (JS, CSS, Images, ..)– Third-Party libraries / Ads / Analytics– CDN– Firewall/Load balancer– Web Page / server code– Frontend servers / Web Farms– API/WebServices Calls– Middle Tier / Backend servers– Database– …8Web Application Delivery Chainperformance at the bottom lineDo not trust that every user have aCore i5 CPU with 8 Go Ram onWindows 7 on a 100 Mbits/sconnection ! It’s false !Try to test performance on slowestcomputers and slowest bandwidth
  9. 9. 80-90% of the end-user response time is spent on the frontend !9Web Performancewhere to start ?
  10. 10. “We should forget about small efficiencies, sayabout 97% of the time: premature optimization isthe root of all evil”Donald KnuthNever automatically apply tips, bestpractices & improvements withoutchecking before/after the changes.=> Profiling and Micro-Benchmark10Important Notebefore going deeper
  11. 11. • Yslow & PageSpeed– Proven front-end best practices & recommandations– Very popular & easy to install (browser extension or online service)– Current : Yslow (23 best practices) & PageSpeed (31 rules)• But …– does not look at our Infrastructure, Application Performance, CDN, DB Queries,datacenter distribution, load balancing, …– does not include the actual speed of the tested page !– Lower scores/grades can load faster than Higher scores11Web Performance auditorsGoogle PageSpeed & YSlow
  12. 12. Html Parsing Pipelinehow page loads• Loading a page is not as simple asdowloading a single file– Involve dynamic ressources– Cascading stylesheet– Javascripts• Common performance issue :Because JavaScript code can alter the contentand layout of a web page, the browser delaysrendering any content that follows a script taguntil that script has been downloaded, parsed andexecuted.Many browsers block the downloading ofresources referenced in the document afterscripts until those scripts are downloaded andexecuted12
  13. 13. Round-trip time (RTT) is the time it takes for a client to send a request and theserver to send a response over the network, not including the time required fordata transfer.• Minimize redirects• Use HTTP Cache Headers• Avoid bad/duplicated/useless requests• Combine external JavaScript & Css• Combine images using CSS sprites• Optimize the order of styles and scripts• Prefer asynchronous resources (Async or Deferred JS)• Parallelize downloads across hostnames• …13Golden Rule #1minimize round-trip timesDownloading 50 B always have a cost !
  14. 14. 14Less than 6 connections per hostnameLimit number of requests
  15. 15. Amount of data sent in each server response can add significant latency,especially in areas where bandwidth is constrained• Enable Gzip compression• Limit HTTP Headers (Uncompressed)• Remove unused CSS/JS/comments• Avoid inline/embedded styles and scripts• Minify CSS & JavaScript• Minify HTML• Optimize, Optimize, Optimize images• Serve scaled images• …15Golden Rule #2Minimize Request Overhead & payload size
  16. 16. Web images take up the majority of the download time in most web pages• Choose an appropriate file format (JPG, PNG, GIF)– For JPG, use progressive image (demo)• Optimize image size– Crop whitespace, Remove useless data (color palette, EXIFF, ..)– Apply a Lossless compressor (OptiPNG or PNGOUT)• Try to apply width and height for each <img> tag– Avoid unnecessary repaints and reflows during rendering– But do not use it to scale images : server already scaled images• Use Sprites (see )– reduced the number of HTTP requests and avoided any potential delay• Use Data-URI– inline the content of the URI you would normally point to16Images OptimizationsWeb images take up the majority of the download time in most web pages
  17. 17. Once resources have been downloaded to the client, the browser still needs toload, interpret, and render HTML, CSS, and JavaScript code.• Limit Number of DOM elements• Defer loading of JavaScript and Third party components• Avoid DOM alterations• Styles at top, Scripts at bottom• Use efficient CSS selectors & Avoid CSS expressions• Specify image dimensions• Specify a character set• Check Javascript and especially Jquery performance• …Google SpeedTracer could help you (home)low level instrumentation points inside Chrome17Golden Rule #3Optimize Browser rendering
  18. 18. • Styles are downloaded and applied when renderingBrowsers block rendering a web page until all external stylesheets have beendownloaded- Put styles in head allow the browser to progressively render the page- Put styles in body can cause repaints & reflows (demo)• Scripts are downloaded, parsed and executedThe page has to wait for the script blocks to be fully downloaded, parsed andexecuted before being able to parse and render any following HTML– Block the rendering of any following HTML– Block the downloading of resources referenced in the document after the script18Quick Focus : Styles & ScriptsWhy is it so important to optimize styles & scripts?
  19. 19. What is the page speed (with/without Cache) for thisridicoulous page ?19ScriptsStop paying the Script tax
  20. 20. • First View• Repeat View• Repeat View (on my laptop in power saving mode)20ScriptsStop paying the Script tax²Even from cache (nodownload), it takes afew ms to parse &exec Scripts.Not so fast …
  21. 21. Easy to write JavaScript ……and easy to write really really bad JavaScript and slow down page load• Minimal recommandations– Always use the latest version of Jquery (test)jQuery team is always looking to bring improvements– Use appropriate selections (test)Many ways to select an element, but they don’t have the same performanceId < Tag < Class– Do not repeat selectors & abuse chainCache results & object– Use for instead of foreach (test)Native JavaScript functions is always faster– Do use Jquery … if possible (test)Native JavaScript functions is always faster²• Continue Reading here21Jquery Performancewith great power comes great responsibility (Spiderman)
  22. 22. 22How to mesure/improve performance ?hopefully there are many tools !• Sql Profiler• Graphite• Web DeveloppersTools• WebPageTest.org• PhantomJS• Selenium Web Driver• Har Viewer• Google Page Speed• Yslow• dotTrace• Pingdom tools• Fiddler• jsPerf• MVC MiniProfiler• dynaTrace• Google Analytics• IIS & Apache Logs• Performance coutners• Visual Studio WebPerf• Gtmetrix• Micro Benchmark• Google Site Speed• Centreon• New Relic• Node.js• DB Provider ClientStatistics• SpeedTrace• Headless Browsers• Boomerang.js• MVC Bundles• Optipng• Glimpse• SpriteMe• Firebug• Your own tool here!
  23. 23. • Learn how to improve Web performance• Investigate available performance tools– Dev customs tools if necessary• Automate performance testing• …It’s only the beginning !PS : And of course, check Performance of your Web Site 23Next Steps
  24. 24. • https://developers.google.com/speed/• http://developer.yahoo.com/performance/• http://www.webpagetest.org/• http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html• http://www.softwareishard.com/har/viewer/ (HAR file viewer)• https://github.com/blog/1252-how-we-keep-github-fast (github performance)• http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#parsing (Parsing HTML Documents)• http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ (must read)• http://dmix.ca/2010/01/the-marketing-of-sports-betting-sites/ (bettingindustry)• http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/• http://www.browserscope.org• http://browserdiet.com/• http://gtmetrix.com/24Appendices
  25. 25. Yslow Best PracticesAdd Expires headersAvoid AlphaImageLoader filterAvoid CSS expressionsAvoid empty src or hrefAvoid HTTP 404 (Not Found) errorAvoid URL redirectsCompress components with gzipConfigure entity tags (ETags)Do not scale images in HTMLMake AJAX cacheableMake favicon small and cacheableMake fewer HTTP requestsMake JavaScript and CSS externalMinify JavaScript and CSSPut CSS at the topPut JavaScript at bottomReduce cookie sizeReduce DNS lookupsReduce the number of DOM elementsRemove duplicate JavaScript and CSSUse a Content Delivery Network (CDN)Use cookie-free domainsUse GET for AJAX requests25
  26. 26. Avoid a character set in the meta tagAvoid bad requestsAvoid CSS @importAvoid CSS expressions (deprecated)Avoid document.writeAvoid Flash on mobile webpagesAvoid landing page redirectsCombine external CSSCombine external JavaScriptCombine images using CSS spritesDefer loading of JavaScriptDefer parsing of JavaScriptEnable gzip compressionEnable Keep-AliveImprove server response timeInline small CSSInline small JavaScriptLeverage browser cachingLeverage proxy caching (deprecated)Make landing page redirects cacheableMinify CSSMinify HTMLMinify JavaScriptMinimize cookie size (deprecated)Minimize DNS lookupsMinimize redirectsMinimize request sizeOptimize imagesOptimize the order of styles and scriptsParallelize downloads across hostnamesPrefer asynchronous resourcesPut CSS in the document headRemove query strings from static resourcesRemove unused CSSServe resources from a consistent URLServe scaled imagesServe static content from a cookieless domainSpecify a cache validatorSpecify a character set earlySpecify a Vary: Accept-Encoding headerSpecify a viewport for mobile browsersSpecify image dimensionsUse an application cacheUse efficient CSS selectors26PageSpeed Rules