CSS and JS code that I’ve written is currently loaded sitewide.
However, styling for articles should not be loaded on the homepage,
likewise, JS functionality for the home and category pages is not needed on article (single) pages.
How to have certain CSS / JS code load only on some templates, but not others?
Hello,
This can only be done by setting that code in the respective templates, for example, a css only for articles can be set in a single post template in raw css and the js code can be set n raw html element – https://i.imgur.com/hCm6o9V.png and this can be done each cloud template in part, but the elements need to be set in the content element and not in the header or footer.
Thank you!
Thank Calin.
Just an idea, but maybe good for later:
It would be good if when we write code in the current on-page CSS Editor we can add some kind of structured contents that would tell the system later to drop the respective CSS/JS code into into separate files.
/* ## CSS Viewport: Horizontal – Load: Sitewide ## */
css code
/* ## CSS Viewport: Desktop – Load: Homepage, Categories, Tags ## */
other css code
/* ## CSS Viewport: Desktop – Load: Single ## */
other css code
It would allow us to keep code in one place, and would be super versatile.
Devices only load specific code meant for their viewports, so it would cut down on half or more of the CSS code.
A similar structure could then be used for inline generated code.
A later step could be to have a function go through the code of the page/template and build separate css files for each device, and/or type of page.
It would cut down on code, reduce the cost of data transfer both for publishers and for the audience and thereby improve PageSpeed scores a lot. I’ve noticed that typically 60-80% of CSS and JS code that is loaded isn’t really used on the page or on the specific viewport.
This would fix all of that and we could get Newspaper achieve 100 PageSpeed score on Mobile with the responsive design, without having to complicate matters mobile/AMP templates that lack functionality or brand-specific styling.
Let me know how I can be of help on this or beta.
