Critical Mishaps

critical-mishaps.md

Things not being picked up by my critical CSS task that I have to manually update.

• h1 - excusable, being used on another page
• h2 - media-queries? - would need to confirm this.
• .archive-list - maybe because only the top of the module is in-view, not the whole module?
• @font-face included - slows the site down
• pre - codeblocks on posts have long, unbreaking strings. This was causing first layout paint to be 1600px wide on mobile.

All the element selectors you list should be included in critical css if they appear above the "fold" for the page you're testing - whether they appear on other pages is not relevant. And it's the top left coordinates of the element that are tested so the whole element does not have to appear above the fold to be included.

Do you have a URL to both the page(s) and the full css that I can look at to see what's causing the problems?

As for the '@font-face' rule - currently they are included if used above fold on page, to prevent FOUC. I'm considering making that optional.

Thanks for sharing these issues, it hells me improve the tool!

Do you have a URL to both the page(s) and the full css that I can look at to see what's causing the problems?

Sure do:

• HTML http://daverupert.com/index.html
• Article template: http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/ (has <pre> tags below the fold)
• Alternate HTML http://daverupert.com/archive.html (Has h1 like article + .archive-list)
• CSS http://daverupert.com/stylesheets/style.css

So I've now looked at your site specifically, looking for these issues:

• h1 - Are you saying styles for this element where included in critical css for a page where the element wasn't used? I was not able to reproduce this issue, and it really shouldn't happen. Please tell me a specific url that you had that happening on if you can.
• h2 (media queries?) - What was the problem here?
• .archive-list - When I generate critical css for your archive page these relevant rules get included, as they should. Again, if you can manage to give me a reproducable test case I'll look further into this. :)
• pre (long unbreaking string issue) - This is interesting, I had not though about this. I always solve these kind of issues by setting overflow-x:hidden on the body, at least for smaller devices. I'm going to think a bit more on this and decide whether Penthouse should help with this or not..

Thanks again for taking your time helping me fix these issues and improve the tool!