Make the Web Faster

Web performance best practices you should be using today

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