HTML too heavy

This topic has 11 replies, 4 voices, and was last updated 6 years ago by Artem Temos.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
March 22, 2018 at 2:29 pm #48123

Giulio
Participant

Hi there, I’m writing you because our HTML became really heavy and we need to reduce its weight. What do you suggest to do it? Can you take a look to our home page please? We have a lot of raws in Global CSS for example.

March 22, 2018 at 4:52 pm #48156

Artem Temos
Keymaster

Hi,

If you don’t like the custom CSS in the source code, you can move it to the style.css file in the child theme. To optimize the HTML delivery we suggest you to use Gzip compression on your server and also try to set up some HTML minifier. This function can be enabled with W3 Total Cache plugin.

Regards

July 7, 2018 at 12:04 pm #66541

Giulio
Participant

I would to do it. But how can specify Global Custom CSS, Custom CSS for desktop, etc. in the same file?

July 7, 2018 at 5:44 pm #66553

Artem Temos
Keymaster

You can use CSS Media Queries for this purpose. Here is a tutorial that should help you https://www.w3schools.com/css/css_rwd_mediaqueries.asp

November 12, 2018 at 5:27 pm #89042

Giulio
Participant

Could I have an improvement about the performance if I would use the style.css with child theme instead of the Global CSS – about 250 rows?

November 12, 2018 at 8:15 pm #89076

Elise Noromit
Member

Hello,

Our theme is optimized and styles.css does not generate the load. Child Custom CSS would not work till child theme has been activated.

Best Regards

November 13, 2018 at 11:02 am #89189

Giulio
Participant

Dear Elise, it is clear that using the a style.css with the child theme, the Custom CSS would be not loaded. But I did not understand which method is more faster. Child theme with style.css customized or Custom CSS from theme options? I’m asking this because I have the feeling that our HTML is heavy by the Custom CSS on every pages.

November 13, 2018 at 12:19 pm #89209

Artem Temos
Keymaster

Hi Giulio,

Yes, it would be much better to keep all the CSS code in the child theme instead of the Custom CSS section in Theme Settings.

Regards

November 13, 2018 at 12:57 pm #89227
Giulio
Participant
Thanks a lot. It is exactly what I wanted to know. In the past I had already ask something like this, but someone from the support linked me to the CSS Media Queries. I tried to understand what I would need to specify for respect the sections (Global Custom CSS, Custom CSS for desktop, Custom CSS for tablet, Custom CSS for mobile landscape and Custom CSS for mobile), but I’m not a developer and I did not understand well that dimensions to specify. Could you tell me which are for each section of the Custom CSS? For example:
```
@media (max-width: 768px){
}
```
November 13, 2018 at 1:56 pm #89237
Bogdan Donovan
Keymaster
Custom CSS for desktop:
```
@media (min-width: 992px) {
	
}
```
Custom CSS for tablet:
```
@media (max-width: 991px) and (min-width: 768px) {

}
```
Custom CSS for mobile landscape:
```
@media (max-width: 767px) and (min-width: 481px) {

}
```
Custom CSS for mobile:
```
@media (max-width: 480px) {

}
```
Regards
November 15, 2018 at 10:00 am #89623

Giulio
Participant

It works perfectly, thank you.

November 15, 2018 at 1:01 pm #89667

Artem Temos
Keymaster

You are welcome.
Author

Posts