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 same CSS between the pages, so you no 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, ['/giai-phap-goi-tu-dong-senautocall/','/lien-he/'])) {
return WP_CONTENT_DIR.'/uploads/critical-css/page-page.css';
}
return $file;
}, 10, 2);
To edit 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 = str_replace('.is-small,.is-small.button,.nav>li>a{}', '', $css);
}
return $css;
}, 10, 2);
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 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 bellow code:add_filter('hpp_lazycss', function($css) {
// $css = str_replace('find', 'replace', $css);
return $css;
});
Last modified 2yr ago