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

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

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.
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.
• 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.
What is the page speed (with/without Cache) for thisridicoulous page ?19ScriptsStop paying the Script tax

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)