Converting website to CSS Grid. I have 3 media queries for 3 screen sizes. I want to optimize my code for speed.
Does the placement of all of the queries higher or lower affect the timing of the first paint?
Does the order of the media queries affect the timing of what the mobile user sees?
I use inline critical path tool to inline the critical path css in the header so that the page can paint before everything is loaded. All media queries show up in this critical path css. So I think this means that the first paint will be the first paint for the appropriate screen size. This tells me order doesn't matter with regard to speed.
My code displays fine regardless of the order. So not worried about that sort of issue.
Generally, there is little need to worry about the order of media queries so long as a) each of them uses "min" and "max" values for the screen size, and b) There is no overlap between the ranges. Since I cannot see your queries, I don't know what shape they are in, but as long as they conform to the standards listed above, the order shouldn't make a difference.