Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Optimize Your Website and Images for Speed

Would you like Soliloquy 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, 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.

Optimizing Your Host

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 Soliloquy’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?

Install and activate the Display PHP Version plugin and then check your dashboard.

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

Optimizing 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 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.

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).
  • 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.

FAQs

Q: How do I check my site/page speed?

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

A: Install and activate the Display PHP Version plugin and then check your dashboard.


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 Protection addon, which can help improve the copyright protection of your images.