characters
Analyzing the page...
characters
characters
The critical path is the path to render a web page - what is needed before that can happen. CSS stylesheets block rendering until the browser has requested, received, downloaded and parsed your stylesheets, the page will remain blank until all of this has occurred. By reducing the amount of CSS the browser has to decipher to load the page, and by inlining it on the page (removing the HTTP request), you can get the web page to render much, much faster.
The Critical Path CSS Generator tool extracts only the CSS needed for the above-the-fold content for the page you specify. You should minify the generated CSS, then inline it on your page (wrapped in <style> tags). It should be placed in the HEAD section of your HTML - to replace the full CSS link(s). The remaining CSS stylesheet should be moved to the bottom of your page, just before the closing body tag.
(Note: you do not have to remove
anything from your existing CSS file - simply move it to the bottom of your
page). Be sure to only move down the remaining full CSS to the bottom of the page for pages where you have actually inlined critical path CSS.
Change any relative paths (ie; background-image: url("../images/x.gif");) to absolute background-image: url("http://mysite.com/images/x.gif");, and then try again.
The most common problem is with clearing floats. Instead of clearing elements appearing after floated elements (f.e. using clear:both;), clear the floats themselves by using the clear-fix pattern. Float clearing will now work also in the generated critical css.
If you for some reason have an element appearing early in the DOM, but that you apply styles to move outside of the above the fold content (using absolute position or transforms), consider whether it really should appear so early in the DOM.
Problems with special characters like → after converting? Make sure you use the correct hexadecimal format in your CSS. You can always get this format from your browser console, by entering '→'.charCodeAt(0).toString(16) (answer for this arrow glyph is 2192). When using hexadecimal format in CSS it needs to be prepended with a backslash, like so: \2192 (f.e. content: '\2192';)
I'm always trying to make this tool better. Please report your issue on GitHub, or contact me directly, and I will try to fix it as soon as possible.