FooGallery just got better! FooGallery Version 2 has just been released and includes major improvements for performance. In fact, we’re confident that FooGallery is now the best gallery for optimized performance and improved ranking.
Below, we take a look at some of the changes we have made and how this affects your galleries’ performance.
The majority of the changes we made were done to improve the plugin’s performance scores in Lighthouse. Lighthouse is Google’s performance metrics suite, used to assign a score to a page. These performance scores form part of the overall score for your site, which in turn affects your Google search result rankings.
There are six primary metrics used to determine this performance score:
- First Contentful Paint: Marks the time at which the first text or image is painted. Learn more.
- Time to Interactive: The amount of time it takes for the page to become fully interactive. Learn more.
- Speed Index: Shows how quickly the contents of a page are visibly populated. Learn more.
- Total Blocking Time: Sum of all the time periods between First Contentful Paint and Time to Interactive, when task length exceeded 50ms. Learn more.
- Largest Contentful Paint: Marks the time at which the largest text or image is painted. Learn more.
- Cumulative Layout Shift: Measures the movement of visible elements within the viewport. Learn more.
Taking these factors into consideration, we decided that it was time to improve some behind-the-scenes elements of FooGallery. This was mainly to ensure that your website’s performance wouldn’t be negatively impacted by using a photo gallery.
Put simply, this update was to improve overall plugin speed and prevent as much Cumulative Layout Shift as possible.
The following image shows the trace breakdowns for a basic Responsive gallery with 50 items using the previous 1.4.26 version of the plugin compared to the new 2.0.0 version.
This shows an improvement in all categories but most notably for Scripting and Rendering which affect the general feeling of speed and responsiveness of a page. Overall the 2.0 version of the plugin has a 57% speed improvement over the previous version.
Other Notable Changes
Another example is the change to Placeholders. Previously, an item’s img element was rendered with no src attribute. This caused an issue as first, it was not valid markup, and second, browsers rendered the img element as a broken image. An item’s img element is now rendered with a src attribute containing a data uri generated by the server. This change has ultimately prevented unnecessary repaints and layout shifts from occurring.
Lastly, as WordPress support for older Internet Explorer versions has decreased, we have been able to make use of more native code (where possible) to get the best performance. This includes making use of new APIs, which provide new performant methods built into the browser. These perform some fairly common code associated with responsive web development, such as lazy loading and dynamically resizing content.
Gallery Template Updates
Our gallery templates all work differently to one another, and therefore each affects the cumulative Layout Shift differently. We’ve worked on each of our templates to ensure the best possible result. However, some layouts (for example, the Responsive Gallery Template) deliver better results in terms of CLS.
The Justified gallery has been updated and is now fully justified. In the previous version, images might have been stretched or cropped to easily fit into the gallery rows, but this no longer happens. Thumbnail images now keep their dimensions, which can sometimes cause the rows to end before the edge of the gallery. This occurs when the Row Height and Max Row Height conflict with one another. A simple fix is to make the row height smaller than the max row height, until the rows align. In the below scenario, changing the Max Row Height to 200 fixed the alignment.
We have added several new layout options, including mobile columns for the Responsive Gallery. We’ve also added a 6-Columns option for the Masonry Gallery.
We’ve added support for Shortpixel Adaptive Images as a thumbnail engine. This can be changed from the global image settings, by selecting ShortPixel as the Thumbnail Engine. Then click on Save Changes at the bottom of the page.
Custom lightbox captions are now available when using FooBox as the selected lightbox. This will work much the same was as custom captions for the thumbnails, or as before when using these captions for the FooGallery PRO Lightbox.
What Else Should You Know?
A recent change in YouTube meant that FooGallery PRO couldn’t access videos in the usual way. This has been addressed in this latest release, by allowing you to add an API key for YouTube. Without the API you can still add videos by using the video URL, but the key gives you a bit more flexibility for searching and adding videos. You can read more about this here.
We’ve moved the loaded effects (previously only in Pro) into our Free gallery plugin. Now anyone can add a loaded effect to their gallery. This feature lets you choose how the thumbnails are loaded, such as fading in, sliding up or flipping.
Demo content is now available to you from the FooGallery help page. Clicking on the Create Demo Galleries button will import sample images into your media library, using these to generate demo galleries. Alternatively, you can click on the Demo tab in the Help screen to see additional gallery demos.
How Do These Changes Effect You?
The changes we have made should have no impact on the way you use FooGallery! You can continue to use the plugin and create galleries, confident in the knowledge that FooGallery is now performing better than ever. In fact, we’re able to report a 50% increase in speed. This comes from the tests we have run and from what some of our beta testers have reported.
However, this has been a major update. While we have carried out extensive testing, it simply isn’t possible to test FooGallery with every theme or plugin available. This may mean that you might run into some conflicts along the way.
Here are some ways to handle potential issues: