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

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

Home Forums Support Where to put CSS for optimizing page loading times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #464058
    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!

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #464121
    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

    #464178
    Leo
    Staff
    Customer Support

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.