WordPress Site Speed
This presentation was given in Charlotte, NC on May 29th 2019. The slides from this presentation can be found at the end of this post.
I discovered the Greater Charlotte Area WordPress Meetup group when I was looking to get more involved in the WordPress community here in Charlotte. I’ve built my career on this amazing platform and learned from so many of the speakers and volunteers at the various WordCamps I had attended and was looking for more.
Shortly after the first meeting, I offered to speak at one of the upcoming meetings. I had recently finished a side project that I had aspired to reach a 100% performance rating from Google Page Speed Insights and I figured it would be a great opportunity to share what I had learned, the results of my tests, and how others could do the same thing with their websites.
I approached the topic from an educational standpoint. Not every website is the same and there are a lot of factors that go into slowing down and speeding up a website. First we discussed the various things that can slow a site down and how to determine what those individual things might be for you. I shared the various tools I use and how to test your own site with them and hopefully get a benchmark for where you currently stand and the obstacles you will have to overcome in order to fix those things.
I went on to discuss a lot of them in detail like the importance of starting off on the right foot with a decent hosting package. It doesn’t have to be anything crazy, I use a VPS from Dreamhost at $160 a year. I showed how images and video can really hold you back if they are not added properly to your website. I showed how plugins and themes can add multiple CSS and JS assets to your site, all of which add to the amount of time it takes to completely load on your users screen.
Once everyone was aware of what makes websites slow and why that might happen, I started to go into the steps I took to actually fix all of these things. There are some plugins out there that will help you compress images. I showed how to ensure that images were added to posts and pages at the correct sizes. I talked about setting up a CDN (content delivery network). So far these are all things that with a bit of research and maybe a smidge of technical inclination the average website owner could likely handle. But the rest of my climb was not going to be that easy.
I wanted to bundle all of my CSS and JS assets, lazy load all of my images, and install and configure a proper caching plugin. I list installing a caching plugin in the second list because up until this point I had not found one that I liked. I left that to last and set out manually setting up my theme to handle the lazy loading images, I wrote a gulp process that would compile my critical css (initial css needed to display the header and top portion of my pages), and delayed the rest of my styles and scripts until after the page had loaded. It worked ok.
So what was left was the caching plugin. I had had a number of bad experiences and never really knew if I was configuring them right or if they were working, so I started doing some research. I posted to Reddit with my question and a few concerns, and someone recommended WP Rocket, a fairly new plugin claiming to be super simple, super effective, and with more 5 star reviews and recommendations than I could read. A few more people chimed in to my Reddit post to second WP Rocket. But it was a premium plugin, and I only paid for one plugin (ACF) prior to this, so I wasn’t sure it would be worth it. They did offer a money back guarantee though so I figured I’d give it a shot.
I had to tell the group, I bought the one year single site subscription, and within a month I knew I was going to put this plugin on every site I maintained. I upped my subscription to the infinite license and thats exactly what I did.
Not only was it as easy as everyone claimed, but for the first time I saw a drastic and noticeable change in the performance of my website. And to top it all off, after all the work I had done bundling my various assets, inlining my critical CSS, and lazy loading all of my images; WP Rocket did that out of the box! But how well? I had already done all the work, might as well see how I stacked up. The WP Rocket plugin did all of those things as well, and did it better and more thoroughly than I had! It was unfortunate I had wasted a bit of time when this plugin did it all, but the payoff was worth it. After a few more minor dev tweaks I was approaching that 100 score I was looking for. The rest was some sneaky stuff like hiding Google Maps until after the page had fully finished loading, then adding the scripts to the DOM. I go into that a bit more in the slides.
From the looks of it everyone was experiencing similar shock and awe at the result I showed them on a site I had built for this demonstration. Again, more on that in the slides.
WP Rocket had changed my mind about caching plugins as a whole and had beat me at my own game, but now I had a tool I could leverage as a part of my services, and a faster website. I’ll call it a win-win.
In addition to all that, I could take it one step further and share my experience with everyone in the Greater Charlotte Area WordPress Meetup group. This was my first time presenting and it was great to be able to give back to the WordPress community. If you are in the Charlotte area and want to learn more about WordPress, check out the Meetup group. We meet the last Wednesday of every month and I’ll be there answering questions and sharing what I know with anyone looking to do more with their WordPress website.