Between Google announcing its Core Web Vitals and Google Page Experience Update, it’s clear that the search giant is making substantial moves to prioritize page experience as a ranking factor. By integrating user-based metrics to measure the quality and stability of web pages, Google is reminding us what it’s been telling us all along: Google likes useful content, but it likes useful web pages too.
After all, with E. A. T. becoming more prevalent with updates like the May 2020 Core Algorithm Update, trustworthy pages are becoming almost as important as trustworthy content. We’ve taken this as a sign and decided that now was the best time to assess not just the quality of content on SEOToronto.ca but our page experience as well.
Here’s how and why we elevated our site speed performance using plugins like W.P. Rocket, Imagify, and Asset Clean-Up PRO — and why you should be doing the same.
Step 1: Using WP-Rocket
What is WP Rocket?
The WP Rocket is a reliable WordPress caching plugin that boasts features that help users optimize different elements on a page to load faster. Specifically, this plugin helps to:
- Cache pages for quick viewing
- Cache for mobile use
- Cache for users logged into a WordPress
- Preload cached pages
- Reduce HTTP requests
- Reduce the use of bandwidth
- Defer loading of large files
- Improve WebP compatibility & more
This plugin can help optimize your database, images, and CSS for faster loading times. It also boasts a few different modes and features like LazyLoad and the heartbeat API control that we used on a site-wide level to improve our website’s overall performance.
Where We Started:
Our starting point for optimizing SEO Toronto’s site performance left something desired, especially when compared to our higher metrics. It was time to start cleaning things up.
Updating the Code:
There were a few areas where we needed to update the code on SEOToronto.ca to make it less convoluted, ensure it was responsive, and get rid of what was being loaded but not used. We updated the code to help our pages load faster and be more responsive across devices.
Action Items:
- Implemented caching for mobile devices
- Minified HTML, CSS, and JavaScript
- Combined CSS & JavaScript files to lower the HTTP requests
- Eliminate render-blocking CSS
- Optimized Google fonts
- Combined multiple font requests into one.
- Added “display=swap” to code to make sure the font is visible while the page loads. This adds a preconnect hint to fonts to improve load times.
- Deferred JavaScript to eliminate render-blocking. This also Improves load time as the code does not block the downloading of other assets.
Media:
The reality is that the media on your site (graphics, images, videos, gifs, etc.) can slow down your page speed and loading times if they are not appropriately sized or adequately optimized.
We found that a lot of our images needed to be optimized as they were currently, they were slowing down our site significantly.
We addressed and optimized all the media on our site so that we could maintain our helpful and engaging media assets, without slowing down how our pages loaded.
Action Items:
- Enabled LazyLoad for images, iframes and videos. This is a design pattern that defers loading an object until the user needs it.
- Disabled Emojis and made it so that the pages use the visitor’s browser emojis instead. This helps to lower the HTTP requests made.
- Disabled the WordPress embed, which removed JavaScript requests related to WordPress embeds
- Activated preloading
- Made sure updated content is preloaded
- Ensured that pages generate cache right away beginning with the homepage
Database:
When you have a site for a while, there is often a backlog of both published and drafted content, comments, and more. So, we decided to cleanse our database:
Action Items:
- Cleaned up revisions, drafts, and trashed posts from when the site was built
- Optimized tables
Heartbeat API:
WordPress’ Heartbeat API feature helps to monitor the actions of users by sending updates to the webserver.
Action Items:
- Provided connection for real-time data transfer sync between server and browser.
- Utilized Control Heartbeat’s reduced activity option to bring the interval of tasks from one minute to two minutes, and reduce the chances of high CPU usage or performance issues.
Add-Ons:
We all know that WordPress plugins can sometimes bog down a site, so we made sure to be strategic about our add-ons.
Action Items:
- Enabled Google Tracking add-on so that the scripts are hosted locally per PageSpeed recommendations.
After Step 1:
After step 1, we assessed our site performance to see where we were at, and what else needed to be improved.
Step 2: Asset Clean-Up PRO
Next up, we used Asset Clean-Up Pro to sync and optimize some elements that, you guessed it, were causing longer load times.
JavaScript and CSS:
After getting the WP Rocket up and running, we made sure all JavaScript and CSS files were set to defer and sync so that they didn’t slow down the page load times.
Optimization of Google Fonts:
Instead of making multiple requests to Google for different fonts, we optimized them so that they were combined for fewer requests.
Action Items:
- Set option to “Asynchronous by preloading the CSS stylesheet”
- Applied font-display property with Swap. This displays a fallback font quickly but swaps in the custom font when it loads.
- Enabled pre-connect to let the browser know to connect to Google Fonts while it loads CSS. This results in a slower loading time.
Site-Wide Uploads:
To bring our site up to speed (literally), we also made some universal updates across all pages.
Action Items:
- Gutenberg CSS block library
- jQuery migrate
- Comment reply
HTML Source Cleanup:
Disabling default elements in the WordPress environment helps to clean up unnecessary code. We added preload local font files but also removed a few elements to help clean up the site.
Action Items:
- Removed XML-RPC
- Removed “Windows Live Writer” link tag
- Removed “REST API” link tag
- Removed Pages/Posts “Shortlink” tag
- Removed “Post’s Relational Links” tag
- Removed “WordPress version” meta tag
- Removed All “generator” meta tags
- Removed Comment RSS Feed Link
- Removed HTML comments
After Step 2:
Step 3: Trimming The Fat
Next was time to trim the fat — the excess code that was being loaded but not used on pages across our site. To do this, we turned off WP Rocket to prevent further caching and then used Google Coverage to see how much of the code loaded on our pages was actually being used.
Spoiler Alert: there was a lot.
Typically, when you refresh a page on Google Coverage, you will see the various CSS and JavaScript files along with how much of them are unused (Unused Bytes).
Using this information, we went into our files and “trimmed the fat’ (i.e. removed any unused styles.)
When we did this, however, we noticed something important. If you delete style codes that are marked “unused” on a page, it will affect other pages where they are being used.
The Roadblocks (I.E. Things Broke)
When we first went in to trim the fat with Google Coverage, it broke some stuff on the site. Oops.
The first signifier that something was wrong after we cleaned up some code was how blogs were appearing on the home page. Even though the CSS showed up as not being used on the homepage, once deleted, it was evident that the blog plugin used it. So, the broken elements needed manual fixes.
For example, changing the CSS from images to figures resulted in different margins on the home page.
We also found that it broke our submission form. No Bueno.
Additionally, our fat trimming also impacted the mobile responsiveness of the site. Specifically, it broke our hamburger menu on mobile.
Oh, and it also impacted the ribbon styling on our home page.
It’s safe to say that a better plan of action for smaller sites would be to go through each page and find only used CSS, trim it, and replace the original.
Another thing to consider is that some elements are applied different CSS classes based on their actions. This means that even though the CSS would show up as “extra,” it is still needed to make the page work properly.
Ultimately, we went in and manually cleaned up the code and replaced anything that, while not labelled as being used, was being used on other pages or by other applications. After this, we were able to reduce the unused code and maintain functionality across the site.
Step 4: Imagify
Images and visuals are essential for creating an engaging, aesthetically pleasing website — but these files can also be extremely large and slow down your loading times.
To fix this, we optimized our images in a way that would allow us to keep them without allowing them to slow down our site speed.
Action Items:
- Served next-gen version of images in webp format by enabling the creation of webp version of images
- Bulk optimization of all images
- Used WP Rocket to load the optimized versions (webp)
Step 5: The Results
We were able to optimize our site performance after trimming the fat on the site and fixing any styling errors caused by removing code in the CSS. We used a few different tools to measure our performance based on various metrics.
Google Lighthouse
The Before:
The After:
GTMetrix
The Before:
The After:
The Takeaways:
With page experience becoming an increasingly prevalent ranking factor for Google, improving your site performance is one of the best things you can do for your site.
When going through the motions of cleaning up your site to improve load speeds, it’s essential to be aware of how removing or adding elements to a page’s code can impact a site globally. We learned this the hard way.
