[Resolved] Where to put CSS for optimizing page loading times

[Daniel]

Hi, I know some tricks using some CSS.
And I know three places where tu put my CSS rules:
– style.css of my child theme.
– GP hooks, inside <style></style> tags
– SiteOrigin Custom CSS, which i use regularly.
But I noticed the rules are not loaded instantly, there is some delay that looks awful during page load. My customers complain aobut that.
I had achieved some improvement usin WP Fastest Cache, but!
I ask you if there is a better / recomended way to load CSS rules.
Which is the better way to customize avoiding so much rules overwrite during page load.
In this particular case I’m woking on the header, but the question extends over whole sites.
Thanks!

[Simon]

Hi,

To prevent ugly pages during loading, I put this in the Before Header hook:

<style>
#pz_loader-container {
  position: fixed;
  z-index: 99999;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  /* page background color while loading spinner is visible */
  background: #fff;
}
.pz_loader {
  position: absolute;
  top: calc(50% - 5em);
  left: calc(50% - 5em);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  /* size of loading spinner */
  border-radius: 50%;
  width: 10em;
  height: 10em;
  /* color of loading spinner */
  border: 0.8em solid #ccc;
  border-left-color: #000;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
<div id="pz_loader-container">
  <div class="pz_loader"></div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    var loaderContainer = $("#pz_loader-container");
    $(window).on("load", function() {
      loaderContainer.fadeOut();
    });
    loaderContainer.on("click", function() {
      loaderContainer.fadeOut();
    });
  });
</script>

Simon

[Leo]

Hi there,

Here are our recommendation for adding CSS: https://docs.generatepress.com/article/adding-css/

If you are already using a child theme then child theme should be the way to go.

[Author]

Posts