Inline CSS & Google Fonts

  • I noticed that when you’re using a particularly button heavy page the CSS is all inlined which is fine but this generates quite a few issues from a performance perspective and while I could aggregate all the CSS into a file, there are over 20 buttons and the google font’s are loaded via @import.

    This raises a couple of performance issues with this primarily, the following.

    1. Because the google fonts are loaded via @import they can’t be aggregated whether it is via a plugin like Autoptimize, WPRocket, or Google WebFont Optimizer. So on a page where there are 9 different buttons, this can really begin to hinder performance as all the files are loaded with @import.

    2. Additionally, because the CSS is inlined it can’t be cached unless the users take all the CSS and load it into its own file.

    Suggestions.

    Would it be possible in the future for the CSS files that are selected for the buttons be enqueued like a normal font file would be, & if possible could the inline CSS be run through a compiler so it is aggregated into a single file.

Viewing 1 replies (of 1 total)
  • Plugin Author Bas Schuiling

    (@basszje)

    Hi,

    Thanks for the feedback, I appreciate it. There is already an item on the list to include more checks and reduce the font loading, if possible.

    – The free version shouldn’t have all this loading, since it doesn’t offer any google fonts

    – MaxButtons doesn’t put any styles inline by default, but cached, minimized and the bottom of the page ( already from the plugin) . So it’s already close to max. optimized.

    – Using > 9 fonts on a website and loading them via google is in any case problematic, because of the loading time indeed. I would recommmend using less of them.

    I like your seperate file suggestion though and will put that on the list to happen at some point.

Viewing 1 replies (of 1 total)
  • The topic ‘Inline CSS & Google Fonts’ is closed to new replies.