Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make the Web Faster

Make the Web Faster

Web performance best practices you should be using today

Shahab Lashkari

October 06, 2015
Tweet

More Decks by Shahab Lashkari

Other Decks in Technology

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. Time and User Perception Source: High Performance Browser Networking Try

    to provide visual feedback in under 250 milliseconds to keep the user engaged
  3. 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
  4. Inline Images Use the data:  URL  scheme to embed the

    image data directly into your HTML
  5. 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
  6. Content Delivery Networks Often increase the likelihood of a browser

    cache hit 
 Don't have the additional overhead of sending cookies with each request
  7. Use an Expires header Tells browsers to cache your resources,

    making subsequent loads fast Source: High Performance Web Sites
  8. 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
  9. 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
  10. 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
  11. Minify JavaScript Use a minification tool to shrink JavaScript files

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

    remove any unused CSS rules Example: http://addyosmani.com/blog/removing-unused-css
  13. Audit tools YSlow - Browser plugin that tests against Yahoo's

    performance best practices rules 
 Chrome Developer Tools Audits
  14. 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