Gutenberg Blocks are awesome!
They are said to be the best tool to build beautiful web pages that loads fast, and it is the best remedy for Google Page Speed Insights.
But, do you know that not all Gutenberg Blocks are created equally?
Some may even slow down your web page without you knowing.
So, in this article, we will discover which are the common Gutenberg Blocks that may slow down your website.
Testimonial Block
Lightweight:
Verdict: The Testimonial Gutenberg Block causes a web page to slow down a little.
What is? Testimonials allows you to build trust with your audience. It is a 3rd party validation of the existence of your business or service.
Common Usage: Home Page, Pricing Page, Testimonial Page, Support Page, Sales Page.
Google Page Speed Insights (PSI)
| PSI | Blank Page | Testimonial (Grid) | Change | Testimonial (Carousel) | Change |
|---|---|---|---|---|---|
| Rating | 98 | 98 | 0 | 93 | -5 |
| First Contentful Paint | 1.8s | 1.8s | 0 | 1.8s | 0 |
| Time to Interactive | 2.3s | 2.3s | 0 | 3.0s | -0.7s |
| Speed Index | 2.8s | 3.0s | -0.2s | 3.1s | -0.3s |
| Total Blocking Time | 70ms | 10ms | +60ms | 360ms | -290ms |
| Largest Contentful Paint | 1.9s | 1.9s | 0 | 1.9s | 0 |
| Cumulative Layout Shift | 0.005 | 0.03 | -0.025 | 0.031 | -0.026 |
Testimonial Example (Grid)
Testimonial Example (Carousel)
Accordion Block
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that Accordion does not cause a web page to slow down.
What is? An accordion is an easy to use, search engine friendly structure that allows people to browse through its content with ease. View the example below.
Common Usage: FAQ Page, Home Page, Pricing Page, Support Page.
Google Page Speed Insights (PSI)
| PSI | Blank Page | Accordion Block | Change |
|---|---|---|---|
| Rating | 98 | 97 | -1 |
| First Contentful Paint | 1.8s | 1.8s | 0 |
| Time to Interactive | 2.3s | 2.3s | 0 |
| Speed Index | 2.8s | 3.7s | -0.9s |
| Total Blocking Time | 70ms | 30ms | +40ms |
| Largest Contentful Paint | 1.9s | 1.9s | 0 |
| Cumulative Layout Shift | 0.005 | 0.008 | -0.003 |
Accordion Example
Google Maps
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Google Maps Block will cause a web page to slow down.
What is? The Google Maps Block allows a web master to embed responsive maps on their website.
Common Usage: Contact and Support Page.
Google Page Speed Insights (PSI)
| PSI | Blank Page | Google Maps Block | Change |
|---|---|---|---|
| Rating | 98 | 77 | -21 |
| First Contentful Paint | 1.8s | 2.1s | -0.3s |
| Time to Interactive | 2.3s | 7.4s | -5.1s |
| Speed Index | 2.8s | 7.2s | -4.4s |
| Total Blocking Time | 70ms | 300ms | -230ms |
| Largest Contentful Paint | 1.9s | 2.1s | -0.2s |
| Cumulative Layout Shift | 0.005 | 0.005 | 0 |
Google Maps Example
Post Carousel
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Post Carousel Block is a Medium Weight Block and may slow down your web page.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: Home Page
Google Page Speed Insights (PSI)
| PSI | Blank Page | Post Carousel Block | Change |
|---|---|---|---|
| Rating | 98 | 85 | -13 |
| First Contentful Paint | 1.8s | 2.1s | -0.3s |
| Time to Interactive | 2.3s | 3.4s | -1.1s |
| Speed Index | 2.8s | 3.9s | -1.1s |
| Total Blocking Time | 70ms | 520ms | -450ms |
| Largest Contentful Paint | 1.9s | 2.1s | -0.2s |
| Cumulative Layout Shift | 0.005 | 0.008 | -0.003 |
Post Carousel Example
Circular Progress Bar
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Post Carousel Block is a Medium Weight Block and may slow down your web page.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: Home Page
Google Page Speed Insights (PSI)
| PSI | Blank Page | Circular Progress Bar | Change |
|---|---|---|---|
| Rating | 98 | 85 | -13 |
| First Contentful Paint | 1.8s | 2.1s | -0.3s |
| Time to Interactive | 2.3s | 3.4s | -1.1s |
| Speed Index | 2.8s | 3.9s | -1.1s |
| Total Blocking Time | 70ms | 520ms | -450ms |
| Largest Contentful Paint | 1.9s | 2.1s | -0.2s |
| Cumulative Layout Shift | 0.005 | 0.008 | -0.003 |
Tabs
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Tabs Block is a lightweight Block.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: FAQ Page, Support Page
Google Page Speed Insights (PSI)
| PSI | Blank Page | Tabs Block | Change |
|---|---|---|---|
| Rating | 98 | 96 | -2 |
| First Contentful Paint | 1.8s | 2.0s | -0.2s |
| Time to Interactive | 2.3s | 2.7s | -0.4s |
| Speed Index | 2.8s | 3.5s | -0.7s |
| Total Blocking Time | 70ms | 100ms | -30ms |
| Largest Contentful Paint | 1.9s | 2.0s | -0.1s |
| Cumulative Layout Shift | 0.005 | 0.062 | -0.057 |
Tabs Example
This is Tab #1
This is Tab #2
This is Tab #3
Counter
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Counter Block is a lightweight Block.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: Home Page, Review Articles, About Page.
Google Page Speed Insights (PSI)
| PSI | Blank Page | Counter Block | Change |
|---|---|---|---|
| Rating | 98 | 96 | -2 |
| First Contentful Paint | 1.8s | 2.0s | -0.2s |
| Time to Interactive | 2.3s | 2.5s | -0.2s |
| Speed Index | 2.8s | 3.3s | -0.5s |
| Total Blocking Time | 70ms | 40ms | +30ms |
| Largest Contentful Paint | 1.9s | 2.2s | -0.3s |
| Cumulative Layout Shift | 0.005 | 0.008 | -0.003 |
Content Timeline
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Content Timeline Block is a lightweight Block.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: About Page.
Google Page Speed Insights (PSI)
| PSI | Blank Page | Content Timeline | Change |
|---|---|---|---|
| Rating | 98 | 97 | -1 |
| First Contentful Paint | 1.8s | 2.0s | -0.2s |
| Time to Interactive | 2.3s | 2.5s | -0.2s |
| Speed Index | 2.8s | 3.1s | -0.3s |
| Total Blocking Time | 70ms | 100ms | -30ms |
| Largest Contentful Paint | 1.9s | 2.1s | -0.2s |
| Cumulative Layout Shift | 0.005 | 0.007 | -0.002 |
Media & Text Slider
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Media and Slider Block is a Medium weight Block.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: Home Page, Archive Pages.
Google Page Speed Insights (PSI)
| PSI | Blank Page | Media & Text Slider | Change |
|---|---|---|---|
| Rating | 98 | 82 | -16 |
| First Contentful Paint | 1.8s | 2.1s | -0.3s |
| Time to Interactive | 2.3s | 3.1s | -0.8s |
| Speed Index | 2.8s | 4.5s | -1.7s |
| Total Blocking Time | 70ms | 320ms | -250ms |
| Largest Contentful Paint | 1.9s | 3.5s | -1.6s |
| Cumulative Layout Shift | 0.005 | 0.006 | -0.001 |
Video Embed
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Video Embed Block is a Medium weight Block.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: Common Articles
Google Page Speed Insights (PSI)
| PSI | Blank Page | Video Embed | Change |
|---|---|---|---|
| Rating | 98 | 68 | -30 |
| First Contentful Paint | 1.8s | 1.9s | -0.1s |
| Time to Interactive | 2.3s | 8.2s | -5.9s |
| Speed Index | 2.8s | 5.4s | -2.6s |
| Total Blocking Time | 70ms | 710ms | -640ms |
| Largest Contentful Paint | 1.9s | 1.9s | 0 |
| Cumulative Layout Shift | 0.005 | 0.005 | 0 |
Video Embed Example
Video Popup
Lightweight:
Verdict: Based on the data provided in the table below, it is determined that the Video Popup Block is a Medium weight Block.
What is? The Post Carousel Block allows display a snippet of your site articles in a carousel format.
Common Usage: Common Articles
Google Page Speed Insights (PSI)
| PSI | Blank Page | Video Popup | Change |
|---|---|---|---|
| Rating | 98 | 89 | -9 |
| First Contentful Paint | 1.8s | 2.0s | -0.2s |
| Time to Interactive | 2.3s | 2.8s | -0.5s |
| Speed Index | 2.8s | 4.2s | -1.4s |
| Total Blocking Time | 70ms | 80ms | -10ms |
| Largest Contentful Paint | 1.9s | 3.1s | -1.2s |
| Cumulative Layout Shift | 0.005 | 0.005 | 0 |
Gutenberg Blocks that May Slow Down Your Site
In general, blocks that connects with 3rd party services such as Google Maps, YouTube, Google Analytics, etc, will inherently slow down your site.
Also, Gutenberg Blocks that loads javascripts such as a slider, tabs, animations, etc, are a little heavier than blocks that only loads CSS scripts.
I hope this article has been useful. If you have anything you would like to add, feel free to leave a comment below.
Your friend,
Jack
Do you convert sites to Gutenberg? Thank you.
Yes I do. I’ve just sent you an email 🙂