Improve a WordPress Site Page Loading Speed Help...

[RogerM]

I am not a web developer (duh, right?! ) but I am currently learning HTML, CSS, and JS.

My main goal with this is NOT to be able to write an app, theme, or plugin from scratch. My main goal is to be able to read and understand the logic of programming that´s behind of any WordPress based site´s theme and plugin so I can improve its page loading speed.

This will allow me to expand my services as an SEO Consultant and offer a more well-round service.

Personally, I use WP Rocket. I think it´s the best performance plugin for WP (If you´re a web developer and disagree with this. Please, let me know what are your go-to performance plugins for WP)

Right now, I would like to focus on how to remove unused HTML, CSS, and JS from WordPress based sites.

I know how to detect it by going into Chrome DevTool > Coverage.

I have VSC installed on my PC and I can just copy/paste the code in there from the WP theme I am working on and just delete the lines of codes that appear on red in the DevTool tab.

But this is a very time-consuming task as some sites show tens of thousands of lines of code.

Is there a way to automate this?

I´ve seen a couple of YouTube videos when the instructor mentions an app called PurgeCSS but it looks too complicated/advanced for me.

I´ve also tried using online cleaning HTML/CSS codes like...

unused-css
purifycss

But when editing the respective file with the "clean" CSS code generated from those tools, I always break the site up.

Thoughts?

 

[tradesman]

But when editing the respective file with the "clean" CSS code generated from those tools, I always break the site up.

Thoughts?

You don't have to do that, bro, you're just wasting your time. WordPress displays its content dynamically.

Each page is different from the other; Archive Page, Post Page, Single Page, Search Page, 404 page etc. and each page might use a different css or js file. These are just the core files, no plugins no extra themes yet. So don't waste your time. WP is slow because it is bloated, WP is designed to be a multipurpose CMS.

Check this out: https://wphierarchy.com/ to get a better understanding of how this work.

If you want to pursue HTML/CSS/JS then add some PHP on it and apply it on WordPress. You can design your own theme. A basic theme is not really hard to create if you know how the template hierarchy works. Only then you can decide which CSS/JS files are called, you know your DOM.

I can't provide a valid opinion regarding performance plugin, haven't tried them all yet and I guess the hosting infrastructure, location of the server, nature of the website are big factors to consider.

Been using W3 Total cache on my clients' website, but these are just small website mostly for blogging or just landing pages, not a good benchmark.

I was actually thinking of starting a thread about WordPress Setup where people can share their tips on what setup worked on their Photography/Woocommerce/RecipeBlog/Carshop/Newsite etc. websites. Only then we can get a better gauge.

I hope I was able to provide some answer. GL bro.

BTW Have you tried checking out headless WordPress? check it out.

 

[ckatlayna16]

Asset Cleanup Pro plugin works great for this. When you edit a page it will show a list of all the CSS and JS that loads on that page and you can unload specific JS and CSS files on that individual page. OR you async or defer these files. You can also apply site wide rules to . (Example: unload wpforms js for all urls with /product/ )

Great documentation on it

What are CSS/JS unload rules? - Asset CleanUp Pro: Documentation

An unload rule is the action that prevents a specific asset (CSS/JavaScript file) from loading on a certain page, a group of pages or site-wide (everywhere, on all pages of the website). These include: Unload on this page (applies only on the post/page that you’re editing) Unload everywhere...

assetcleanup.com

Also, in the settings >> Plugins area you can 'deactivate' plugins and all their JS CSS and HTML from specific pages or page types.

Be careful because you can unload or async a JS file that were important to the specific plugin you unloaded it from. But no worries just changing the setting to the original setting will fix that and nothing is broken anymore!

I don't know the differences in the caching plugins, but I use Litespeed cache with a Litespeed server one click WP install. The documentation is very clear and easy. I'm not very technical. Youd probably get a performance boost with a VPS if you're on shared hosting as well.

OpenLiteSpeed WordPress Hosting | DigitalOcean Marketplace 1-Click App

Blazing-fast WordPress with LSCache, 300+ times faster than regular WordPress

marketplace.digitalocean.com

WordPress | Images | Cloud | LiteSpeed Documentation

A guide detailing everything you need to know about the OpenLiteSpeed WordPress image, including how to get started, its components, benchmarks, FAQs, and more.

docs.litespeedtech.com

 

[ckatlayna16]

This looks like a nice plugin as well

Plugin Organizer

This plugin allows you to do the following: 1. Change the order that your plugins are loaded. 2. Selectively disable plugins by any post type or wordp …

wordpress.org