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

1. Web Performance Optimization
Just one second please !
Maxime Lemaitre

2. • Introduction
• Goals & Objectives
• Why performance matters ?
• Web application delivery chain
• Some rules & Some tools
• Next Steps
2
Agenda

3. • Evangelize performance and explain why it is
important
– Have a performance culture !
– Have a performance plan !
• Do performance tests, setup production metrics
& KPIs, do monitoring and reports
• And of course, increase responsiveness of
your website !
3
Goals & 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
Web performance matters ?
short history : from a tech challenge to a differentiator
• First decade of the web's 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. Bing : page that was 2 seconds slower resulted in a 4.3% drop in revenue/user
Yahoo : 400 milliseconds slowdown resulted in a 5-9% drop in full-page traffic
Google : 400 millisecond delay caused a 0.59% drop in searches/user
Even after the delay was removed, these users still had -0.21% fewer searches
 slower user experience affects long term behavior
AOL : page views drop off as page load times increase
Mozilla : 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 hardware
Amazon : Every 100ms delay costs 1% of sales
5
Web performance matters ?
case studies in web industry

6. 6
Why 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 « same
thing »
• Is is important to attract new users ?
• Is SEO important for you ?
• Does you marketing team wants to show
everything 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 Scalability
7
Why performance matters ?
for techs & devs

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
– …
8
Web Application Delivery Chain
performance at the bottom line
Do not trust that every user have a
Core i5 CPU with 8 Go Ram on
Windows 7 on a 100 Mbits/s
connection ! It’s false !
Try to test performance on slowest
computers and slowest bandwidth

9. 80-90% of the end-user response time is spent on the frontend !
9
Web Performance
where to start ?

10. “We should forget about small efficiencies, say
about 97% of the time: premature optimization is
the root of all evil”
Donald Knuth
Never automatically apply tips, best
practices & improvements without
checking before/after the changes.
=> Profiling and Micro-Benchmark
10
Important Note
before going deeper

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 scores
11
Web Performance auditors
Google PageSpeed & YSlow

12. Html Parsing Pipeline
how page loads
• Loading a page is not as simple as
dowloading a single file
– Involve dynamic ressources
– Cascading stylesheet
– Javascripts
• Common performance issue :
Because JavaScript code can alter the content
and layout of a web page, the browser delays
rendering any content that follows a script tag
until that script has been downloaded, parsed and
executed.
Many browsers block the downloading of
resources referenced in the document after
scripts until those scripts are downloaded and
executed
12

13. Round-trip time (RTT) is the time it takes for a client to send a request and the
server to send a response over the network, not including the time required for
data 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
• …
13
Golden Rule #1
minimize round-trip times
Downloading 50 B always have a cost !

14. 14
Less than 6 connections per hostname
Limit number of requests

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
• …
15
Golden Rule #2
Minimize Request Overhead & payload size

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 to
16
Images Optimizations
Web 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 to
load, 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 Chrome
17
Golden Rule #3
Optimize Browser rendering

18. • Styles are downloaded and applied when rendering
Browsers block rendering a web page until all external stylesheets have been
downloaded
- 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 executed
The page has to wait for the script blocks to be fully downloaded, parsed and
executed 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 script
18
Quick Focus : Styles & Scripts
Why is it so important to optimize styles & scripts?

19. What is the page speed (with/without Cache) for this
ridicoulous page ?
19
Scripts
Stop paying the Script tax

20. • First View
• Repeat View
• Repeat View (on my laptop in power saving mode)
20
Scripts
Stop paying the Script tax²
Even from cache (no
download), it takes a
few ms to parse &
exec Scripts.
Not so fast …

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 performance
Id < Tag < Class
– Do not repeat selectors & abuse chain
Cache 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 here
21
Jquery Performance
with great power comes great responsibility (Spiderman)

22. 22
How to mesure/improve performance ?
hopefully there are many tools !
• Sql Profiler
• Graphite
• Web Developpers
Tools
• 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 Web
Perf
• Gtmetrix
• Micro Benchmark
• Google Site Speed
• Centreon
• New Relic
• Node.js
• DB Provider Client
Statistics
• SpeedTrace
• Headless Browsers
• Boomerang.js
• MVC Bundles
• Optipng
• Glimpse
• SpriteMe
• Firebug
• Your own tool here!

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 
23
Next Steps

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/ (betting
industry)
• http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/
• http://www.browserscope.org
• http://browserdiet.com/
• http://gtmetrix.com/
24
Appendices

25. Yslow Best Practices
Add Expires headers
Avoid AlphaImageLoader filter
Avoid CSS expressions
Avoid empty src or href
Avoid HTTP 404 (Not Found) error
Avoid URL redirects
Compress components with gzip
Configure entity tags (ETags)
Do not scale images in HTML
Make AJAX cacheable
Make favicon small and cacheable
Make fewer HTTP requests
Make JavaScript and CSS external
Minify JavaScript and CSS
Put CSS at the top
Put JavaScript at bottom
Reduce cookie size
Reduce DNS lookups
Reduce the number of DOM elements
Remove duplicate JavaScript and CSS
Use a Content Delivery Network (CDN)
Use cookie-free domains
Use GET for AJAX requests
25

26. Avoid a character set in the meta tag
Avoid bad requests
Avoid CSS @import
Avoid CSS expressions (deprecated)
Avoid document.write
Avoid Flash on mobile webpages
Avoid landing page redirects
Combine external CSS
Combine external JavaScript
Combine images using CSS sprites
Defer loading of JavaScript
Defer parsing of JavaScript
Enable gzip compression
Enable Keep-Alive
Improve server response time
Inline small CSS
Inline small JavaScript
Leverage browser caching
Leverage proxy caching (deprecated)
Make landing page redirects cacheable
Minify CSS
Minify HTML
Minify JavaScript
Minimize cookie size (deprecated)
Minimize DNS lookups
Minimize redirects
Minimize request size
Optimize images
Optimize the order of styles and scripts
Parallelize downloads across hostnames
Prefer asynchronous resources
Put CSS in the document head
Remove query strings from static resources
Remove unused CSS
Serve resources from a consistent URL
Serve scaled images
Serve static content from a cookieless domain
Specify a cache validator
Specify a character set early
Specify a Vary: Accept-Encoding header
Specify a viewport for mobile browsers
Specify image dimensions
Use an application cache
Use efficient CSS selectors
26
PageSpeed Rules