Home Forums ACF PRO Blocks with inline styles Reply To: Blocks with inline styles

  • Blocks or not blocks, when it comes to performance the best way to add small style chunks is to add them inline using <style> tags. Style tags embedded in the page has been something browsers can do for quite some time.

    You cannot retroactively add inline styles to the header, unless you want the styles loaded on every page whether or not they are used. Adding styles that are not used is bad for performance.

    The same can be said for a separate style sheet file. It is better to not include many separate css files or to include a massive file with CSS that is not used.

    I’ve commented on this is the past. Like I said above, for performance reasons it is best to include styles inline only when they are needed. You will still find many stating that this is not the best practice, my opinion is that they are wrong. This also extends to using inline JS for small chunks of code.

    And yes, style attributes in elements is best when that style will only apply to that specific element on the page.

    For performance
    1) Include code only when needed
    2) Load as few external files as possible

    The HTML source might look like crap, but people aren’t looking that the HTML, they are only looking at the results.