When Using Critical CSS, Jquery function does is not running on load

Question

I'm trying to optimise my website ( http://www.mazion.co.uk ).

As such, I tried to create critical CSS for the site using penthouse . (See Critical CSS used here - this was generated by the main developer of penthouse for me).

However, when using critical CSS, one of the subpages on my website does not load properly. BUT, when I fully inline the CSS (or don't do anything to optimise CSS), this sub-page loads correctly.

On this sub-page - http://www.mazion.co.uk/courses , there are a number of boxes that are resized using a JS function (see below) that is run on.ready and on.resize (ie when resizing the screen) which ensures that all boxes are of the same size.

When using critical CSS, the resizing function works on.resize but not on.ready. On the other hand, with inline CSS, the resizing function works as expected on.resize and on on.ready...

Thus, I was wondering if someone could help me in identifying the problem. I have tried to inline the styles for the boxes directly into the HTML, but I was unsuccessful...

You can see this problem by going to http://www.mazion.co.uk/courses/ and having a look at the boxes. If you then resize your browser, all the boxes will resize themselves so that they are all the same height... This resizing that make all the boxes the same height should actually happen automatically when the page loads....

Js Function (Not Extremely important to question, but helps in setting the scene)

jQuery(document).ready(function($){

  $(window).resize(function() {
    resizeCourseBoxes()
    resizeTopBespokeCoursesBoxes()
    resizeMidBespokeCoursesBoxes()
  }).resize(); // Trigger resize handlers.
});

// Ensure that all the courses boxes are the same height (this ensures that the rows are of the same size...)
function resizeCourseBoxes() {
  jQuery(function($) {
    courseHeader = $('.course_header')
    maxTextHeight = Math.max.apply(
    Math, courseHeader.map(function() {
      return $(this).height()
    }).get())

    for (var i = 0; i < courseHeader.length; i++) {
      currentHeight = courseHeader[i].offsetHeight
      new_padding = Number(maxTextHeight) - currentHeight + 10
      courseHeader[i].style.marginBottom = new_padding + 'px'
    };
  })
}

// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeTopBespokeCoursesBoxes() {
  jQuery(function($) {

    CoursePriceSection = $('.green_bx_top')
    maxTextHeight = Math.max.apply(
    Math, CoursePriceSection.map(function() {
      return $(this).height()
    }).get())

    for (var i = 0; i < CoursePriceSection.length; i++) {
      currentHeight = CoursePriceSection[i].offsetHeight
      new_padding = Number(maxTextHeight) - currentHeight + 10
      CoursePriceSection[i].style.marginBottom = new_padding + 'px'
    };
  })
}

// Ensure that all mid section (prices section) of the bespoke section is the same
function resizeMidBespokeCoursesBoxes() {
  jQuery(function($) {

    CoursePriceSection = $('.green_bx_mid')
    maxTextHeight = Math.max.apply(
    Math, CoursePriceSection.map(function() {
      return $(this).height()
    }).get())

    for (var i = 0; i < CoursePriceSection.length; i++) {
      currentHeight = CoursePriceSection[i].offsetHeight
      new_padding = Number(maxTextHeight) - currentHeight
      CoursePriceSection[i].style.marginBottom = new_padding + 'px'
    };
  })
}

Answer 1

The answer to my problem was simple:

Critical CSS is specific for each HTML page. Thus critical CSS for each individual page should be calculated separately...

(I was using the same critical CSS for all my subpages...).