An Introduction to Variable Fonts (2019)
24ways.org
24ways.org
In short: rather than having a single font file for every weight, variable fonts take in a variable (ie. weight, width, optical size, etc) and can render the fonts glyph at a specific design space. This means instead of having three files for thin, normal and bold, you can have one slightly large file that can render thin, bold, and everything better.
The font file that displays a weight is using a "master". Often an extreme expression of a font (thin/bold) is based on a master. The in between weights (normal/medium) can be interpolated without an explicit master. So you can get now just Roboto 200, but also Roboto 220, 250, 300, 315.
When the variable font file has many masters, then it has the possibility to be bigger than having individual fonts. This is why its not so straight forward.
In the case that you have an italic font, for example, you might need a specific master for the italic and the normal size.
The cases where it is smaller to use a variable font is when you have multiple weights that can be interpolated from less masters in the font file, than you would need font files. For example, having 300, 400, 600 font weight used in a variable file could be smaller if the 300/400/600 weights are all interpolated from the 400 weight master. This way the fonts thin/bold masters could be removed from the font.
Google Fonts team does some really cool stuff around this, where they minimize the size of the file being sent down the wire based on your browsers capability.
TLDR: Variable fonts can be faster. When it is, it's a lot faster. But its not black and white, so there isn't a straight forward way to know.
Boo.