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.
So Where’s The Bloat Coming From ?
What Can I Do?
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.
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!
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.
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)
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!