CSS

Critical CSS

Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible. Above-the-fold is all the content a viewer sees on page load, before scrolling.

Every kind of pages (ex: home, category, single..) has different CSS. You can find it's name by view the page source:

The critical CSS files are located in directory wp-content/uploads/critical-css

This hook helps you to insert stuffs before critical CSS or determine whether there are critical css or not.

//do exist or not exist,
add_action('print_critical_css', function($css) {
//when no exist critical: fix css before generate critical css
if(!$css) {
echo '<style>.gem-icon .gem-icon-half-1,body:not(.compose-mode) .gem-icon .gem-icon-half-2{opacity:0!important;}</style>';
}
//font , used with `font-display:optional`
foreach(hpp_criticalcss_extract_fonts($css) as $i=>$font_url) {
if($i<5 ) printf('<link rel="preload" as="font" href="%s" crossorigin>', $font_url);
}
});

You can share the same CSS between the pages, so you don't need to generate duplicate CSS for those pages.

//use same critical file
add_filter('get_criticalcss_path', function($file, $uri){
if(hpp_in_str($uri, ['/about-us/','/contact/'])) {
return WP_CONTENT_DIR.'/uploads/critical-css/page-page.css';
}
return $file;
}, 10, 2);

To edit the content of critical CSS, you have 2 ways: by editing CSS file directly OR via hook:

add_filter('hpp_critical_css', function($css, $file){
if(strpos($file, '.mobile.css')===false) {
$css .= '.example-class{height: 100px;}';
}
return $css;
}, 10, 2);

Lazy CSS

Some Inline CSS on the page can load resources such as background image, font-face. So we will extract the CSS code that contains resources & group all of them in a separate tag named <style media="not all" . This technical called lazy CSS, help to reduce the page load time. Now, You can modify this lazy CSS by using the code like this:

add_filter('hpp_lazycss', function($css) {
// $css = str_replace('find', 'replace', $css);
return $css;
});