Plugin SVG Support embeds extra CSS file into each page also those without SVGs

  • Nothing urgent, I just noticed a potential efficiency improvement.

    When it comes to web acceleration each HTTP request fewer is better!

    I noticed that as soon as one enables the plugin “SVG Support” then:

    1) Each page/post in its <head> contains an extra CSS file:

    <link rel='stylesheet' id='bodhi-svgs-attachment-css'  media='all'/>

    regardless whether it features an SVG or not.

    2) That CSS file is a single CSS attribute (4 lines)

    .attachment svg, .widget_media_image svg {
    max-width: 100%;
    height: auto
}

    I wonder: Is there some optimization potential?

    Ad 2) As of now that CSS is really short. Can this grow by user customization in the plugin? Or will this basically always stay rather small?

    Ad 1) Possible your plugin could make use of the WordPress theme.json Style Engine, which

    • a) enqueues styles inline (faster to pack that extra 80 bytes into each HTML file than that extra HTTP overhead for an external CSS file)
    • b) only enqueues block specific CSS if the page contains that block, otherwise leaves it out entirely. As the SVG plugin does not work by providing a custom block but rather is simply an image block using SVG as its file format, I do not know whether your plugin would have the necessary hooks for a conditional enqueuing. But an idea at least.

    But on the other hand, with proper cache busting, the CSS file gets loaded only at the first request, and then the locally cached version gets used. I’m not sure whether that’s real potential or not. Curious for your expert answer. Thanks!

  • The topic ‘Plugin SVG Support embeds extra CSS file into each page also those without SVGs’ is closed to new replies.