This tutorial explains how to remove unused CSS and Js files from WordPress website using Asset cleanup plugin. This will improve google page speed scores and solve the error provided by google page speed insight tool to remove unused CSS and js.
Please take backup before performing any major changes on your website and using ASSET CLEANUP | Remove Unused CSS \u0026 JS (Improve website speed) tutorial.
Step 1) Install plugin ‘Asset Cleanup Page speed booster’. Click on install now and once installed click activate.
Step 2) Now edit the page from where you want to remove unused js and CSS files. For example Edit Home page of your website.
Step 3) Scroll the page you’ll find this option asset cleanup section here and here you can see all the JavaScript and css files which are loading on the page will be displayed
Step 4) Now if you scroll the page you will see individual js and CSS files. This will take some logic now to identify which CSS and js are not used. but it is simple I promise. Identify the unused CSS and js as explained in the video. Example, a CSS file named social-profile.css Now as the name says it is used to add CSS for social profiles on my home page, but I am not using any social profile on my home page so this CSS is not being used on my home page, I can safely unlod this file using the ‘Unload on this page option’;
Step 5) Remove unused CSS files sitewide but keep on specific pages. First Unload Site wide ‘everywhere’ for all contact for 7 CSS and js file Second Make an exception from any unload rule \u0026 always load it
Using options with your main Optimization plugin : So you need to uncheck the js and CSS optimization options from the main plugin for speed optimization, because if you will keep both plugins to optimize same things like JS and CSS then it will be a more complex operation and it can even break your web.site.
🚩All this content takes a lot of time to create so don’t forget to LIKE the video \u0026 SUBSCRIBE the channel to SUPPORT me ♡ ♥💕❤
Must Watch Videos ======================== • How to Connect Domain with Hosting (E… • Optimize WordPress Speed with WP Supe… • Transfer Emails from one host to anot… • How is this tool Free?? 😯 ManageWP 🔑 • Use SITEGROUND OPTIMIZER to Increase …
If the video was USEFUL then don’t forget to SUBSCRIBE, this really boosts the morale and helps the small channel grow. You can use this FANCY LINK below to subscribe 😊 😊 https://bit.ly/DontclickWINK 😊
Content
0.06 -> let me show you using asset cleaner plugin
how you can remove your unused CSS files
5.4 -> and unused JavaScript files which will make your
Google page speed scores higher. As you can see
10.14 -> this is my website and it's performing really
very bad. You can see I have opportunities to
14.7 -> eliminate rendered blocking resources which are
CSS files and JavaScript files and then we have
19.74 -> some a unused CSS files which are not being used
on the website but they are still loading this
23.64 -> is making site slower .then we have some a unused
JavaScript which is loading on the website which
27.54 -> we are not even using on the website so this will
be very easy tutorial using asset cleanup plugin
32.58 -> to remove those unused CSS and JavaScript files.
I'm going to make another video which will be full
36.84 -> in-depth video how to remove CSS files completely
from your website. So if you're new then here
42.3 -> don't forget to like the video and subscribe to
the channel so you'll be notified when I publish
45.84 -> that video or if you're watching this video in
future just check the description of this video
49.74 -> I might have published that video already. so
login to Wordpress dashboard and then from left
54.54 -> sidebar hover plugins and then click add new
and now search here asset cleanup and this first
60.9 -> plugin we are going to use ASSET CLEANUP page
Speed Booster. click on install now once it is
65.82 -> installed click activate. so plugin is installed
you can find this plugin under settings and the
70.26 -> last option asset cleanup so the general options
here about this plugin we are not going to cover
74.76 -> this options because we are doing a very specific
thing what we are doing let me show you and this
79.86 -> way will be easier for you to understand how to
use this plugin how to remove a uused JavaScript
83.88 -> and unused CSS files. so what I will do I will
open my website home page and then on the top
88.68 -> here I'll click on edit page. no matter if you
are using elementor or any other page builder
93.6 -> you need to use this option edit page. one more
thing guys before we do anything a lot of people
98.4 -> commented on my video that their website got
broke or anything so first thing always take
102.48 -> back of website like always. if something happens
you can always restore your website and if this
106.92 -> Plugin or any other plugin you're using broke
your website just deactivate the plugin if you
111.66 -> don't see changes refresh the cache because in
most of the cases you've deactivate a plugin
116.04 -> all the effect of plugin will be gone you website
will be back how it was before. and the best thing
120.12 -> to always keep the backup if we're doing anything
big on your website. with that said let's see how
124.38 -> this plugin works. okay so remember we install
the plugin and now what you need to do is scroll
129.84 -> your page just to mention again we are doing
this on home page of the website homepage the
134.4 -> most important page all other pages are important
but home page is the most important page so once
139.86 -> you scroll the page you'll find this option asset
cleanup section here and here you can see all the
145.62 -> JavaScript and css files which are loading in
the page will be displayed here. it gonna take
150.48 -> little bit of logic and your knowledge about
your website. so what we are going to do we're
154.44 -> going to remove unused CSS which are not used on
that page you will understand in a minute what
158.76 -> I mean. you can see there's a CSS file which says
astra widget social profiles. you can make a logic
164.04 -> that this CSS is used to display social profiles.
if I go back to my website and I scroll the page
172.02 -> you can see I do not have any social profile
element on my home page. so what I will do I
177.18 -> will go back here I will click on unload on this
page. so by doing this we are unloading CSS file
183.78 -> which is not used on that page. normally you're
not using social profiles on every page. let's
188.58 -> take another example if I scroll the page more you
can see the CSS file is added by contact from 7
194.4 -> to style the contact form. if I go back to
my website I do not have any contact form on
199.68 -> my home page. I have contact form on my contact
page but not on the home page. so what I can do
205.02 -> I'll just go here and I'll unload on this page
if I scroll more you can see there's another JS
211.14 -> file added by Contact form 7 which I'm not using
on home page so I'll unload this also basically
216.3 -> I'm not using contact form 7 on my homepage so
I'll unload all the contact form 7 files from my
221.16 -> home page. and when you make changes here on
particular Pages they'll be just affected on
225.78 -> that page it will not be affected on other pages.
so if I unload the scripts here they will still
230.34 -> load on other pages but not on the home page. and
as I said I will create another video which will
234.96 -> more in-depth video how to remove unused CSS file
manually which will be more effective, but this is
239.76 -> an easy method it will work on most the website.
and now you'll ask me I created a lot of speed
244.14 -> improvement videos before then why you need to
use this asset cleanup plugin. because sometimes
248.28 -> what happen every website is different and every
website got different scripts so sometimes you
252.66 -> need to try different kind of methods so if you
watch my LITE SPEED video I'll put a link here or
256.44 -> any other video you will find the link on the top
somewhere if they're not working for you 100 you
261.12 -> can use this plugin on the top of those plugins
to get the best scores for Google page speed.
265.08 -> okay so I'll scroll the page again and like
this you just need to scroll the page and
269.52 -> find which CSS or JS you're not using on
those pages and just unload them there.
274.62 -> if you see here I have another script which is
WP poll survey and voting system I am using the
278.94 -> script just only on one page on website, so I can
100% unload the script on the page. even you can
283.62 -> use some options like unload sidewide so this
script will be unloaded sitewide completely on
288.6 -> your website and what you can do when you unload
sitewide you can go the page where you're using
293.7 -> the script and then check this option ' on this
page' you can make a exception to load the script
298.74 -> on particular pages. so like this way you can
really save lot of CSS and JS loading on your
303.78 -> website, which will make your website really fast.
you can repeat this process for all the scripts
307.8 -> which you're not using on all the pages. I'm sure
you'll find lot of scripts which you are not using
312.24 -> on all your website and once you find all the CSS
and JS you're not using all those pages just click
317.76 -> update. now all these files we just loaded they
will not load on your home page and this will
323.1 -> make your website score really high. this will
take some time but I'm sure this will really help
327 -> you to improve your website page speed scores and
if you want to know how I got 100 out of 100 for
330.9 -> Google PAGE SPEED Scores check out this video
on screen. and don't forget to give this video
334.26 -> a thumbs up Up And subscribe to the channel and
share this video with somebody who might need it.
