Make the Web Faster

Make the Web Faster

Web performance best practices you should be using today

028c88d541f0315bde4141987d56d210?s=128

Shahab Lashkari

October 06, 2015
Tweet

Transcript

  1. Make the Web Faster Web Performance Best Practices You Should

    Be Using Today Shahab Lashkari Director of Product Development OmniUpdate, Inc. @heyShahab #DPA7
  2. Speed is a feature

  3. Faster sites lead to… better user engagement better user retention

    higher conversions
  4. When appropriate, serve static content

  5. Time and User Perception Source: High Performance Browser Networking Try

    to provide visual feedback in under 250 milliseconds to keep the user engaged
  6. Latency and bandwidth dictate the performance of all network traffic

  7. Latency The time from the source sending a packet to

    the destination receiving it
  8. Latency Defines the round-trip time (RTT) delay of communicating between

    servers independent of file size
  9. Latency Source: High Performance Browser Networking

  10. Bandwidth Maximum throughput of a logical or physical communication path

  11. Bandwidth Defines the rate at which data can be transferred

    between two nodes
  12. Source: High Performance Browser Networking

  13. Bandwidth A single 65KB file takes approximately 52 milliseconds to

    transfer at 10Mbit/s
  14. "It's the latency, stupid" — Stuart Cheshire, 1996 https://rescomp.stanford.edu/~cheshire/rants/Latency.html

  15. Make fewer HTTP requests

  16. CSS Sprites Contra images copyright Konami

  17. CSS Sprites Combine your images into a single file and

    use the CSS background-­‐image and background-­‐position properties to display only the portion you need CSS sprite tutorial: https://css-tricks.com/css-sprites
  18. Combine external resources Concatenate custom CSS and JavaScript files into

    their own respective single files
  19. Inline Images Use the data:  URL  scheme to embed the

    image data directly into your HTML
  20. Use a content delivery network (CDN)

  21. Content Delivery Networks A collection of web servers designed designed

    to deliver content efficiently 
 Will generally choose the server that is closest to you, reducing latency
  22. Content Delivery Networks Often increase the likelihood of a browser

    cache hit 
 Don't have the additional overhead of sending cookies with each request
  23. Add an Expires header

  24. Use an Expires header Tells browsers to cache your resources,

    making subsequent loads fast Source: High Performance Web Sites
  25. Place all CSS at the top

  26. Place all CSS at the top Historically, JavaScript files would

    block further downloads of external resources (e.g., CSS) until after the script was downloaded and executed
  27. Place all CSS at the top Most modern desktop browsers

    use speculative parsing and do not block on JavaScript files 
 However, browsers won't render until
 all stylesheets are downloaded
  28. When possible, place scripts at the bottom

  29. Place scripts at the bottom JavaScript files will block progressive

    rendering until they are downloaded and executed 
 Alternatively, use the async attribute on your script tag to tell the browser not to wait for it
  30. Reduce file sizes

  31. Serve compressed files Configure your web server to serve gzip

    compressed source files
  32. Minify JavaScript Use a minification tool to shrink JavaScript files

    by removing unnecessary whitespace, shortening variable names, etc.
  33. Remove unused CSS rules Use a tool to detect and

    remove any unused CSS rules Example: http://addyosmani.com/blog/removing-unused-css
  34. Audit tools

  35. Audit tools YSlow - Browser plugin that tests against Yahoo's

    performance best practices rules 
 Chrome Developer Tools Audits
  36. What about HTTP/2? See also: Yesterday's perf best-practices are today's

    HTTP/2 anti-patterns
  37. Questions?

  38. Thank you! Shahab Lashkari Director of Product Development OmniUpdate, Inc.

    @heyShahab #DPA7
  39. Resources High Performance Web Sites by Steve Souders High Performance

    Browser Networking by Ilya Grigorik Even Faster Web Sites by Steve Souders CSS Sprite Generator Data URL Maker Spring-Cleaning Unused CSS by Addy Osmani