how to optimise css delivery?
Web developers has to write 2 css files.
1 for above fold also called as critical css.
it should be inline after to avoid extra TCP connection & render delay.
critical css should be placed header of html file.
ideal size 5-10KB.
below fold CSS 4x than critical css 20-40KB. placed in body load as defer including js.
Note: there is also js has to place in header for navigation menu if coders not do in css.
critical css generator +autoptimize /wp rocket in WordPress?
wp rocket automatically generated &add critical css with built-in their premium external tool.
autoptimize allows to place critical css.
but you have generate extremely using critical css generator web tool.
and place then. your page loads faster with any TCP/ttfb for extra request.
js accounts for 50% of your webpage, css only 5% ,
so remove unused js, & placed in footer or body tag.
by defer js plugins, cloudflare rocket loader, w3tc, rocket etc.
remove unused css?
You can do manually , which css selectors not using remove them manually by backing up old.
or use webtool.
poorifycss.online
Enter your URL
It shows used css & unused css,
my case 60% used , 40% unused.
so I copied, used css. (minified version)
backed-up my site.css
created new file with same name placed the new code.
nothing broken. css won’t broke cauz it gives only fancy look.
But: not removed critical css 9kb out of 20KB .
that’s another step requires manual attention.
so what are the critical css elements.
body color,font, etc.
Remove tender blocking css?
What it means. the css file contains other than critical css (required for rendering).
by simply separating css into two parts can fix the problem.
inlining large css not recommended.
some plugins offer inline all css. ft speed booster pack.
Manual vs tools for minifying optimizing css delivery?
if you do manually,
It’s clean code, no need to placed dynamically reading rules by php for every request /visit.
not causes some CPU delay TTFB /response time.
any way caching helps by caching pages sometimes.
optimize font delivery ft google font?
before choosing google font or changing newone.
check font size & response time in Google fonts page.
fonts also render blocking requires to see legible fonts.
problem: if you place in Google font in body.
then it gives spout error (splash on screen).
first uses system fonts then loads google fonts
need a little js to fix.
or completely removing google fonts for using system fonts.
minified css normal css?
minification done by removing spaces, comments.
maximum reduces 10-20%% of size of original.
47kb normal, 42kb minified, compression also done by Gzip or brotil at server level.
Gzip /br compression levels also important pagesize vs cpu time.
inline critical css or http2 server push?
Its not really about to download all files, its about how long it takes to download this files.
Optimizing CSS Delivery in wordpress?
Loading scripts & styles in footer WordPress?
after inlining critical css, you can load css in footer.
Plugins:
w3tc, autoptimize, load css/js footer plugins.
register scripts
enqueue script/style functions.
add to functions.php or create custom plugin.
wp_enqueue_style(): by default it places in head.
So here is a way to to this: You can use print_late_styles() function which is called in footer. You just need to enqueue your styles when header is already passed.
So you need to find some hook which is called on each page and after wp_head hook. For example get_footer could be one.
function prefix_add_footer_styles() {
wp_enqueue_style( ‘your-style-id‘, get_template_directory_uri() . ‘/stylesheets/somestyle.css‘ );};
add_action( ‘get_footer’, ‘prefix_add_footer_styles‘ );
/stylesheets/somestyle.css to Change to your css file path
your-style-id =
load css in footer
//add_action( ‘get_footer’, ‘bg_show_hide_enqueue_styles’ );
//add_action( ‘get_footer’, ‘bg_show_hide_enqueue_styles’ );
Enqueueing the CSS Files
After registering wp_register_style()s f we need to “enqueue” it to make it ready to load in our theme’s <head>section.
unloading wp_deregister_style().
We do this with the wp_enqueue_style() function:
<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>
wp_enqueue_style
wp_dequeue_style
add_action
remove_action
add_action
remove_action
get_stylesheet_directory()
get_template_directory_uri()
wordpress php functions.
also read Reduce tffb in WordPress by Page cache,