Method for fastest page speed

[accurence]

Hello! Love your wysiwyg, saves me a tone of time. I have a question for you guys.

Which of these methods of styling will provide me the best page speed and performance:

1. Append all styles in the Pro>Theme Options>CSS
2. Style each page individually in pro>content>{page}>css
3. Or use the element css attribute in pro>content.{page}>layout>{section}>customize>element CSS

Number 3 sounds appealing due to its templatability (I know, not a word). However wont I have a lot of overlapping styles on the final sheet that is generated by the theme.

Any thoughts?

[ruenel]

Hello Jason,

Thank you very much for the detailed post information.

Please be advised that having the custom css in those places has a purpose. One of those is the usability of your code.

1.) If your custom css code is reusable then it is a good idea to place the code in Pro>Theme Options>CSS section. One example could be:

.equal-column-heights{
  // some styling here
}

This block, when applied the custom class, will have the column heights equal. You can always reuse the code by applying the custom css to your row or section. This method will add code bloat because of the code being loaded in the page even if the code is not applicable or have not been applied within the page.

2.) For pro>content>{page}>css, this will only apply if your custom css code will only be applied or specific to that page. This is very helpful for fast loading the page since the code will be specific to the page and will not be adding as code bloat to your site.

3.) The inline element css works the same as #2 only less likely organized and more often difficult to manage. If you only have a few styling then this method is viable. If you have several elements to customize, then it is best that you add it in #2 instead. It is much easier when it is added in one place so that you can easily edit/adjust or troubleshoot when something goes wrong with your code.

Hope this helps.