DEV Community

Kaziu
Kaziu

Posted on

🏋 "RAIL", Important way of thinking about frontend performance

😎 Don't guess, measure !

❌ This is the reason why this website is slow !! I know it!
✅ Well... I'm gonna just measure, drinking coffee

But after measuring performance, maybe you would think like that

😑 Hey, I measured... but I don't have goal! 1second? 2second? What is criterion??

😎 Ok I give you basic performance criterion, tadaaam RAIL
😑 Ruby on rails?
😎 No, there is no relationship with it at all, RAIL is based "Response, Animation, Idle, Load"

Content criterion time
Response 100ms
Animation 16ms
Idle 50ms
Load 1000ms

⭐ Response

some action should response less than 100ms, after user inputs something

Click! ----- less than 100ms -----> open modal
Enter fullscreen mode Exit fullscreen mode

⭐ Animation

Animation(video) is just collection of a lot of images actually. So it's important to know how many images there is in "A second"
Referenece video

content number of images in a second
TV 30
Movie 24
Game 60
PC 60

Now Let's do super easy math

1s - 60images
↓
16ms - 1image
Enter fullscreen mode Exit fullscreen mode

This is the reason why animation should finish less than 16ms

By the way this unit of How many images there is in a second is called FPS(Frames per seconds), so animation on PC is 60fps

▼ for example, configuration of chartjs-plugin-streaming, there is "frameRate"
chat.js

⭐ Idle

After loading contents, looks like browser doesn't do anything, but still do something like getting data from API by XHR or lazy load images. These actions should be less than 50ms

😀 click Url!
↓
😀 finish rendering and we see something on browser!
😭 wait, Im browser, I need to load images that I didn't on purpose at first
↓
↓ (50ms)
↓
😭 Ok I've done it! I don't use main thread finally!
😀 ohh I can handle now on browser now!!
Enter fullscreen mode Exit fullscreen mode

⭐ Load

loading time of webpage contents

I wanna see dev.io! click url!
↓
↓ (1 second)
↓
I see dev.io contents on browser and handle something as well!
Enter fullscreen mode Exit fullscreen mode

actually it's not necessary to load all contents at first.
Important thing is that loading contents in which user see on browser.

first view


→ Next article "then how to measure them??"

Discussion (2)

Collapse
svgatorapp profile image
SVGator

Really enjoyed reading this series!

Collapse
kaziusan profile image
Kaziu Author

Thank you very much :)
Actually I will be engaged in real project "Improve Page Speed Insights score and whole frontend", so I hope I will share about it someday 😎