Documentation, Reference Materials and Tutorials for Envira Gallery
Would you like Envira Gallery and your website in general to perform at its very best? We’ll cover several important optimization topics in this tutorial to get the most out of your WordPress site. This tutorial will walk you through the steps needed to optimize your site for speed.
- Optimize Your Hosting
- Getting the Most Out of Your WordPress Install
- Using Envira’s Available Optimizing Options
- Optimizing Your Images
Optimize Your Hosting
It all starts with picking a good host to begin with. We both use and recommend SiteGround.
Although, if you have a larger budget for your project or know that you’ll be needing to support hundreds or thousands of photos and have a high volume of traffic, something more scalable like WP Engine may be in order.
Whether you’re interested in one of the recommendations above or already have hosting, making sure that your server is already on or is capable of being upgraded to PHP 7+ is absolutely vital. Not just for Envira’s performance but for your WordPress install and overall website performance.
In some tests, PHP 7 is up to 50% faster than PHP 5.
Confirm Your PHP Version
Log into your WordPress site and navigate to Envira Gallery » Settings » System Info tab.
Here you can easily see the PHP version you’re hosting company currently has installed for you as well as some other important server information.
If you’re not already on PHP 7+ we recommend you contact your hosting company to request an upgrade for you PHP version.
Other Server Config Recommendations
As shown below, you’ll find some other helpful recommendations for your server configuration:
- Set up server-side caching like Memcached and Varnish. You’ll need to search your host’s documentation or contact their support to see if this is available to you.
- PHP 7+
- PHP Memory Limit: 256MB
- MySQL 5.6+
You can see what WordPress recommends for your server setup on their requirements page.
Getting the Most Out of Your WordPress Install
Over time, your WordPress install can become quite bloated. Follow these steps to make sure your install is running at optimum capacity:
- It’s always important to keep your theme, plugins, and WordPress itself up-to-date.
- It’s a good idea to do a plugin audit every now and then and delete out anything you don’t need.
- WordPress automatically generates many intermediate images (multiple sizes of the same image), that you both might not even know exist or will never use. There’s no reason to devote precious server resources to the generation and storage of these files. With the Stop Generating Image Sizes plugin, you can eliminate this behavior.
- WordPress automatically saves unlimited post revisions, which can amount to thousands of needless posts, which can bloat your database. Stop this behavior by adding this line to your
define( 'WP_POST_REVISIONS', 3 );to limit the revision count to only the latest 3 revisions.
- After adding that, it would be a great time to delete all those backed up revisions and generally clean up your database with the WP-Optimize plugin.
- Install a caching plugin. There are many cache plugins available. W3 Total Cache is an excellent free option. WP Rocket is a great premium option, that is much easier to use. While WP Rocket is very easy to configure, we should mention that generally, caching plugins are advanced and require careful configuration to not break site features. If your galleries are broken after installing a caching plugin, start by disabling its JS minification settings.
- Install Cloudflare (free). Cloudflare both integrates with and compliments WP Rocket.
Address Expires Headers
Alternatively, instead of installing a plugin or service as mentioned above (which will handle most optimizations automatically), if that’s too difficult, impossible, or is causing too many conflicts, you can take a more surgical approach to address Expires Headers, Browser Caching, and GZIP Compression recommendations.
Remove Query Strings
You can also remove query strings from JS and CSS files by using a free plugin called Remove Query Strings From Static Resources.
Using Envira’s Available Optimizing Options
Envira Gallery itself, has a few options available to optimize for better page loading.
Enable Lazy Loading and Cropped Images
Enable Envira Lazy Loading for your gallery will also help. This loads images only once they’ve come into view above the page fold, rather than simply loading the entire image set at the beginning.
When editing a gallery, under the Configuration tab, check the box for Enable Lazy Loading?
Also under the Configuration tab, you can define a specific image size and Crop Images as shown in the image below.
Enable Envira Pagination
Using Envira’s Pagination Addon will break up large galleries into multiple pages, rather than dumping them all onto one page. This can also makes it easier for people to browse the gallery.
If you need any help using the pagination, review our documentation on the Pagination addon.
Using Envira’s Albums Addon
You can also use Envira’s Albums Addon to create an album for a single or set of galleries. The Albums Addon would show 1 image for each gallery inside the album.
For assistance in creating an Envira album, check out our documentation for the Albums Addon.
Optimizing Your Images
It’s very important to optimize your images to get the smallest file size possible. With the right steps and tools, it’s also possible to do this without losing any noticeable quality.
The following steps assume you’re using Photoshop, but can most likely be followed in other image editors as well. If you have hundreds or thousands of images, you may wish to record these steps as a new Action for later automation.
- Resize your image(s) to a max width of 1920px (there’s really no reason to upload images that are 5000px wide, unless you’re selling stock photos – and even then, they shouldn’t be displayed at that size on the front-end of your site).
- Save as .jpg with a Quality of 8.
- Losslessly compress your image(s) with a tool like ImageOptim or ExifTool. Alternatively, though you may not want to put this much pressure on your server, you can automate this process with a plugin like EWWW Image Optimizer or Smush.
And that’s it. Whether you only tried a few of these optimization techniques or all of them, you should have a noticeably zippier website.
Check out some of our other tutorials, such as How to Limit Number of Images Displayed.