You are in the process of setting up AMP in your WordPress site, and wonder how to migrate your image galleries ? Your current gallery plugin is probably not AMP-ready yet, and their authors do not communicate on a future AMP compliance ? I’ve been there myself, looking for the best solution to migrate my image galleries in my AMP-enabled WordPress site.
There is no AMP Image gallery plugin available in WordPress yet. Either you keep your non AMP-ready gallery plugin and serve all your pages containing an plugin image gallery as non-AMP, or you replace your old plugin galleries with Gutenberg galleries.
Let’s detail both solutions and compare them, so that you’ll have more criteria to make up your mind…
So you are in the process of enabling AMP on your site. You have pages and posts with image galleries you created with a WordPress plugin. They are a lot of them, for instance Envira Gallery, Modula, NextGen, FooGallery, WP Photo Album Plus, Grand Flagallery, Gmedia Gallery…
I used Envira Gallery, so I will take this plugin as an example in this article.
If you wish, you can install the free version : Envira Gallery Lite.
We will see how to enable AMP on your WordPress site, then display the Envira Gallery. As it does not display correctly, we will look at alternatives and compare them with one another.
Here are the main chapters of this article :
3 – Create a Gutenberg Gallery Page
6 – My Settings for WP Super Cache and Autoptimize
When you enable AMP on your WordPress site, you don’t have to code. You simply install and configure an AMP plugin.
Serve AMP pages
Your AMP plugin will do the AMP coding for you, and will serve your pages with the AMP and/or the non AMP flavor.
The two main AMP plugins are :
1 – AMP for WordPress by AMP Project Contributors. This is the official AMP plugin for WordPress, referenced in the AMP Project.
2 – AMP for WP – Accelerated Mobile Pages by Ahmed Kaludi, Mohammed Kaludi.
I will not compare these two AMP plugins here as this is not the topic of this article.
I personally use the official AMP plugin.
However, I will show you how to serve non-AMP pages with both plugins.
Note that when you search for documentation about AMP, you often find in-depth description of AMP components like amp-inline-gallery, amp-lightbox-gallery, amp-image-lightbox. For instance look here in The AMP Component Catalogue.
When you enable AMP in your WordPress site with an AMP plugin, you do not have to code using these AMP components. The AMP plugins, Gutenberg, or other plugins do the coding for you.
Let’s come back to our previous Envira gallery.
Below is a screenshot of the initial Envira gallery, before the AMP migration :
I installed the AMP plugins on two different WordPress test sites and displayed the AMP version of my page with the Envira gallery :
So clearly, the Envira gallery cannot be displayed in an AMP page, neither with the official AMP plugin, nor with the AMP for WP plugin.
By the way, here is a usefull AMP tool that will test if your AMP page is error-free : the AMP validator.
Beware that if this AMP validator gives you an OK for your page, it means that there is no AMP compliancy error. But it does not mean that your page will look the way you expect it to.
Sanitizations tasks are important in AMP plugins is sanitization tasks. Before serving an AMP page, the AMP plugins removes uncompliant javascripts. The AMP official plugin has for instance a learning curve : it asks you to confirm that having removed uncompliant code is OK, and if you confirm, it will remove it from all subsequent pages. The AMP validation is described in detail in the AMP for WordPress documentation.
Back to our Envira gallery page. We saw that is is not displayed correctly when served as an AMP page. This does not mean your site cannot be enabled for AMP though. You can choose to serve some pages as non-AMP pages and some pages as AMP and non-AMP.
Serve non-AMP Pages
If you want to ensure that your user will see your images galleries the way you designed them, but if they don’t display properly with AMP, you can make sure that they are only available in a non-AMP version.
It is possible with both AMP plugins.
AMP for WordPress
When you edit a page, you can decide to allow or not the creation of an AMP version.
If you deselect “Enable AMP”, the page will not be available with an AMP version.
AMP for WP
If you select “Hide”, the page will not be available with an AMP version.
Moreover, if you type :
https://www.yourdomain.com/testpage/amp
you will be redirected to :
https://www.yourdomain.com/testpage
In summary…
If you want to keep your existing image galleries, but if they do not display properly with AMP, you will have to edit one by one all your posts and pages, and disable the AMP version of these pages.
This can take a while. I’ve been there… However, all galleries look the way the did before the AMP migration.
Tip with your Gallery Width
When you create an Envira Gallery, you add a shortcode in a Gutenberg shortcode block.
This block’s width is fixed to the main column width. I am using WordPress core theme Twenty Twenty, ans the main column width is up to 1032px wide.
The consequence is that the Envira gallery is tiny with big empty space on the left and on the right.
There is a way to workaround this:
- Create a Gutenberg Columns block
- Change one column width to the minimum (10 %)
- Insert a Gutenberg Shortcode block in the other column
- Paste the Envira Gallery shortcode in this block
- Now you can change the width of the Columns block to wide or fullscreen.
Create a Gutenberg Gallery Page
The alternative to using gallery plugins is Gutenberg, the native WordPress editor.
The WordPress Editor Gutenberg provides several image blocks :
- the Image block
- the Gallery block
- the Media a Text block
You can then dispose these blocks on the page as is or within the Columns block.
All these blocks are natively responsive.
If you just throw all your images in a Gutenberg gallery, it can look a little messy.
However if you are prepared to spend a little time rendering your images on the page, you can craft nice gallery pages.
Note that the Gutenberg Gallery block provides a Lightbox, but no Slideshow.
AMP specified already features for images that have not been implemented in the Gutenberg editor yet. For instance :
- The amp-image-slider component which allows comparing 2 images by moving the vertical slider bar.
- The amp-inline-gallery component which allows you to include thumbnails.
In the future, Gutenberg will probably implement those features, and AMP may also define more image-related features.
Performance Comparison
My purpose with these tests was to compare with an end-user perspective the load page time for pages with an Envira gallery in a non-AMP page and for an AMP page with a Gutenberg Gallery block.
Besides my own time perception, I used pingdom tool and Google PageSpeed Insight.
On a test WordPress site, I only installed the following plugins :
- AMP official plugin by AMP Project Contributors
- Envira Gallery Lite by Envira Gallery Team
- WP Lazy Loading by the WordPress Team
I enabled lazy loading in all tests via :
- Envira Light “Enable Lazy Loading?” parameter to yes.
- Activating the WP Lazy Loading plugin.
I made 3 test scenarios :
- Test 1 : 9 images – no text
- Test 2 : 27 images – no text
- Test 3 : 400 words text – 9 images – 400 words text
Then for every 3 test scenarios, I tested without then with :
- WP Super Cache by Automattic
- Autoptimize by Frank Goossens (futtta)
I details my settings for WP Super Cache and Autoptimize at the end of this article here.
Test 1 : 9 images – no text
I made two pages with 9 images, 3 columns of medium size images (300x300px, around 30KB each), and no text :
- one with an Envira Gallery – non AMP.
- one with a Gutenberg gallery block – AMP.
I checked that all served images are 300x300px on both pages.
Here are the performance test results with Pingdom and Google PageSpeed Insight :
| Gutenberg Gallery block AMP | Envira non AMP | |
| Pingdom | ||
| Page size | 467KB | 323KB |
| Load Time | 700ms | 633ms |
| Request | 21 | 26 |
| PageSpeed Insights (mobile) | ||
| First Contentful Paint (FCP) | 2,3s | 3,5s |
| Time to Interactive | 3,2s | 3,5s |
The response times are comparable.
Note from Insights’ documentation : FCP measures how long it takes the browser to render the first piece of DOM (Document Object Model) content after a user navigates to your page. Images, non-white canvas elements, and SVGs (Scalable Vector Graphics) on your page are considered DOM content; anything inside an iframe isn’t included.
I then reran the test with the optimization performance plugins :
- WP Super Cache by Automattic
- Autoptimize by Frank Goossens (futtta)
| Gutenberg Gallery block AMP | Envira non AMP | |
| Pingdom | ||
| Page size | 467KB | 306KB |
| Load Time | 772ms | 285ms |
| Request | 21 | 17 |
| PageSpeed Insights (mobile) | ||
| First Contentful Paint (FCP) | 1s | 3,2s |
| Time to Interactive | 3,3s | 3,2s |
In conclusion, when file optimization and caching are on, Pingdom load time is better with the Envira non-AMP page. However, when you look at the page content snapshoot taken when Load Time is measured, you see that the page is empty. This parameter may not correspond to an end-user perspective.
First content Paint is probably more meaningfull for the end-user experience. However when we look at the screensnapshop results from pageSpeed, we see that images are displayed on the screen just a touch before with Gutenberg gallery block and AMP compared to with the Envira gallery non AMP.
Notes :
- AMP caches texts but not images. So in both our cases, the images come from my test site. As this is the only content of the test pages, the caching aspect of AMP is of no use in this test.
- In the future, it’s highly possible that AMP caches also the images. In this case, using AMP with image Galleries might be an interesting option.
Test 1 : 27 images – no text
I made two pages with 27 images, 3 columns of medium size images (300x300px, around 30KB each), and no text :
- one with an Envira Gallery – non AMP.
- one with a Gutenberg gallery block – AMP.
| Gutenberg Gallery block AMP | Envira non AMP | |
| Pingdom | ||
| Page size | 1MB | 342KB |
| Load Time | 670ms | 600ms |
| Request | 39 | 26 |
| PageSpeed Insights (mobile) | ||
| First Contentful Paint (FCP) | 2s | 3.4s |
| Time to Interactive | 3.5s | 3.5s |
| Gutenberg Gallery block AMP | Envira non AMP | |
| Pingdom | ||
| Page size | 1MB | 320KB |
| Load Time | 280ms | 390ms |
| Request | 39 | 17 |
| PageSpeed Insights (mobile) | ||
| First Contentful Paint (FCP) | 2s | 2.5s |
| Time to Interactive | 3.4s | 2.6s |
Test 3 : 9 images – text
I made two pages with 9 images, 3 columns of medium size images (300x300px, around 30KB each), and text 400 words before the gallery and 400 words after the gallery :
- one with an Envira Gallery – non AMP.
- one with a Gutenberg gallery block – AMP.
| Gutenberg Gallery block AMP | Envira non AMP | |
| Pingdom | ||
| Page size | 480KB | 150KB |
| Load Time | 600ms | 600ms |
| Request | 22 | 20 |
| PageSpeed Insights (mobile) | ||
| First Contentful Paint (FCP) | 2s | 3.2s |
| Time to Interactive | 3.3s | 4.2s |
| Gutenberg Gallery block AMP | Envira non AMP | |
| Pingdom | ||
| Page size | 480KB | 140KB |
| Load Time | 300ms | 300ms |
| Request | 22 | 11 |
| PageSpeed Insights (mobile) | ||
| First Contentful Paint (FCP) | 2s | 3s |
| Time to Interactive | 3.3s | 3.4s |
Conclusion
We’ve seen how to continue to use a non-AMP gallery plugin and serve the pages containing an image gallery as non-AMP only.
We’ve also seen how to replace your old galleries with Gutenberg Galleries.
I then compared with performance measurement tools the page loading times in several context. I noticed differences mainly on :
- Page size
- Number of Requests
- First Contentful Paint
While it would be interesting in a further step to study these difference, I think that the page load is perfectly acceptable in all situations for the end-user.
In conclusion, I would say that choosing between :
1 – An Envira gallery in non AMP page
2- A Gutenberg Gallery in AMP page
is a question of :
- look and feel of the gallery
- choice to be AMP or not.
Now the choice is yours !
Thank you for your visit.
My Settings for WP Super Cache and Autoptimize
