How We Used WP Rocket, Asset Clean-Up PRO & Imagify to Improve our Site Performance

https://www.seotoronto.ca

Why do site speed optimization?

If you've been following Google updates then you'll notice that it announced in May 2020 a speed report that will affect ranking with Core Web Vitals. With this update, Google is prioritizing user page experience so the time it takes to load a page on your website will impact rankings. Therefore, we took action!

How did we optimize speed?

Since all of our websites are built with WordPress we had to use a solution built specifically for WordPress.  Enter WP-Rocket, Asset CleanUp Pro and Imagify!

Step 1: Using  WP-Rocket

WP-Rocket is hands down the best speed optimization plugin in the market. It allows us to do the following:

> Cache pages for quick viewing > Cache for mobile use > Preload cached pages > Reduce HTTP requests > Reduce the use of bandwidth > Defer loading of large files > Improve WebP compatibility > and much more

It also reduces load on the server by controlling WordPress heartbeat. Most importantly, it reduces the size of pages and amount of requests made - all things that impact pagespeed.

Step 1: Using  WP-Rocket

Here are the results before implementing WP-Rocket:

Here are the results after implementing WP-Rocket:

We're getting there!

Step 2: Asset Clean-Up Pro

Using Asset Clean-Up Pro let us further optimize the pages. It let us unload any plugins or scripts that weren't needed:

> Remove unused elements from the head > Preload local fonts > Combine multiple font requests into one > Preconnect to Google fonts > Site-wide unloads for default WordPress   elements like emojis, Dashicons and more > HTML Source CleanUp to remove more   default WordPress elements

WordPress tends to come prepackaged with lots of elements, and in most cases they aren't used so having them load on pages just adds time. With Asset Clean-Up Pro we don't have to worry about those!

Step 2: Asset  Clean-Up Pro

Here are the results after implementing Asset CleanUp:

Some more minor improvements in performance but we can still do better!

Step 3: Using Imagify

Visuals provide a more aesthetically pleasing page and split up content, so we use Imagify to optimize them:

> Compressing images > Resizes images to most common sizes > Create WebP versions of all images > Reduce the overall size of images so the    page loads faster for visitors > Helps save time in the future when we   upload new images they will be   automatically optimized

Images account for a big portion of page load times so it only makes sense we do as much as we can to optimize them so that they load faster and increase performance.

Step 4:  Trimming Fat

CSS and JavaScript code from plugins and stylesheets tends to load everything even if it isn't used so we trim the extra code:

> Using Google developer tools we can view    all the files/code loaded on the page > Within developer tools there is a   "Coverage" tool that lets us view the CSS    and JavaScript code > We went through these files and found    code that was being loaded but wasn't    used and removed it - trimming the fat

Plugins and page builders tend to come prepackaged with many elements so their functionality (JavaScript) and styling (CSS) tend to load everywhere even if the element isn't used, so we trimmed that.

The Roadblocks - Broken Elements

By trimming the fat within stylesheets it affected other pages where the CSS was used

Some of the CSS we trimmed was used in other pages or was activated based on user interaction so it was labelled as extra. We had to manually check pages and fix any broken elements.

Final Results

Overall we were able to reduce the page sizes and requests being made so visitors could load the page faster

The Before

The After

Thank You For Following Along!

We hope that this story was informative and helps you get better performance for your own website. We also offer speed optimization services for those looking to get better performance/rankings.

https://www.seotoronto.ca/site-speed-optimization