Tweet
Tweet

Slide 1

Slide 1 text

Incredibly fast web apps WITHOUT TOUCHING RUBY (TOO MUCH) @hagenburger #rubyconfph

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

https://instagram.com/asaaki/ https://instagram.com/p/54xnvhp9Hy/ ORGA NI Z ER / DE SIG NE R

Slide 5

Slide 5 text

livingstyleguide.org @LSGorg OP E N -S OURCE DE VE LO PE R

Slide 6

Slide 6 text

ME NTOR https://instagram.com/langziehohr/ https://instagram.com/p/5198hBm7hS/

Slide 7

Slide 7 text

FRE E LA NC E DE V E LO P ER /D ES IG N ER Front-end developer designer Ruby lover

Slide 8

Slide 8 text

I heard Ruby is slow.

Slide 9

Slide 9 text

Might not be true.

Slide 10

Slide 10 text

Thank you for all the speed improvements in Ruby.

Slide 11

Slide 11 text

Thank you so much!

Slide 12

Slide 12 text

But let’s have a look on how to improve speed without touching Ruby.

Slide 13

Slide 13 text

Which part of our application 
 actually is slow?

Slide 14

Slide 14 text

Ruby?

Slide 15

Slide 15 text

Rails?

Slide 16

Slide 16 text

The database? 
 (rather your queries)

Slide 17

Slide 17 text

Your connection?

Slide 18

Slide 18 text

Your location?

Slide 19

Slide 19 text

The Great Firewall?

Slide 20

Slide 20 text

Blocking elements
 in HTML?

Slide 21

Slide 21 text

Flickering?

Slide 22

Slide 22 text

HTML

Slide 23

Slide 23 text

Just use ERB. Everything else is slower. (Except helpers written in pure Ruby maybe)

Slide 24

Slide 24 text

Put layout CSS into the HTML

Slide 25

Slide 25 text

… and load the CSS 
 step by step https://jakearchibald.com/2016/link-in-body/

Slide 26

Slide 26 text

Set image sizes
 Set CSS width/height

Slide 27

Slide 27 text

Faster delivery

Slide 28

Slide 28 text

Loading jQuery via Google? ★ Yes, it’s faster. ★ But in China:

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Rails page caching

Slide 31

Slide 31 text

Downsides ★ More than one server? ★ More than one domain? ★ Uses the same server

Slide 32

Slide 32 text

Use Varnish https://www.varnish-cache.org

Slide 33

Slide 33 text

Downsides −Do you know how to do it? −Do you want to maintain it? −Is it close to your customers?

Slide 34

Slide 34 text

Use a content delivery network 
 as a service

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

YOUR CLIENTS Be close to

Slide 37

Slide 37 text

The world

Slide 38

Slide 38 text

The world

Slide 39

Slide 39 text

Our requirements https://www.cloudflare.com/features-cdn/

Slide 40

Slide 40 text

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/

Slide 41

Slide 41 text

Cache synching ★ Do all servers world wide need to request the page from your server? ★ Or do they share their cache?

Slide 42

Slide 42 text

Purge requests

Slide 43

Slide 43 text

Purge requests ★ Clears the cache at the CDN for a specific URL

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

User sessions

Slide 46

Slide 46 text

CDNs don’t know about your user sessions.

Slide 47

Slide 47 text

Any page containing current_user is hard to cache

Slide 48

Slide 48 text

This is a lot of work.

Slide 49

Slide 49 text

Include both versions: – Logged in content – Logged out content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Don’t show things, hide the others.

Slide 52

Slide 52 text

The opposite of display: none might be: display: flex

Slide 53

Slide 53 text

User-related content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Complicated?

Slide 56

Slide 56 text

Speed FTW!

Slide 57

Slide 57 text

Log in/out ★ Just switch the CSS class ★ No need to reload the page free Bonus!

Slide 58

Slide 58 text

Database

Slide 59

Slide 59 text

Look at slow queries ★ Watch your logs ★ Use indexes ★ Cache calculated values (e.g.: a score) ★ Experiment with queries

Slide 60

Slide 60 text

Some (Rails) application tipps

Slide 61

Slide 61 text

Use remote partials

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Loading remote partials

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Helpers ★ Sometimes plain HTML is faster ★ Especially in blocks

Slide 67

Slide 67 text

Cache HTML ★ Rails has a cache helper. Use it.

Slide 68

Slide 68 text

No Coffee-Script 
 in views ★ Do you really want to compile this with each request?

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

CSRF token ★ Don’t include in the HTML on cached pages ★ (I should test all this in Rails 5)

Slide 71

Slide 71 text

Summary

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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!

Slide 75

Slide 75 text

Concepts ★ Build a MVP ★ Less features, more speed :) free Bonus!

Slide 76

Slide 76 text

That’s not 
 all you can do.

Slide 77

Slide 77 text

It’s just a good start.

Slide 78

Slide 78 text

Remember: Only speed up bottlenecks

Slide 79

Slide 79 text

As fast as Ruby 
 will get—not calling Ruby at all will always be faster.

Slide 80

Slide 80 text

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.