And again the inclusion of CSS. How to include css on an online store (12000 lines) by separating the logic correctly?

D

DoubleWish2017-09-20 22:04:16

css

DoubleWish, 2017-09-20 22:04:16

Hello.
Once again I will ask a popular question, to which there is no clear answer. Tell me how best to organize the file structure of connecting styles on the site and so that pagespeed does not swear, and so that everything does not violate the logic.
There is a css file with all styles (inside 404, lx, general styles, site front and checkout procedure)
It weighs 220kB
On the main page, in fact, only 70kB of all this is needed
On the page with all the services, another 30kB and there it turns out about 80kB
But how to properly divide, to cache this whole thing, if, to optimize loading, we first load the first part of the css (so that everything that gets on the first screen is displayed), and then the other below. And what about unique blocks that can only be placed on a separate page?

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

N

nepster-web, 2017-09-20
@nepster-web

Premature optimization is not very good.
Usually every byte is chased at high loads.
Most likely in your case there is no hard highload, just enable gzip compression on the server and compress the css itself if it is not compressed and this will last for a long time.
If you really want to get confused:
- Switch to the http2 protocol
- Break this file into many small semantic files, such as (grid.css, account.css, button.css ...)
- Include 10 small files instead of one, only those that page requires (http2 async solves)
- Enable cache, gzip and compress the file.

S

Sergey Goryachev, 2017-09-20
@webirus

And I would collect into one file, compress, optimize and cache everything.
220 kb is not so much in fact, especially since it will only load 1 time.
Well, except for the part that is required for PageSpeed.

A

Andrey Fedoseev, 2017-09-20
@itlen

If you really want to, then split it: grid, buttons, typography and adapting into one file in the head, face, card, listings, info. pages to other files before the closing /body, it is possible to preload them in the same head. Well, the cache, http / 2 (variably), minify ... masthead dude.
Yes, and edits will not be so hard to make.