Last Updated on June 11, 2021 by scottkandh
I recently wrote a post called: How to Improve your Blog’s Page Speed. My page speed increased after implementing some suggestions that were written by Hugo (on Facebook). However, my blog’s performance still needed some improvement.
This post contains affiliate links, I’ll make a commission at no extra cost to you should you click through and make a purchase.
Hugo reintroduced me to GTMetrix which I had looked at earlier but didn’t have a lot of experience using so I put it off to the side.
Forthcoming: I’m working to develop my 1st ever video to promote how to install WP Rocket on WordPress. I’ve developed the YouTube Banner and I hope to have the video done with a couple of weeks. Since I’ve never done a video, I’ll be concentrating on practicing the video and laying out my outline so I stay focused. So I should be done with the video before the end of June 2021. At the present time, I don’t know how to combine the banner with the video, so more than likely I’ll have the banner below and then I’ll be embedding the video below that.
Pro-Tip: GTMetrix is a goldmine for new bloggers. By running their report, you can see where your blog lies in many different factors such as: performance, structure, and web vitals (i.e, your page speed measured in milliseconds (ms)).
For GTMetrix, you simply type in your blog’s homepage URL to see how your site performs, and it will reveal why it’s slow and it’ll provide you with chances to discover optimization opportunities.
When I first start changing the structure of my website’s homepage, the GTMetrix report (located in the waterfall tab) reported that I had 2,248 nodes. I was able to change mine down to 1,846 nodes and it took about 1 ½ days to make all of those changes. The easiest way to do in WordPress is click on your homepage and then click on the “I” in the upper left. If you hover your mouse over it, it will say “details” and I like to call it the Info button. It’ll provide an outline of all your headings and the types of headings you have on that page. For example, I had initial headings as follows: (H1 – 1, H2 – 7, H3 – 7, H4 – 26, H5 – 2, and H6 – 0). So I changed all of the headings of H3 – H5 to paragraphs.
Read Me first! If you manage to get an A for your GTMetrix Grade stop right where you are, don’t proceed any further by trying to make any of the other recommendations. I had an A rating and tried to take advantage of the chance to fully optimize just to see it fall from an A down to a B, and trying to get that back, I even watched it fall down to an E. If you get that precious A, stop right where you are, and wash your hands of it. It’s too easy to lose that A rating by setting one of the factors that I’m going to be mentioning that gets turned off that will change that rating in a flash.
Two factors holding me back from an A were Total Blocking Time (TBT) and DOM Size.
1. What is Dom size?
All the objects that constitute the HTML structure of the page, i.e. all the tags included in it (HTML, BODY, DIV, H1, H2, etc), are called nodes and the sum of them is translated as the DOM size.
In simplest terms, it might mean that you have too much content on your homepage, and you need to get rid of some of your headings and/or images. To me, it’s more important to keep people on the page that having genuinely nice formatting. If your page is too slow and takes to long to load, you might have people come and run as soon as possible because it took to long.
Thus, since it has been brought to my attention that a node can be a heading (H1, H2, etc), I’ve combed my homepage and since it doesn’t have a table of contents anyway (on the homepage), I’ve converted the headings on the homepage and “drastically” reduced images replacing them with links to their respective posts.
2. Total Blocking Time (TBT):
How much time is blocked by scripts during your page loading process. A good user experience is 150ms or less. Total Blocking Time (TBT) is a Lighthouse Performance metric introduced in 2020 that quantifies your page’s load responsiveness to user input.
In the simplest terms, TBT measures the total amount of time your webpage was blocked, preventing the user from interacting with your page.
To get an “A” grade, it’s necessary to reduce the total blocking time (see Thresholds for TBT below).
As a Web Vital metric, TBT accounts for 25% of the Performance Score, making it a top metric to optimize. Optimizing your TBT can often make one of the most impactful improvements in your website’s responsiveness.
Below are the magic numbers to get an A, B, or C rating. I hope with this post that you’ll be able to get an A or B rating.
Thresholds for Total Blocking Time
Total Blocking Time measures the total amount of time between when the page is blocked from responding to user input and displays the result in milliseconds.
TBT thresholds are, as follows:
- Good – nothing to do here = TBT of 150 milliseconds or less – A
- OK, but consider improvement = TBT between 150 and 224 milliseconds.- A
- Longer than recommended = TBT between 224 and 350 milliseconds – B
- Much longer than recommended = TBT higher than 350 milliseconds – C
I recommend that before you get started to make “any” changes that you run GTMetrix first, so you have a comparison.
Your Structure Score (the 2nd %) represents how well your page is built for optimal performance.
I was able to bring mine to totals of 95% and 92% respectively (see bottom of post).
How to improve Total Blocking Time?
The suggestions from GTMetrix to improve Total Blocking Time to me were too complicated and way over my head.
Some of these optimizations were:
- 2) Minimizing main-thread work
- 4) Reducing the impact of third-party code
Fortunately, the WP Rocket plug-in takes the worries about the coding out of the equation and to get the best grade for your website you just need to be sure to enable all of the suggested changes to make in WP Rocket.
In addition to making changes to your headings and images, you might have to bring your images down to a bare minimum and replace some of your pins with a link to their respective post.
On the page following the suggested changes to make in WP Rocket, I’ve provided links to the recommended audits to improve your GTMetrix Grades / Vitals. I’m definitely not a person that’s into coding and most of these require a lot of work. However, if you were to purchase WP Rocket and make the changes that will take less than 30 minutes to enable all of the settings you should be able to get a grade of an A or B on GTMetrix (your grade will also depend on the host that you’re using).
I have SiteGround and one advantage of using SiteGround is a plug-in called SG Optimizer. However, most of the items mentioned on the next page aren’t available to be set in SG Optimizer. There’s another plug-in (for caching) that I believe is called WP Fast Cache that I used a long time ago. There’s a free version and some of these settings might be available in that plug-in. You’ll need to check for yourself. But at this time, I’m primarily looking at just WP Rocket to get your blog’s best page speed and performance.
Here’s where you need to make the necessary changes to get the best performance and page speed for your blog!
Suggested changes to make in WP Rocket
The items below are laid out in order as they appear in WP Rocket.
The different tabs are Cache, File Optimization, Media, Preload, and Heartbeat (in order as they appear).
Use the check boxes to ensure that as you enable the items you check them off and at the end so that they are all checked off of your list and you didn’t miss any. What I’d suggest is that you print this “selected” portion out and it’ll be easier for you to make all of the changes (from Cache to and including Heartbeat).
- ☐ Enable Caching for Mobile Devices – see Mobile Cache.
- ☐ Separate Cache Files for Mobile Devices – see Mobile Cache.
- ☐ Enable Caching for Logged in WordPress Users – see User Cache.
- ☐ Minify CSS Files – see File Optimization – under CSS Files.
- ☐ Combine CSS files – see File Optimization – under CSS Files.
- ☐ Optimize CSS Delivery – see File Optimization – under CSS Files.
- ☐ Enable for Images – see Media – under LazyLoad
- ☐ Enable for Iframes and Videos – see Media – under LazyLoad
- ☐ Replace YouTube Iframe with Preview Image – see Media – under LazyLoad
- ☐ Activate Preloading – see Preload – under Preload Cache
- ☐ Activate sitemap-based cache preloading – see Preload – under Preload Cache
- ☐ Yoast SEO XML sitemap (if you have Yoast SEO installed) – under Preload Cache
- ☐ Enable Link Preloading – see Preload – under Preload Links
- ☐ Control Heartbeat – See Heartbeat
Recommended audits to improve GTMetrix Grades / Vitals.
- Avoid an excessive DOM size
- Avoid chaining critical requests
- Avoid CSS @import
- Avoid document.write()
- Avoid enormous network payloads
- Avoid large layout shifts
- Avoid long main-thread tasks
- Avoid multiple page redirects
- Avoid non-composited animations
- Combine images using CSS sprites
- Defer offscreen images
- Efficiently encode images
- Eliminate render-blocking resources
- Enable Keep-Alive
- Enable text compression
- Ensure text remains visible during webfont load
- Keep request counts low and transfer sizes small
- Minify CSS
- Minimize main-thread work
- Preconnect to required origins
- Preload key requests
- Properly size images
- Reduce initial server response time
- Reduce the impact of third-party code
- Remove unused CSS
- Serve images in next-gen formats
- Serve static assets with an efficient cache policy
- Use a Content Delivery Network (CDN)
- Use explicit width and height on image elements
- Use HTTP/2 for all resources
- Use passive listeners to improve scrolling performance
- Use video formats for animated content
- User Timing marks and measures
Here’s a couple of more changes that I made above and beyond WP Rocket.
- The image for the gravatar slows down your site. There’s a quick and easy way to get that fixed.
Go into your WordPress blog and go to SETTINGS (in the left menu) > DISCUSSION. Then, scroll to the bottom and look for the Avatar section. All you need to do is to uncheck the Show Avatar. It saved me a difference of 28ms. If you need to get down to 224 or less those small numbers can quickly add up.
2. Changed the title in Customize, length was too long. It was at 106 and it should be less 70 characters including the spaces. Changed from (below) to the 2nd bullet.
- PinArtwork – Looking at ways to Start a Blog, Grow Your Blog, Monetize it and boost your Pinterest.
- PinArtwork – Start a Blog, Grow Your Blog, or Monetize it
If you liked this post please consider signing up for my Free Blogging Mini-Course that’s located at the top of the sidebar. I hope to see you there.
Related posts that you may want to visit on my website.