Currently, I am working on optimizing my website at .
In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse.
However, I encountered a problem with one of the subpages on my site not loading properly when critical CSS was applied. Surprisingly, when I reverted back to inline CSS or did not optimize the CSS at all, the sub-page loaded correctly.
The problematic sub-page is located at and contains several boxes that are resized using a JavaScript function triggered on.ready and on.resize (screen resizing) events to ensure uniform box sizes across the page.
Under critical CSS implementation, the resize function only works on.resize but not on.ready. Conversely, when using inline CSS, the resizing function behaves as expected on both .resize and .ready...
I'm seeking assistance in identifying the root cause of this issue. Despite attempting to directly inline styles for the boxes into the HTML, I have been unable to resolve it...
To observe the problem firsthand, visit and pay attention to the behavior of the boxes. As you resize the browser, the boxes should adjust their height automatically to match each other... This automatic adjustment should ideally occur upon page load...
Javascript Function Example: (Not crucial to the question, but provides context)
jQuery(document).ready(function($){
$(window).resize(function() {
resizeCourseBoxes()
resizeTopBespokeCoursesBoxes()
resizeMidBespokeCoursesBoxes()
}).resize(); // Trigger resize handlers.
});
// Ensuring uniform height for all course boxes (ensures row consistency...)
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'
};
})
}
// Uniformizing mid section (prices) for bespoke courses segment
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'
};
})
}
// Uniformizing mid section (prices) for bespoke courses segment
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'
};
})
}