GLSL Shader that displays a Rotating Rainbow Ring
Distance

In both your step(...) functions, you are computing distance(st, vec2(0.5)).  If you computed this once, and stored this in a local variable, you'd be able to reuse this computed value, which should save time in your shader.

But ... wait a second ...

vec2 toCenter = vec2(0.5)-st;
float radius = length(toCenter)*2.0;


You've already computed this distance (length, actually), and stored it (doubled) in the local variable radius.  We can use this value directly, by doubling your step thresholds:

float outsideMask = 1.0 - step(radius, 0.6);
float insideMask = 1.0 - step(0.4, radius);
float visibleArea = 1.0 - insideMask - outsideMask;


Or don't multiply the computed radius by 2.0 for the radius variable, and multiply it by 2 when you use it to compute the colour: 

float radius = length(toCenter);

float outsideMask = 1.0 - step(radius, 0.3);
float insideMask = 1.0 - step(0.2, radius);
float visibleArea = 1.0 - insideMask - outsideMask;

color = hsb2rgb(vec3((angle/TWO_PI)+0.5, radius*2.0, 1.0));


visibleArea


outsideMask = 1.0 - step(radius, 0.3)
insideMask = 1.0 - step(0.2, radius)
visibleArea = 1.0 - insideMask - outsideMask


Substituting insideMask into (3):


visibleArea = 1.0 - (1.0 - step(0.2, radius)) - outsideMask
visibleArea = 1.0 - 1.0 + step(0.2, radius) - outsideMask
visibleArea = step(0.2, radius) - outsideMask


From step(A,B) = 1 - step(B,A), we can reworking (1) as:


outsideMask = step(0.3, radius)


And substituting into (6):


visibleArea = step(0.2, radius) - step(0.3, radius)