• Home
  • WordPress
  • web Hosting
    • Free hosting
    • Cheap Hosting
    • comparison cloud , vps, shared, wordpress
    • managed wordpress hosting
    • managed cloud hosting
  • page Speed
  • Deals
  • Services
  • About

RAaz Kumar .com

wordpress tutorials seo hosting etc


Optimize css delivery inline critical css, remove unused css, render blocking css

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’ );
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
get_stylesheet_directory()
get_template_directory_uri()
wordpress php functions.
also read Reduce tffb in WordPress by Page cache,
w3tc vs wp rocket, speed up wordpress
Cloudflare tutorials & ttfb
best hosting for performance

Related topics:

  1. Reduce the impact of third-party code ,optimize JS delivery, Minify, remove unused js, pre connect, inline, lazy load etc
  2. Wp rocket setup guide review & comparison to w3 total cache w3tc
  3. How to add adsense amp ads to wordpress
  4. WordPress database optimization (don’t neglect) plugins & phpmyadmin manually
  5. all in one seo pack vs yoast seo pressor

wordpress tutorials for beginners advanced complete guide to run WordPress

  • Rules to get 100/100 in Google pagespeed web core vitalsscore
  • How to add adsense amp ads to wordpress
  • wordpress password reset in 3 ways mail, phpmyadmin, mysql command
  • how i recovered hacked website site 5 times ft wordpress?
  • enable browser caching in wordpress apache nginx caching headers explained
  • W3TC w3 total cache plugin setup guide review comparison with wp rocket and wp super cache
  • Wordpress database optimization (don't neglect) plugins & phpmyadmin manually
  • Optimize css delivery inline critical css, remove unused css, render blocking css
  • Converting WordPress into static website speed after 1 second dynamic 3 seconds
  • Wordpress errors and fix
  • website cache best caching plugins wordpress w3tc cloudflare
  • Install xamp & wordpress on localhost windows
  • favicon ico Change / Add / Disable favicon in wordpress Ft Genesis Theme or any theme
  • increase wordpress memory limit (how to ) 40MB , 64 MB 128 MB or 512 MB maybe 1024MB
  • wp cron job check working or not disable enable change schedule
  • google analytics plugins for wordpress #sitekit #monsterinsights gadwp back as gainwp
  • Lazy Load Adsense to improve core web vitals - Vs revenue
  • xmlrpc php wordpress uses, disable without 403 error log message
  • wordpress change post date programmatically (auto on update like blogger
  • wordpress plugins that slow down your site and its alternatives
  • best wordpress plugins social, seo, Backup, speed up your blog
  • TOP 10 Wordpress Themes Premium/ Free & providers
  • Wordpress Adsense Plugins & Manually
  • Social share buttons for website Wordpress Blogger
  • How to bulk delete in wordpress posts, pages, Media Images, tags and categories
  • TOP 5 Best wordpress comment plugins 2020 (disable pingback, replytocom, customize form)
  • all in one seo pack vs yoast seo pressor
  • Auto post to Facebook, twitter, Google Plus Wordpress Posts 2019
  • wordpress speed optimization Speed up wordpress Score on Google pagespeed
  • How to use wordpress tags and categories
  • Wordpress duplicate thin content Issues {FIXED}
  • how to increase wordpress memory & file upload size
  • combine rss feeds wordpress
  • Reduce the impact of third-party code ,optimize JS delivery, Minify, remove unused js, pre connect, inline, lazy load etc
  • change wordpress site url
  • install wordpress on ubuntu apache nginx debian command line
  • Wordpress Security Plugins 2021 (Brute force, Login lockdown, Malware scanner etc)

 

 

wordpress Pagespeed optimization

Digitalocean free $100 Credit

Cloudways Review pricing promo codes

Siteground cpu limits Pricing

Shared Hosting

Managed wordpress Hosting

Managed Hosting Cloud server

VPS Hosting

Cloud Hosting – Unmanaged

Google cloud Pricing

Aws Pricing

Azure pricing

nginx server tutorials

apache server tutorials

linux sysadmin tutorials

mysql Commands list pdf

LEMP Install Ubuntu

Mysql Performance Tuning

Nginx Performance tuning

Linux Performance tuning

Php -fpm performance tuning

Redis Performance tuning

linux server security

nginx security best practices

wordpress security plugins

 

 

wordpress

 

Top 5  WP Google Analytics Plugins

WP Backup Plugins

Wp Comment Plugins

Top wordpress Security Plugins

WP Seo Plugins

WP Caching Plugins

Best Adsense Plugins for WordPress

Wp social Sharing Plugins

autoshare social media plugins

WP speed Optimization Plugins

Speedup WordPress google Score

More Wp tuts

Server Admin Cloud

 

Installing Nginx LEMP On ubuntu

Installing apache Lamp ubuntu

nginx fastcgi cache enable

php – fpm install  & Configuration

Opcache install & Configure

php -fpm pool manager explained

Mysql Install & Configuration

Redis Object cache install & configure

 

Nginx as Reverse Proxy and Load balancer

Load Balance / auto scaling in google cloud

Linux Commands PDF

Mysql Commands Pdf

Letsencrypt tutorial

mysqldump export & import 

Pagespeed Module install & configure

nginx.conf best file

mysql.conf best file

upgrade ubuntu

© 2023 - All Rights Reserved Disclaimer & Privacy Policy