Automating visual comparison checks of your website

(This post was originally written for the Publishing Blog, where it appears in German.)

As a website owner, it’s essential for your business and for your success that you can be sure your site is stable, safe and secure. Using trusted and popular security and backup plugins or third-party services is an essential step. These help you to be sure that, should the worst happen, your site and your data is secure and recoverable.

Most hosting providers create regular backups of your data—although not necessarily every day—but it’s also advisable to look into alternative solutions like WP Umbrella or ManageWP, which store copies of your site in a secondary location. This off-site storage is perfect in case the hosting company loses your data, or in case their infrastructure has a major problem.

The location of your off-site data storage is very important for data privacy reasons. Increasingly-strict privacy regulations in the E.U. (and soon, in Switzerland) mean that data storage in the U.S.A. is a bad idea for European website owners. The ability to store your data in Europe must be a deciding factor in which provider you choose.

Part of the experience we’ve gained as a WordPress agency over the past few years is the importance of having a reliable system in place which takes care of site backups, security scans and monitored server reaction times. We also need the means to monitor all of the sites we maintain for outstanding updates. Most security issues which arise on WordPress projects are down to one of two reasons: insecure passwords and outdated software.

Once you’ve set up a solution for backup and security-scanning purposes, it’s also critical you know that your website still looks as it’s supposed to. How can you be sure that updates to the site—for example, updating a third-party theme or plugin—haven’t caused unexpected changes in the layout and display of your site? The site will still be online and reachable, but it’s possible that some of the content may be presented differently or erroneously.

The answer is to use an automated system to scan the pages and compare them optically. If any content has moved, or is missing, or if an error message has begun to appear, the system will notice it by comparing a current screenshot with a previous version.

We’ve begun implementing a third-party solution which does just this. VisualPing allows us to set up “jobs” which watch individual pages for changes, and notify us if there are any differences. During this implementation phase, we receive emails if any of the watched pages have any differences. The system sends us screenshots for manual comparison if there are any noticeable differences.

Take the following two screenshots from the front page of Publishing Blog as an example. VisualPing has seen that a new article has been posted and that the content of the “Aktuelle Jobangebote” Widget in the sidebar has changed. This kind of notification allows us to know straight away* if there’s something wrong, taking monitoring beyond simple notification that the website is online or offline. You can even set the accuracy level: for example, only receive a notification if more than 10% of the page has changed.

Before the update…
…and after the update.

* The service allows you to define how often the site or page is checked. During the implementation phase, we’re having a set of URLs checked every 24 hours; later, websites with service level agreements will be monitored much more regularly. Notifications are sent out immediately after the URL has been checked and a difference found.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.