Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Optimize Your Website and Images for Speed

Would you like Envira Gallery and your website in general to perform at their very best? We’ll cover several important optimization topics like: having a rock-solid hosting environment, caching, plugin settings, and image optimization. This tutorial will walk you through the steps needed to optimize for speed.

This tutorial is a bit more technical than our other docs, but we’ll walk you through the process, step by step. In order to follow some of these steps, additional tools, plugins, and host changes may be required.
Before completing any of the steps below, and when making changes in general, it’s important to make a backup of your site. Many hosts do this automatically, or can be configured to do so, but at the WordPress level, we recommend the UpdraftPlus plugin.
TIP: Test your website’s speed before and after you’ve made optimizations, to compare.

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 might 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 capable of being upgraded to, PHP 7+, is absolutely vital. Not just for Envira’s performance, but for your WordPress install and website overall. In some tests, PHP 7 is up to 50% faster than PHP 5.

How do I check which PHP version I have?

From within your WP admin, navigate to:

Envira Gallery » Settings » System Info

Envira Gallery System Info

Help Links for Upgrading to PHP 7 on Common Hosts

If you’re not seeing your host listed, try following these steps:

Other Host/Server Recommendations for a Better Performing WordPress Environment

  • 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.
  • Linux
  • PHP 7+
  • PHP Memory Limit: 256MB
  • MySQL 5.6+

See WordPress Requirements

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 wp-config.php file: 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.
W3 Total Cache, WP Rocket, Cloudflare, or any caching solutions or CDNs (Content Delivery Networks) in general have been known to cause conflicts. Unless you’re experienced in configuring these solutions properly, you may need to seek help from a pro.

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. Add the following to your .htaccess file (found in your host root in the same folder as wp-config.php):

## BEGIN DISABLE ETAGS ##
Header unset ETag
FileETag None
## END DISABLE ETAGS ##

## BEGIN GZIP COMPRESSION ##
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## END GZIP COMPRESSION ##

## BEGIN EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
## END EXPIRES CACHING ##

You can remove query strings from JS and CSS files by using this plugin or adding this to your theme’s functions.php file:

add_filter( 'script_loader_src', 'yourslug_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'yourslug_remove_script_version', 15, 1 );
function yourslug_remove_script_version( $src ) {
$parts = explode( '?', $src );
return $parts[0];
}
Whenever customizing at this level, you should either use a child theme or custom plugin to add functions or your changes will be overwritten when you update your theme.

Envira Gallery itself, has a few options available to optimize for better page loading.

  • Lazy Loading. This loads images only once they’ve come into view above the pagefold, 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?.
  • Image Size. Also under the Configuration tab, you might want to set Image Size to something more reasonable like Medium (300 x 300). There’s generally no reason for the gallery thumbnails to use the full-size images. That’s what the Lightbox is for.
  • Pagination. This will break up large galleries into multiple pages, rather than dumping them all onto one page. This also makes it easier for people to browse the gallery. You’ll need the Pagination addon for this feature.

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.
Please note that if retaining the metadata for images is important to you, you’ll need to carefully turn off that feature in various compression tools.

A: We recommend GTmetrix. Pingdom and Google’s PageSpeed Insights are also pretty good tools.

A: From within your WP admin, navigate to:

Envira Gallery » Settings » System Info

and look for the line: PHP Version.


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. Be sure to check out the Pagination addon, which can also help improve performance by breaking up large galleries into smaller sections.