Incredibly fast web apps

Incredibly fast web apps

Get your web app extremely fast by optimizing it outside of the app itself. If done right, it’s possible to reduce your loading times to less than 50 ms by using a CDN in front of your app, moving some kind of code into JavaScript, setting the right headers, and using localStorage.

I gave this talk at RubyConf Philippines (http://rubyconf.ph) and RUG-B (http://www.rug-b.de).

Video recording: https://www.youtube.com/watch?v=V7ul3yIhz4o&index=8&list=PL0mVjsUoElSHRZWXz3VPo0vRUm75hNP7j

Follow me on Twitter for updates about speed, Ruby, design, CSS and Sass as well as living style guides: https://twitter.com/hagenburger

28e1c6e895146e8217caf14eb56feb7b?s=128

Nico Hagenburger

April 07, 2016
Tweet

Transcript

  1. 3.
  2. 7.

    FRE E LA NC E DE V E LO P

    ER /D ES IG N ER Front-end developer designer Ruby lover
  3. 14.
  4. 15.
  5. 22.
  6. 29.

    Don’t just focus on cached assets ★ Cache everything (at

    least for a while) ★ Act like you have a static good old HTML page like it’s 1999
  7. 31.
  8. 33.

    Downsides −Do you know how to do it? −Do you

    want to maintain it? −Is it close to your customers?
  9. 35.

    CDN providers +They know what they do +They have several

    servers +They might deliver from many locations −They can get expensive −You might hit their limits easily
  10. 37.
  11. 38.
  12. 40.

    CDN locations ★ Just Europe and North America? ★ “The

    whole world”? ★ In or outside the Great Firewall? ★ Including the Philippines? ★ Akamai and MetaCDN seem to http://www.metacdn.com/cdn-coverage http://www.mb.com.ph/pldt-partners-with-akamai-for-content-delivery-network-solutions/
  13. 41.

    Cache synching ★ Do all servers world wide need to

    request the page from your server? ★ Or do they share their cache?
  14. 44.

    Purge requests ★ CloudFlare has strict API limits ★ Pages

    won’t get purged after you hit them ★ CloudFront charges per purge request ★ Can get pretty expensive ★ CloudFlare purges within 30 sec, 
 CloudFront might take 30 min
  15. 50.
  16. 54.
  17. 57.

    Log in/out ★ Just switch the CSS class ★ No

    need to reload the page free Bonus!
  18. 58.
  19. 59.

    Look at slow queries ★ Watch your logs ★ Use

    indexes ★ Cache calculated values (e.g.: a score) ★ Experiment with queries
  20. 62.

    Remote partials ★ Cache the main HTML page (e.g. an

    article) ★ Load dynamic content separately: ★ Recommended articles ★ Comments ★ Global elements ★ Page and partials can have different caching strategies
  21. 64.

    Don’t check for a session ★ Skip before actions etc.

    ★ Most cached pages do not rely on a session ★ Some uncached requests just don’t need it
  22. 65.

    Asset hashes ★ /assets/my-a24d3.css ★ Will remain in cached HTML

    pages ➤ Requires purging the whole cache ★ Possible solution: Use redirects ➤ /a/assets/my.css > /assets/my- a24d3.css
  23. 68.

    No Coffee-Script 
 in views ★ Do you really want

    to compile this with each request?
  24. 69.

    Avoid too many URLs ★ /photos vs. /photos/ ★ /photos

    vs. /photos?size=m ★ /photos vs. /photos?utm_campaign=…&… ★ /photos?size=m&page=2 vs.
 /photos?page=2&size=m
  25. 70.

    CSRF token ★ Don’t include in the HTML on cached

    pages ★ (I should test all this in Rails 5)
  26. 71.
  27. 72.

    Within Ruby* ★ Cache results/partials ★ Sometimes avoid blocks in

    HTML ★ Prefer ERB over Haml/Slim/… ★ Skip unused code * from a front-end coder’s perspective
  28. 73.

    Caching ★ Cache everything possible ★ Choose a CDN matching

    your requirements ★ Load dynamic parts via XHR ★ Be aware uncached requests remain slow ★ Set the right headers for the browser
  29. 74.

    JavaScript ★ Don’t use Coffee-Script in views ★ Use Vanilla.js

    if possible ★ Use it for session handling and displaying content ★ Be aware of Safari’s private mode!
  30. 80.

    nico@hagenburger.net email twitter blog first name last name Salamat &

    thank you! I’M NOT HIRING. BUT TALK TO ME IF YOU WANT TO WORK WITH ME ON SOMETHING.