performance - responsive web design using @media rule and total size of a webpage -

@The purpose of the media rule is to implement various CSS settings when the viewport size changes

If I take an example of the responsive menu, where we decrease the viewport, then we replace a horizontal menu bar with the selection box, then I will have the selection box as well as the code for the horizontal menu. In order to change the viewport, I can hide any of these. Along with replacing images for small visual port In addition, all CSS clients for different visual ports will be loaded on the machine.

I think it will increase the overall size of a webpage.

Please tell me, if we can do some conditional loading, or if there is any other effective option.

The way I think, it is to put some conditions on the server side based on user-agent. But this will not work for HTML sites, and a lot of server-side code will be required.

If you can focus on the image size instead of the size of the HTML file, here are some ideas .

• Detects the screen size and automatically casts images of the appropriate size (based on the brake points you set) in a retrospective way on this site It can be implemented, it is very easy to see if this is a good solution for you. Creating divs with background images means that you can easily assign different background images to different viewports, so it will be more efficient than loading a full-size image that you scale down to mobile.

• has just started something similar to adaptive images, the device is serving the appropriate images

  Hope that one of these approaches can work well for you, good luck!