[Resolved] Remove css from html

Home Forums Support [Resolved] Remove css from html

Home Forums Support Remove css from html

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #39170
    Oleg

    Hi guys!
    Sorry for my english – I write with translate.google.

    Recently installed your template. Thank you so much. The template is really very cool!

    Tell me, how can I remove the styles from the html-code?
    I mean that custom styles, that you can find inside <head> … </head>

    I use a template with Super Package.

    Thanks in advance for your reply!

    #39171
    Tom
    Lead Developer
    Lead Developer

    Hi Oleg,

    These styles are necessary, and won’t impact performance.

    I’m looking into ways to package these styles into a file – the problem is when I do that, the Customizer doesn’t update stuff right away, meaning you have to save to show the changes (which defeats the purpose of the Customizer).

    For right now, they have to stay – but I’m working on it πŸ™‚

    Glad you’re enjoying the theme!

    #39209
    Oleg

    Hi Tom!

    Thank you for your answer!

    I understand that now styles need to configure the template, but it may be possible to remove them now?

    Russian search system is very sensitive to the presence of styles in the html code.

    I front-end and will be able to customize the appearance of the theme without customizer, but do not understand php: /

    I tried to edit $ visual_css = array (…), but nothing happened πŸ™

    Perhaps this information will be useful to other users template!

    #39212
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Having CSS in the HTML is very bad for performance and CSS, but loading it directly in the <head></head> of the website actually increases performance, and isn’t seen as bad by search engines (globally).

    Here’s a great article on it: https://medium.com/@schizdazzle/whats-with-putting-the-css-in-the-head-24888fbbd2e2

    Google also has an article on it: https://developers.google.com/speed/pagespeed/module/filter-css-to-head

    I think you may be mistaking it with inline CSS inside the <body>, which is bad and should be avoided.

    Of course, it’s not impossible to remove the CSS from the <head> – but it will make the Customizer useless, as none of your changes will be output into the browser.

    Let me know – if you really want to remove it, I can provide some functions which should do so.

    Thanks!

    #39248
    Oleg

    Tom,

    It’s will be great, if you do it for me.

    Recently, our main search engine make “nice” changes, and one of them is about styles.

    Thanks a lot for your support!

    #39397
    Tom
    Lead Developer
    Lead Developer

    Looked into this, and there’s no function for removing it as I was hoping.

    What you can do is look inside the plugin files, and find a line that starts with this:

    wp_add_inline_style( 'generate-style', ... );

    Then, comment it out by adding two slashes in front of it:

    //wp_add_inline_style( 'generate-style', ... );

    Doing it like this means you won’t be able to update the addons without having to repeat this process.

    Again – for anyone reading this, this will do more harm than good, and is only for people who want to strip important CSS code and replace it with their own. I don’t suggest doing this at all, especially seeing as search engines actually prefer CSS in the <head> as opposed to external files, as it’s better for performance.

    Good luck!

    #197495
    rudolf

    Actually Tom, it does harm because the relation between text and code is severely influenced by the big amount of styles in the header and since WordPress has already a lot of overhead stuff, this makes it worse.
    As such, it is bad for SEO. It would be OK if you add a couple of styles, but your template generates 6,900 characters for styling in the header alone.

    #197496
    Tom
    Lead Developer
    Lead Developer

    Any articles/sources for that? I’d be very interested in reading.

    It’s my understanding that search engines only care about content.

    If the code was in the body then I would agree, but it’s not.

    There’s little difference between including the style in the head vs linking to an external file.

    Here’s a good topic on it: http://stackoverflow.com/questions/2240481/does-inline-css-and-javascript-really-affect-site-seo

    When people refer to “inline CSS”, they mean something like this: <p style="background-color-red;color:white;">My paragraph</p>

    Too much of that is bad.

    I should note that the current method is the go-to for WordPress developers where the user writes the CSS with their options.

    There are a couple options for writing this CSS to files, but they hurt performance.

    I’m always looking for the best of both worlds – CSS in an external file that doesn’t hurt performance.

    For anyone who wants this CSS in an external file, I suggest using this plugin: https://en-ca.wordpress.org/plugins/autoptimize/

    • This reply was modified 8 years, 6 months ago by Tom.
    • This reply was modified 8 years, 6 months ago by Tom.
    #197988
    rudolf

    Thanks for the response Tom, but according to W3C:
    “An internal style sheet may be used if one single page has a unique style.
    Internal styles are defined within the <style> element, inside the <head> section of an HTML page:…”

    This isn’t the case here. The same styles are repeated in the header over and over again, which is against the very idea of css.
    But I understand that if you want options in the admin, that you have to resort to this sort of solutions.

    Keep up the good work πŸ™‚
    Cheers!

    #198024
    Tom
    Lead Developer
    Lead Developer

    Thanks for the info! It doesn’t look like it will hurt anything, but it’s definitely something I’d like to get sorted out.

    Once I find a solution that won’t hurt performance I’ll definitely do it πŸ™‚

    #198204
    rudolf

    Thanks, Tom. What I thought was: have the options in there, the user sets them and when happy with the result, goes to the frontend, select the internal css in the source code, glues it at the end of the style sheet, then, there would be a checkbox in the options to disable internal styling.
    In the funvctions.php, you check for the variable of that checkbox and enable or disable wp_add_inline_style( ‘generate-style’, … ); accordingly.

    Cheers!

    #198286
    Tom
    Lead Developer
    Lead Developer

    That’s one way, but most people probably won’t do it.

    I’m working on a “feature plugin” that will try to do that for you automatically. I’ll release it as a plugin, and once we get enough people using it successfully, I’ll add it to core πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.