Great Website We Found

WordPress: The Good and the Bad

What We Like
If you have been following us for any length of time,  you know that we are big fans of the WordPress platform for website development. We like it because it has a wealth of handy plugins that make our lives easier…especially when it comes to the SEO portion of website development. Using WordPress allows us to spin up sites pretty quickly and not have to worry about custom coding things like mobile compatibility, security protocol etc.

What We Don’t Like
As we mentioned above WordPress is really handy and has a ton of upside, but let’s be honest here; it has some glaring issues.  One particularly frustrating element when using an off the shelf template is that it comes with a pretty significant amount of bloat.  If you have ever run your site through something like Pingdom or GTMetrix or even Google’s own website testing tool, I’m going to guess that right out of the box your template didn’t do so well on the performance tests.
Where's the Bloat?
So Where’s The Bloat Coming From ?
In our experience, most of the bloat comes from JavaScript and CSS files.  When the developers code the templates that they sell, they end up having to code for every possible scenario under the sun.  It works out well for them because its a  hit it and quit it type situation.  The good developers will offer some level of basic support, but if you really want to tweak your WordPress site and get it smoking fast you’re going to have to get your hands dirty and dig into the JavaScript and CSS.

What Can I Do?
We’ll cover some things you can do to tidy up your JavaScript in another post, but for now let’s focus on what you can do with your CSS.  There are some speed plugins like WP Rocket and WP Optimize that will do some CSS compression for you.  For a good list of plugins, check these out.

Depending on your skill set and comfort level, these plugins may be as deep as you want to wade into the CSS pool.  Here at DanyShop we like to swim in the deep end of the pool and really tweak our websites to get them as fast as we can.   Unfortunately this involves a great deal of manual work.

UNTIL NOW
While trolling around on the internet, we found a site called Unused CSS.   We just started using this site, but so far we love it.  There is a free version available that will crawl one level of your site and show you all of the CSS in your site that is not necessary.  The Unused CSS causes extra load time and puts unnecessary load on your website.   We highly recommend upgrading your account to a paid version. This way you can crawl your entire site and make sure you get a global view  of what CSS you can safely get rid of.   For example, you may have some CSS that is not used on your homepage but is heavily utilized on the internal pages of your site.  The paid version is well worth it  for this global view alone.

Ok, let’s get into it.  Start by visiting Unused CSS and sign up for an account.  Put in the URL of your site and let it  do its thing.  After its done running it will give you a dashboard view of your website.   We love the graphic breakdown that shows you how much smaller your CSS file can be if you go in and eliminate all the  unneeded CSS.
*** CAVEAT:  Always make a back up of your site and CSS before implementing on your live site just in case!
Unused CSS Below the dialog box, you’ll notice there are even more options to customize the depth you want to explore your website.  The first display box where it shows you crossed out sections of your CSS is worth the price of admission alone.  To go through and try and explore all the pages in your site and then manually configure and test what effect it might have on your site is quite frankly a nightmare.  This tool does it all in one click.

 

 

Unused CSS

After you have run through your site, you can download your CSS and replace it on your website and your good to go.  If your website has multiple css files associated with it, Unused CSS has the ability to go in and look at each of the separate CSS files. (See pic below)

CSS modification

 

We are currently working on a Hearing Aids Kansas City website for a new client and we’re curious to see how things turn out after we have cleaned up the CSS on the template we’re using.   We suspect there will be a SIGNIFICANT improvement in performance and speed.  Stay tuned to this space and we’ll keep you updated on how it does.   Big thank you to the folks at UnUsed CSS   for such a great tool.

Hope this helps you with your WordPress and CSS development

Until next time!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *