In this tutorial, we look at a number of WordPress plugins that will help you manage your post revisions.
WordPress Plugins For Managing WordPress Post Revisions
In a separate tutorial, we looked at the WordPress Post Revisions feature, where WordPress saves all your post revisions, so you can always go back to an earlier version of what you have written and restore it.
In this tutorial, we look at a number of WordPress plugins that will help you manage your post revisions.
Managing Post Revisions – WordPress Plugins
As soon as you create, edit, and save pages and posts, WordPress begins to store new post revisions in its database. These are displayed in a Revisions section at the bottom of your page or post …
(Post Editor section – The Revisions box)
Having access to content workflow features like autosave and revisions is no doubt very useful. If you write or edit often, however, after a while the revisions can start building up. This can significantly increase the size of your WordPress database, so it’s important to manage your revisions.
(As post revisions accumulate, your database could be storing lots of unnecessary data)
For example, if you have 200 posts on your site and each post has an average of 20 revisions your WordPress database could be storing an extra 4,000 copies of old data. If your post averages 100KB data, then with 4,000 revisions, the total database space wasted is about 400MB.
Fortunately, there are some great WordPress plugins available to help you control your revisions and reduce the size of your database. Let’s take a look at a few of these:
(Optimize Database after Deleting Revisions – WordPress Plugin)
OptimizeDatabase not only lets you delete redundant revisions of posts and pages (with the added option to keep a specific number of your most recent revisions) and checks if the WordPress database needs to be optimized, it also lets you do the following maintenance tasks:
Delete trashed posts, pages, and comments
Delete unused tags
Delete ’orphan postmeta items’
Exclude certain posts/pages and tables from optimization
Create a log file of the optimizations
(Optimize Database after Deleting Revisions – WordPress Plugin Settings)
In this tutorial, we’ll show you how to reduce “Bounce Rate” in Google Analytics without touching code.
Before we do this, however, let’s quickly review what bounce rate is and why it’s important.
What Is “Bounce Rate”?
Here is the official definition given by Google Analytics …
A ‘bounce’ is a single-page session on your site. In Analytics, a bounce is calculated specifically as a session that triggers only a single request to the Analytics server, such as when a user opens a single page on your site and then exits without triggering any other requests to the Analytics server during that session.
In simple terms, a ‘bounce’ happens when a visitor exits your website from whatever page they came in (called the ‘landing page’) without going to any other page on your site.
(Google Analytics – Bounce Rate)
Here is another excerpt from Google’s Analytics blog …
Imagine you’re promoting a blog post that describes all the benefits of your company. The visitor might read the whole post and remember your company and products really well – they might even search for your product on one of the search engines straight away. However, since the visitor only looked at 1 page (exactly where the blog post is) they will be recorded as a bounced visitor.
Another example is if you have a description of your product right on the landing page, and your phone number on the same page. The visitor might study the description and call straight away – again, they will be recorded as a bounced visitor, as only 1 page was viewed.
“Bounce rate” is one of the key metrics you can use to evaluate the quality of your traffic and your marketing strategy.
Google takes bounce rate into account when trying to decide how to rank your pages in its search results.
A high bounce rate can mean that:
Your site is not attracting the right type of visitors
Your site is not delivering a great user experience
Visitors aren’t finding your content to be relevant, enticing, or well-organized.
Visitors may feel confused about what to do when they land on your site and leave without going anywhere else on your site.
A high bounce rate, then, is something that needs to be addressed if you want to improve conversions. Your landing pages or content may need to be tweaked and your marketing strategy may need to be reviewed.
The lower your bounce rate, then, the better.
How To Reduce Visitor Bounce Rate
There are a number of ways to reduce bounce rate and improve conversions on your site.
For example, you can:
Target the right visitors (e.g. use the right keywords, better headlines, better meta descriptions, etc).
Improve the quality of your content (e.g. make it more compelling and engaging, add links to relevant posts and pages, etc.).
Make the content easier to read (e.g. clear sections, better formatting, sghorter paragraphs, bullet points, etc.)
Make your site easier to navigate (e.g. navigation menus in the header, footer, and sidebars)
Reduce distractions that will make visitors want to leave (e.g. don’t use annoying pop-up ads)
All of the above suggestions are things you can and should do over time to reduce bounce rate and improve conversions. There is, however, something you can do to start improving results immediately.
How To Reduce Bounce Rate – Quick Tip
Google Analytics calculates the time visitors spend on your site based on the length of time between when a user enters your site and their last page view.
This can affect your bounce rate stats.
For example, consider these scenarios:
A visitor lands on one of your pages and spends 3 minutes and 35 seconds reading your content. They then leave your site. Even though they spent time on your site, they never interacted with it. Google considers this a bounce and records this as 0:00 time spent on site.
A visitor lands on your site and spends 2 minutes and 21 seconds on the landing page, before visiting another page, where they stay for 3 minutes and 25 seconds. The visitor then leaves the site without any interaction on the page. Because Google doesn’t know how long the visitor stayed on the second page, it only records the time the visitor spent on the first page.
Google itself is aware of this issue and recommends fixing this using something they call “adjusted bounce rate,” where a small tweak is made to the Google Analytics code on your site.
Fortunately, someone in the WordPress developer community has solved this issue for non-techies by creating the plugin below.
Reduce Bounce Rate is a free plugin that tells Google Analytics every few seconds (default = 10 seconds) that a visitor is still on the page and that they are interacting with it. This will ‘unbounce’ your page and help Analytics reflect a truer picture of your site’s bounce rate and time on site …
If your website uses lots of images or you run an e-commerce site using an application like WooCommerce, for example, your site may have to store hundreds or even thousands of product images.
Uploading loads of images to your server can lead to an excessively large image folder. This can cause your site to exceed its hosting quota, create problems with backups, slow down page loading times, and cause a number of other issues.
In this tutorial, we’ll show you how to create and save images correctly, how to reduce your images without compromising image quality and how to optimize the size of your image files to keep your site running smoothly.
Using Large Image Files On Your Website
If you plan to use large image files or lots of images on your website, we recommend not uploading and storing these in your WordPress installation, but using a cloud storage service like Amazon S3, Dropbox, etc. instead and adding the image via the Add Media ‘Insert from URL’ tool …
(Use an external storage service for adding large images to WordPress!)
To learn how to use the Add Media ‘Insert from URL’ tool, see this tutorial:
Your media settings are configured in your Media Settings section. Here you can specify whether to store media uploads into month and year-based folders or not …
Once media files are added to the Media Library, they are then uploaded to your server and stored in your wp-content > uploads folder, which you can access using applications like FTP or via your cPanel’s File Manager …
(Media files like images are stored in your server)
Uploading loads of large images (and other media files) to your Media Library, then, will cause your server’s disk storage to swell up in size …
(Storing large media files in your server can cause loads of problems!)
Storing large media files in your server can lead to problems like backing up files and slow down your website’s performance when loading web pages.
To avoid problems, large media files should be uploaded to the Amazon S3 account or an external service like YouTube (videos) and links to these files then embedded into web content using the WordPress Add Media tool.
Before we look at ways to reduce image file size, let’s go over some image file basics.
Image Specifications & Guidelines
You can avoid problems by setting out specifications and guidelines for using images in your website.
Understanding image size vs image resolution.
Understanding different image formats and when to use these.
Specifications for digital and print images and understanding the difference between these.
Let’s briefly go through each of the above:
Image Size vs Image Resolution
Image size refers to the dimensions of an image and is usually expressed in terms of pixels or points.
Image resolution refers to the number of pixels that can fit inside a specific area of a screen or printed surface and is normally expressed in terms of pixels per inch (ppi) or dots per inch (dpi).
For example, the dimensions of the image below are 680 pixels wide x 400 pixels tall …
Using an image editing tool like Photoshop, we can see that the resolution of this image is 72 pixels per inch …
Images for printed publications (e.g. magazines, brochures, etc.) need to be high resolution (e.g. 300 dpi), but most computer screens work really well with low resolution images (72-96 dpi). This includes images like photos, screenshots, logos, etc.
Errors using images occur when confusing image size with image resolution. You can have a very large image with a low resolution (which will not work for print – images will become pixelated), or upload high-resolution images to your website, which will significantly and unnecessarily increase the size of your server’s database.
Common formats used for saving images for use in websites include .jpg, .png, and .gif.
For practical purposes and simplicity’s sake, here’s a good commercial rule of thumb when deciding on which image format to use:
Save most images as .jpg unless your images need to have a transparent background.
If you want your image to have a transparent background, save it as a .png.
Animated images (e.g. advertising banners) are normally saved as a .gif.
You can learn more about different image formats here.
Digital Image Specs
If you plan to work with a large number of images that must be uploaded to your Media Library and stored in your WordPress installation (e.g. product images in WooCommerce), then follow the specs below to ensure that your server’s disk space won’t become excessively large and difficult to manage:
Image File Size: Aim for image file sizes no larger than around 500 kb.
Image Resolution: 72-96 ppi.
Image Dimensions: Try keeping your maximum image width to 900 – 1280 pixels. Typically, a width of 600-800 pixels is sufficient for many product images and screenshots.
Image Format: .jpg (maximum quality), unless image requires a transparent background. If image requires a transparent background, then save as .png with transparency turned on.
Image Mode: RGB
Print & Display Advertising Image Specs
High-quality printing or display advertising (e.g. magazines) typically require high resolution images (e.g. 300 dpi) saved in CMYK image mode.
If creating images for logos or company artwork, create these as high resolution images in large sizes (e.g. 5,000 pixels wide) as these images will probably be used in print, but make sure to reformat these to digital image specs when using these in digital artwork or uploading to your website.
Always work from larger to smaller dimensions and from higher to lower resolutions. Reducing image sizes and resolutions will retain image quality but not the other way round (going from smaller to larger size or resolution will make image appear blurred or pixelated).
When creating images from scratch, set the dimensions and resolution before you start.
You can set image size and resolution in Photoshop using the Image > Image Size dialog box …
(Photoshop > Image Size)
How To Reduce Image File Size
Before making any changes to images that have already been uploaded to your website and are currently being used in your content, do the following:
Back up your website.
Download folders containing images to your hard drive. If working in CPanel’s File Manager, compress and download a copy of the image folders to your hard drive.
Extract and make a copy of these image folders. We’ll edit images in these copied folders to make sure that nothing happens to the original files.
Create a folder inside your working images folder where you will edit and save images to (call the folder something like “reduce these”).
Select all large images above a certain file size (e.g. 500 kb) and copy these to your working folder.
Begin systematically opening and editing these images in an image editing application like Photoshop.
Save the edited image in your image editing folder.
Replace large file-sized images on your website with the smaller file-sized images you have just created.
After replacing all images on your website, review all pages to make sure that all images have been replaced correctly.
Delete large images from your server.
Go back to your website and check pages and content to make sure that no images are missing in your content.
Your files should now be significantly reduced in size.
If you can’t see image file sizes in your hard drive’s image folder, do the following:
Open up the folder in your hard drive containing your images, then right-click in your folder and select View > Details …
(Select View > Details)
Now you can see all image file sizes listed …
(List of images displaying image file sizes)
The next step is to start reducing each image to a smaller file size …
(Reduce each file to a smaller size)
Let’s take a look now at ways to reduce image file sizes.
Save Files As .Jpg
Images saved in .jpg format normally result in smaller file sizes than the same image saved in .png format …
For example, if we save our example image as a .png …
(Image saved as .png)
And then save the same image as a .jpg (maximum quality) …
(Image saved as .jpg)
You can see that the .png file has a larger file size than the .jpg image…
(The .png image is larger than the same image saved a .jpg)
Keeping this in mind, here’s something you can do if you have unnecessarily saved lots of image files on your website as .png instead of .jpg.
Convert .png Images To .jpg
Locate and open a large .png file from your working images folder using your image editor (e.g. Photoshop) …
(Open a large .png file)
For this example, we have selected an image that is over 3 Mb in size (3,160 kb). If we apply the image specifications from our earlier section to this image, we can see that:
The file doesn’t need to have a transparent background. It can be resaved as a .jpg image.
The image dimensions are larger than necessary.
(We can reduce this image file size)
Let’s save this file as a .jpg image first and see how much we can reduce the image file size by …
(Save the file as a .jpg)
By changing the file format from .png to .jpg, we have significantly reduced the image file size (from 3,160 kb to 900 kb) …
(Same image, different file image sizes)
This reduced image, however, is still almost twice as large as the file size specifications we have set for our images (no larger than 500 kb).
Now we have two options. We can reduce image file size by:
Reducing file size dimensions
Reducing image quality
Reduce File Size Dimensions
Let’s repeat the above process, but this time, we’ll reduce file size dimensions before saving the image as a .jpg.
First, select the image and open the ‘Image Size’ dialog box (Image > Image Size in Photoshop) …
(Image > Image Size)
Change the image dimensions to reduce the image size and make it fit within your specifications …
(Reduce image dimensions)
Now resave the image as a .jpg and look at the resulting file size …
(Same image has been significantly reduced in size)
We have reduced the image file size significantly.
Resizing image dimensions in your web pages will not reduce the file size of the original image in your server. To reduce image file size, change the dimensions of the original image, then replace the original image in your server with your edited image …
(Resizing images on your page does not reduce image file size)
Reduce Image Quality
Depending on what you plan to use your images for, reducing image quality by a level or two won’t make that much difference to the final result …
(JPEG Image Quality Settings)
For example, here is a .jpg image saved using maximum quality image optimization settings (100%) …
(JPEG Settings – Maximum Quality 100%)
Here’s the same .jpg image saved using the next level down (Very High) …
(JPEG Settings – Very High Quality 80%)
Here’s the same .jpg image saved using the next level down (High) …
(JPEG Settings – High Quality 60%)
Here’s the same .jpg image saved using the next level down (Medium) …
(JPEG Settings – Medium Quality 30%)
Here’s the same .jpg image saved using the next level down (Low) …
(JPEG Settings – Low Quality 10%)
Although there’s not that much difference in the images, the difference in file sizes can be significant …
(Same image different JPEG quality settings)
In addition to the above, you can also use the methods below to reduce image file size:
Crop Unnecessary Image Areas
If there are any excess areas around an image that are not required or essential, consider cropping the image to reduce image file size …
(Crop excess areas around images to reduce file size)
Check Image Resolution
Check to see if any large images uploaded to your website have been saved using a high image resolution and change the settings to reduce image file size …
(Images for use in web content don’t need very high resolutions)
Using some or all of the above methods can significantly reduce the file size of your stored images …
(Image file sizes can be significantly reduced to improve your website)
Image Compression Plugins
In addition to using the methods described above to reduce image file size, if you have loads of images uploaded to your WordPress media library, we also recommend looking at image compression and optimization plugins.
"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com