title: How do I make the 'Pace.js' progress bar load faster?
body: <p>I am using the pace.js (<a href="http://github.hubspot.com/pace/docs/welcome/" rel="nofollow">http://github.hubspot.com/pace/docs/welcome/</a>)  progress bar that loads as my page renders. You will see the progress bar here when you run it:</p>
  
  <p><a href="https://jsfiddle.net/Lance_Bitner/tkaf3r3k/" rel="nofollow">https://jsfiddle.net/Lance_Bitner/tkaf3r3k/</a></p>
  
  <pre><code>  for (u = {
    catchupTime: 100,
    initialRate: .03,
    minTime: 250,
    ghostTime: 100,
    maxProgressPerFrame: 20,
    easeFactor: 1.25,
    startOnPageLoad: !0,
    restartOnPushState: !0,
    restartOnRequestAfter: 500,
    target: "body",
    elements: {
      checkInterval: 100,
      selectors: ["body"]
    },
  </code></pre>
  
  <p>I have a good bit of CSS and JS files and I am trying to speed up the load time. I have reduced image size and put the scripts at the bottom of the page. I have also added some JS in the CSS link. I have minified the code as well. But my page needs to load faster. I want the progress bar to get to complete as fast as possible. </p>
  
  <p>I don’t need everything to load for the page to be operational. I just want it to look like it fully loads when the progress bar is completely loaded. I just need to make sure the parts load that need to be loaded to make the page functional. Some of the scripts can load after. I am sure there is some JS that can exclude a group of files. </p>
  
  <p>Any thoughts on how I can speed up the load time for the progress bar?</p>